BindTuning themes are designed for extensive customization, exposing a rich set of internal color and typography definitions. These definitions, which you configure during the theme's customization process, are made available through a series of utility CSS classes and a JavaScript object. This allows you to apply your theme's specific branding consistently across your SharePoint environment.
This article provides a comprehensive reference of the available CSS classes for colors and typography, along with guidance on how to leverage them for your custom styling needs.
Applying theme colors with CSS classes
BindTuning provides specific CSS classes to apply your theme's predefined colors to text and background elements, ensuring visual consistency across your custom content and components.
Text Color Classes
Use these classes to set the text color of an HTML element to one of your theme's predefined color definitions.
Description | CSS Class Name |
Tuning Colors |
|
Tuning Color 1 | bt-color_tuning1--color |
Tuning Color 2 | bt-color_tuning2--color |
Tuning Color 3 | bt-color_tuning3--color |
Tuning Color 4 | bt-color_tuning4--color |
Tuning Color 5 | bt-color_tuning5--color |
Tuning Color 6 | bt-color_tuning6--color |
General Colors |
|
Base Text Color | bt-color_text--color |
Links Color | bt-color_link--color |
Links Color Hover | bt-color_link__hover--color |
Default Button Text Color | bt-color_btn-default--color |
Primary Button Text Color | bt-color_btn-primary--color |
Example Usage (Text Color):
HTML
<p class="bt-color_tuning1--color">
This text uses the theme's Tuning Color 1.
</p>
<span class="bt-color_link--color">
This is a span styled with the theme's link color.
</span>
Background Color Classes
Apply these classes to set the background color of an HTML element to one of your theme's predefined color definitions.
Description | CSS Class Name |
Tuning Colors |
|
Tuning Color 1 Background | bt-color_tuning1--bg |
Tuning Color 2 Background | bt-color_tuning2--bg |
Tuning Color 3 Background | bt-color_tuning3--bg |
Tuning Color 4 Background | bt-color_tuning4--bg |
Tuning Color 5 Background | bt-color_tuning5--bg |
Tuning Color 6 Background | bt-color_tuning6--bg |
General Colors |
|
Base Text Background | bt-color_text--bg |
Links Background | bt-color_link--bg |
Links Background Hover | bt-color_link__hover--bg |
Default Button Background | bt-color_btn-default--bg |
Primary Button Background | bt-color_btn-primary--bg |
Body Background Color | bt-color_body--bg |
Example Usage (Background Color):
HTML
<div class="bt-color_tuning3--bg" style="padding: 15px; border-radius: 5px;">
This box has the theme's Tuning Color 3 as its background.
</div>
<button class="bt-color_btn-primary--bg bt-color_btn-primary--color">
Styled Primary Button
</button>
Controlling typography with CSS classes
BindTuning also provides classes to apply the font family and base font size defined in your theme's typography settings, ensuring text elements align with your design.
Description | CSS Class Name |
Base Text Font Family | bt-text_font-family |
Base Text Font Size | bt-text_font-size |
Headings Font Family | bt-headings_font-family |
Example Usage (Typography):
HTML
<p class="bt-text_font-family bt-text_font-size">
This paragraph uses the theme's base text font family and size.
</p>
<h2 class="bt-headings_font-family">
This heading uses the theme's designated heading font.
</h2>
Advanced: accessing theme colors programmatically
For developers and advanced customization scenarios, BindTuning themes expose their active color definitions directly within the browser's window object. This is available under the btColors namespace and allows you to dynamically access the active theme's colors, including their class names, aliases, and hexadecimal values, using JavaScript.
You can inspect this object in your browser's developer console (e.g., by typing console.log(window.btColors);). It provides programmatic access to values such as:
window.btColors.Tuning1.hexwindow.btColors.Link.aliaswindow.btColors.Text.className
This feature is particularly useful when developing custom web parts, extensions, or scripts that need to adapt dynamically to the active BindTuning theme's color palette without hardcoding values.