Page Appearance

page_layout

for layout of page there are 2 options given below. Values are in string.

  • Property: "page_layout"
  • Choices: "container", "container-fluid"

Example

"page_layout": "container-fluid",
choices: 'container', 'container-fluid'
theme_style_appearance

for layout of page there are 2 options given below. Values are in string.

  • Property: "theme_style_appearance"
  • Choices: "theme-default", "theme-flat", "theme-bordered", "theme-sharp"

Example

"theme_style_appearance": " ["theme-default"],
choices: 'theme-default', 'theme-flat', 'theme-bordered', 'theme-sharp'

There are two ways you can change the setting of your page:

With the use of live customizer

You can work on page style using Live Customizer in two different ways:

  • You can change the themes with the property name and its value here by declaring property name and its values in database->seeder
    ->AppSettingTableSeeder.php file.
    -This is the example of AppSettingTableSeeder.php file.
    • 'value' => '{
	"saveLocal": "",
	"storeKey": "huisetting",
	"setting": {
	    "app_name": { "value" : "Hope UI"},
	    "page_layout": {"value" : "container-fluid"},
	    "theme_style_appearance": {"value": []},
	}
}',
    After making changes in seeder it is necessary to run php artisan migrate:fresh --seed to save changes in database.
  • You can change page-appearance from your database for that open table with name app_setting.In the cloumn name value change the value for variable page_layout and theme_style_appearance
Manual

You can change the page style and appearance with a single action.

  • By adding some classes in parent div section. Example is given below.
    • Page Style

    If you wish to change the page style, you can follow the below action.

    For example you have to set page style as boxed then you will have to add container class at main section.

    - For page style as boxed

    <main class = "main-content">
    <div class = ".... container">
    .......
    </div>
<main>

    - For page style as full width

    <main class = "main-content">
    <div class = ".... container-fluid">
        .......
    </div>
<main>
    Page Style Appearance

    If you wish to change the page style appearance, you can follow the below action.

    For example you have to set page style appearance as flat then you will have to add theme-flat class at body tag.

    - For page style as boxed

    - For page style appearance as flat

    <body class=".... theme-flat">
    .......
</body>

    - For page style appearance as bordered

    <body class=".... theme-bordered">
    .......
</body>;

    - For page style appearance as sharp 

    <body class=".... theme-sharp">
    .......
</body>;
Previous Next