Badge CSS

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

New
  • –smart-grid-footer-height – Used to set the default height of the footer. Default is 30px;
  • –smart-grid-header-height – Used to set the default height of the header. Default is 30px;
  • –smart-grid-group-header-height – Used to set the default height of the group header. Default is 30px;
  • –smart-grid-column-header-height – Used to set the default height of the column header. Default is 30px;
  • –smart-grid-pager-height – Used to set the default height of the pager. Default is 30px;
  • –smart-grid-filter-footer-height – Used to set the default height of the filter’s footer. Default is 30px;
  • –smart-grid-aggregate-footer-height – Used to set the default height of the aggregate’s footer. Default is 30px;
  • –smart-grid-header-color – Used to set the default color of the header. Default is rgb(149, 149, 149);
  • –smart-grid-header-background-color – Used to set the default background of the header. Default is #fff
  • –smart-grid-group-header-background-color – Used to set the default background of the group header. Default is #fff
  • –smart-grid-column-header-color – Used to set the default color of the column’s header. Default is rgb(149,149,149)
  • –smart-grid-column-header-border-color – Used to set the default border color of the column’s header. Default is #ddd
  • –smart-grid-column-header-background-color – Used to set the default background color of the column’s header. Default is #fff
  • –smart-grid-cell-fixed-background-color – Used to set the default border color of the fixed cells. Default is #fafafa
  • –smart-grid-cell-filter-row-background-color – Used to set the default filter row background color. Default is #f4f4f4
  • –smart-grid-pager-background-color – Used to set the default pager’s background color. Default is #fafafa
  • –smart-grid-cell-background-color – Used to set the default cell’s background color. Default is #fff
  • –smart-grid-cell-color – Used to set the default cell color. Default is #333
  • –smart-grid-cell-border-color – Used to set the default cell border color. Default is #f4f4f4
  • –smart-grid-footer-background-color – Used to set the default footer background color. Default is #fff
  • –smart-grid-aggregate-footer-background-color – Used to set the default aggregate background color. Default is #f4f4f4
  • –smart-grid-column-filter-background-color – Used to set the default column filter’s background color. Default is #f4f4f4
  • –smart-grid-cell-summary-row-background-color – Used to set the default summary row’s background color. Default is #f4f4f4