Page Appearance
-
page_layout
- for layout of page there are 2 options given below. Values are in string."page_layout": "container-fluid", choices: 'container', 'container-fluid'
-
theme_style_appearance
- for card apperance there are 4 options given below. Values are in array."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 page style and its appearance with the property name and its value here by declaring property name and its values in
Database->Seeds->AppSettingSeeder.php
file.- This is the example ofAppSettingSeeder.php
file.'value' => '{ "saveLocal": "", "storeKey": "huisetting", "setting": { "app_name": { "value" : "Hope UI"}, "page_layout": {"value" : "container-fluid"}, "theme_style_appearance": {"value": []}, } }',
php spark migrate:refresh
to save changes in database. -
You can change page-appearance from your database for that open table with name
app_setting
.In the cloumn namevalue
change the value for variablepage_layout
andtheme_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.
<main class = "main-content">
<div class = ".... container">
.......
</div>
<main>
<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.
<body class=".... theme-flat">
.......
</body>
<body class=".... theme-bordered">
.......
</body>;
<body class=".... theme-sharp">
.......
</body>;