Documentation

Vue

Footer Appearance

This are in string.
File name:- /src/app/store/setting/state.ts
  1. footer
    - for footer there are 4 options given below: 
    "footer": "default",
choices: 'default', 'sticky'

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

With the use of live customizer
You can work on footer using Live Customizer in three different ways:
  1. You can change the footer with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting":{
        "app_name": { "value" : "Hope UI" },
        "footer": {"value" : "sticky"},
    }
},
  2. Go to the live customizer and click on the 'Copy Config' button available at the top-right to copy the json file from the setting panel. Paste the copied code in the IQSetting(setting_options) at the setting-init.js file.
    - Before
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting(setting_options);
    - After
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting({
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": {
        "app_name": {"value": "Hope UI"},
        "footer": {"value" : "sticky"},
    }
});
  3. You can change the footer by adding property name and its values in the <meta> tag given in <head> section.
    - This is the example of <meta> data 
    <head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting",
        "setting":{
            "app_name":{"value":"Hope UI"},
            "footer": {"value" : "sticky"},
        }
    }>
</head>
Manual
You can change the footer layouts with a single action.
  1. By adding some classes in footer parent section. Example is given below.

    2. Footer Style

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

    For example you have to set footer style as sticky then you will have to add sticky class at footer tag.

    - For footer style as sticky 
    <footer class="footer ..... sticky">
    .......
</footer>
    - For footer style as default 
    <footer class="footer ..... default">
    .......
</footer>
Previous Next