====== 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 [[docs:theme:theme|theme]], it will be applied to your page.

Example for the [[:docs:content:badge|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

{{:docs:theme:default-component-stylesheet-file-explorer.png|}}
===== Component Styling Class =====


To ease the selection of components in order to apply a style, every component got two generated [[:docs:styling:class|classes]]

<code>
name-cs
name-type-cs
</code>
where:
  * ''name'' is the component name
  * the suffix ''cs'' is a namespace that stands for Combostrap
  * ''type'' is the [[:docs:styling:type|component type]]

For instance, for a [[docs:content:badge|badge]] with the [[docs:styling:type|type]] ''primary'', you will get the [[docs:styling:class|class]]:
<code>
badge-cs
badge-primary-cs
</code>

This [[docs:styling:class|classes]] permits selecting the component by type and applying the style accordingly.


===== Example =====

You should first [[howto:theme-creation|create your theme]]

Then in the ''components'' directory

  * you can create the below file ''badge.css'' to change the text color of [[docs:content:badge|primary badge]]:
<file css badge.css>
badge-primary-cs{
    color: #333 !important;
}
</file>
  * You can create the below file ''file.css'' to customize the [[docs:block:file|file component]].
<file css file.css>
code.file-cs{
    color: #333 !important;
}
pre.file-cs{
    background-color: #e9ecef !important;
}
</file>


===== Bootstrap stylesheet =====

Because by default, the style applied is the style of the [[:docs:theme:bootstrap|bootstrap stylesheet]], you may also customize them:
  * by choosing another [[:howto:stylesheet-bootstrap|bootstrap stylesheet]]
  * by [[:howto:bootstrap-custom|creating your own bootstrap stylesheet]]
  * or via [[docs:theme:css-variable|Css variable]] in a theme