Component Stylesheet

About

This functionality gives the possibility for Web Designers to customize the style of Combostrap components.

How it works?

If a stylesheet with the name of a component is found in the components/css directory of a theme, it will be applied to your page.

Example for the badge component

• If there is a file name badge.css,
• If you are using the badge component on your page
• This stylesheet will be applied to that page

Component Styling Class

To ease the selection of components in order to apply a style, every component got two generated classes

name-cs
name-type-cs

where:

• name is the component name
• the suffix cs is a namespace that stands for Combostrap
• type is the component type

For instance, for a badge with the type primary, you will get the class:

badge-cs
badge-primary-cs

This classes permits selecting the component by type and applying the style accordingly.

Example

You should first create your theme

Then in the components directory

• you can create the below file badge.css to change the text color of primary badge:

badge-primary-cs{
    color: #333 !important;
}

• You can create the below file file.css to customize the file component.

code.file-cs{
    color: #333 !important;
}
pre.file-cs{
    background-color: #e9ecef !important;
}

Bootstrap stylesheet

Because by default, the style applied is the style of the bootstrap stylesheet, you may also customize them:

• by choosing another bootstrap stylesheet
• by creating your own bootstrap stylesheet
• or via Css variable in a theme