Advanced Configuration

The app name value is of text type and can be configured as follows:

App Name
  • Property: "app_name"
  • Value: "Hope UI"

Example

"app_name": { "value" : "Hope UI" }

To use the app name in the project add the below given line to the location you want to show the app name

logo
Note: Make sure to add the attribute data-setting="app_name" to the associated element.

The page layout values are of strings type and can be configured as follows:

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

Example

"page_layout": { "value" : "container-fluid" }

The style appearance values are of array of strings type and can be configured as follows:

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

Example

"theme_style_appearance": { "value" : [] }

The page transition values are of strings type and can be configured as follows:

Page Transition
  • Property: "theme_transition"
  • Choices: "theme-without-animation", "theme-with-animation"

Example

"theme_transition": { "value" : "theme-with-animation" }

Changing page layout Settings

There are two ways to change the advanced appearance settings:

1. Using the Live Customizer

You can work on page layout using the Live Customizer in three different ways:

a. By Declaring Properties in gulp.config.json

Example gulp.config.json:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "app_name": { "value": "name_of_your_app" },
        "heading_font_family": { "value": "null" },
        "page_layout": { "value": "container-fluid" },
        "theme_style_appearance": { "value": [] },
        "theme_transition": { "value": "theme-with-animation" },
    }
},
b. By Copying Configuration from the Live Customizer
  1. Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
  2. Replace the copied code into the options object in the gulp.config.json file.
Before:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "app_name": { "value": "Hope UI" },
        "heading_font_family": { "value": "null" },
        "page_layout": { "value": "container-fluid" },
        "theme_style_appearance": { "value": [] },
        "theme_transition": { "value": "theme-with-animation" },
    }
},
After:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "app_name": { "value": "name_of_your_app" },
        "heading_font_family": { "value": "null" },
        "page_layout": { "value": "container-fluid" },
        "theme_style_appearance": { "value": [] },
        "theme_transition": { "value": "theme-with-animation" },
    }
},
c. By Adding Properties in the Tag

Example <meta> tag:

<head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting-html",
        "setting":{
            "app_name": { "value": "name_of_your_app" },
        "heading_font_family": { "value": "null" },
        "page_layout": { "value": "container-fluid" },
        "theme_style_appearance": { "value": [] },
        "theme_transition": { "value": "theme-with-animation" },
        }
    }>
</head>
1. Manual Configuration

You can change the advanced appearance style with a single action by adding the appropriate class to the appropriate element.

Page Layout

To change the page Layout, set the class in div with id page_layout:

  • Boxed:
    • <div id="page_layout" class="container">
    .......
</div>
  • Full Width:
    • <div id="page_layout" class="container-fluid">
    .......
</div>
Style Appearacne

To change the style appearance, set the class in body tag:

  • Flat:
    • <body class="theme-flat">
    .......
</body>
  • Bordered:
    • <body class="theme-bordered">
    .......
</body>
  • Sharp:
    • <body class="theme-sharp">
    .......
</body>
Page Transition

To change the page transition, set the class in body tag:

  • With Animation:
    • <body class="theme-with-animation">
    .......
</body>
  • Without Animation:
    • <body class="theme-without-animation">
    .......
</body>
Previous Next