Section CSS

The styling of section will be written in the file style.css, located in the directory of the section.

All of css in this file style.css will be add the section prefix, so you can only write style for elements in the current section.

Import css vendors

If you need importing css vendors like font icons, you can do it in the @schema of section.lh

section.lh
@schema
{
"name" : "Section Name",
"author" : "LayoutHub",
"website" : "https://www.LayoutHub.com",
"version" : "1.0",
"vendors" : [
"icons/fa-solid.css"
]
}
@endschema

Using variables

Syntax

Description

%url%

The url of section to using image or import media

var(--lh-)

The theme color from theme settings

var(--lh-font-family)

The font family name from theme settings

var(--lh-font-size)

The font size from theme settings

var(--lh-title-font-family)

The font family of title from theme settings

rgba(var(--lh-color-rgb), 0.5);

Reduct the alpha value of color using RGBA

Example

style.css
button.sty2 {
background: var(--lh-color);
color: #fff;
}
button.sty2:hover {
background: rgba( var(--lh-color-rgb), 0.5 );
color: #fff;
}