Card Style
The Card style values are of strings type and can be configured as follows:
Card Style
- Property: "card_color"
- Choices: "card-default", "card-glass", "card-transparent"
Example
"card_color": { "value" : "card-default" }
Changing Card Style Settings
There are two ways to change the card style settings:
1. Using the Live Customizer
You can work on card style 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":{
"card_color": { "value": "card-default" },
}
},
b. By Copying Configuration from the Live Customizer
- Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
- Replace the copied code into the options object in the gulp.config.json file.
Before:
"options":{
"saveLocal": "sessionStorage",
"storeKey": "huisetting-html",
"setting":{
"card_color": { "value": "card-default" },
}
},
After:
"options":{
"saveLocal": "sessionStorage",
"storeKey": "huisetting-html",
"setting":{
"card_color": { "value": "card-transparent" },
}
},
c. By Adding Properties in the Tag
Example <meta>
tag:
<head>
<meta name="setting_options"
content="{
"saveLocal":"sessionStorage",
"storeKey":"huisetting-html",
"setting":{
"card_color": { "value": "card-default" },
}
}>
</head>
1. Manual Configuration
You can change the card style with a single action by adding the appropriate classes to
the <body>
tag.
Card Style
To change the card style, set the class in body:
- Card Default:
- Card Glass:
- Card Transparent:
<body class="card-default">
.......
</nav>
<body class="card-glass">
.......
</nav>
<body class="card-transparent">
.......
</nav>