Badge CSS Styling

Smart HTML Elements use a pair of css files - smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element's layout like margin, padding, border-width, position. The second CSS file applies the HTML Element's colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

Smart Badges can be styled easily by changing the CSS attributes of the class smart-badge or by creating a custom theme and using it instead of the already available ones. For example the user can create a new theme called smart-badge-my-custom-theme, set different colors and styles to it and apply it along with the mandatory smart-badge class to an HTML element like so:

<style>
 .smart-badge.smart-badge-my-custom-theme {
     color: #A9A9A9;
     background-color: #eeeeee;
 }
</style>

<span class="smart-badge smart-badge-my-custom-theme">Custom</span>

As a result the user will have it's own uniquely styled Smart Badge that can be placed in a menu item for example.

Demo