Table of Contents

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

Default Component Stylesheet File Explorer

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: