Component Stylesheet

Undraw Dark Mode 2xam

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

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:




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Combostrap Default Theme File Explorer
How to create your own theme?

This page shows you how to create your own theme. You can then apply advanced design and logic to your whole website application. Combostrap uses a theme system where: each page has its own template...


Recommended Pages
Undraw My Documents
ComboStrap Styling - Class attribute

Because all ComboStrap UI component are implemented as super set HTML element, you can apply the class attributes. The class attribute is used intensively by Bootstrap to apply the Bootstrap...
Undraw My Documents
Hover animation

Improve the emphasis of your component by adding onHover animation
Undraw Dark Mode 2xam
Theme

A theme designs your entire website app. A theme is composed of: templates. Each template applies to one page and designs a layout. component styling You can apply: a bootstrap stylesheet or...



Task Runner