Error
Use Rock’s built-in badge styles to simplify the creation of custom Rock badges starting in V14.
When using our recommended markup, Rock Badges will automatically scale wherever they are placed within the Rock interface.
If custom badges that are not rendering correctly in Rock V14 add the following snippet to the top of the Rock theme CSS Overrides section. This can be found by selecting the "Rock" theme in CMS Configuration > Themes. Migrating to the new V14 markup as soon as possible is recommended.
CMS Configuration
Themes
@enable-legacy-badges: true;
<div class="rockbadge rockbadge-standard"> <span class="metric-value">9</span> <span class="metric-unit">yr</span> </div> <div class="rockbadge rockbadge-standard"> <span class="metric-value">eRA</span> </div>
<div class="rockbadge rockbadge-icon"> <i class="badge-icon fa fa-tint"></i> </div> <div class="rockbadge rockbadge-icon rockbadge-circle"> <i class="badge-icon fa fa-tint"></i> </div> <div class="rockbadge rockbadge-icon rockbadge-disabled"> <i class="badge-icon fa fa-tint"></i> </div> <div class="rockbadge rockbadge-icon rockbadge-disabled rockbadge-slash"> <i class="badge-icon fa fa-tint"></i> </div> <div class="rockbadge rockbadge-icon rockbadge-slash"> <i class="badge-icon fa fa-tint"></i> </div> <div class="rockbadge rockbadge-icon rockbadge-icon-nobg"> <i class="badge-icon fa fa-tint"></i> </div>
<div class="rockbadge rockbadge-fraction"> <span class="metric-value">0</span> <span class="metric-unit">/16</span> </div>
<div class="rockbadge rockbadge-overlay"> <i class="badge-icon fa fa-chalkboard"></i> <span class="metric-value">13</span> </div>
<div class="rockbadge rockbadge-label"> <span class="label label-info">General Group</span> </div>
Rockbadges support HTML tooltips using the following markup. Details are provided below.
<div class="rockbadge" data-toggle="tooltip" data-html="true" data-title="No baptism date entered for Ted Decker."> ... </div>
data-toggle="tooltip"
data-title
data-html
data-html="true"
data-placement