CSS Classes for Constituent Tiles
This material pertains to version 4.0 of Blackbaud CRM SDK.
When you edit the UI Model's HTML file to modify the appearance of a custom tile, you can use the same CSS classes that are available for the out-of-the-box tiles in the constituent summary.
| CSS Class | Description |
|---|---|
| TILEADDACTION | This class defines the image (without text) for an add action in the tile header, including the behavior for hover and down button events. Use in a tags. |
| TILEADDACTIONCONTAINER | This class wraps an add action in the tile header to add spacing between the action and the header. Use in div tags. |
| TILEEDITACTION | This class defines the image (without text ) for an edit action in the tile header, including the behavior for hover and down button events. Use in a tags. |
| TILEGOODIMAGEONLY | This class displays a green check mark image (without text). Use in span tags. |
| TILEHEADERLINKCONTAINER | This class positions a tile header link relative to the background gradient image. Use in div tags. |
| TILENEWIMAGEANDTEXT | This class defines the image and display settings for an add action in the tile body. Use in a tags. |
| TILEPADLOCKIMAGEANDTEXT | This class defines the image and display settings for a padlock icon. Use in span tags. |
| TILEPAGINGARROWCONTAINER | This class provides padding around the arrow buttons in repeater tiles. Use in div tags. |
| TILEPAGINGLEFTARROW | This class defines the image for a left-facing arrow in repeater tiles, including the behavior for hover and down button events. Use in a tags. |
| TILEPAGINGRIGHTARROW | This class defines the image for a right-facing arrow in repeater tiles, including the behavior for hover and down button events. Use in a tags. |
| TILERECORDCOUNTTEXTCONTAINER | This element provides padding around the record count in repeater tiles. Use in div tags. |
| TILEWARNINGNOCOLORIMAGEANDTEXT | This class defines the image and display settings for a warning image. Use in span tags or a tags. |
| CSS Class | Description |
|---|---|
| bbui-forms-summarytile | The master tile panel adds this CSS class to the divs that contain each individual tile. Do not add this class to your HTML. |
| bbui-forms-summarytile-addaction | This class defines the image (without text) for an add action in the tile header, including the behavior for hover and down button events. Use in a tags. |
| bbui-forms-summarytile-addactioncontainer | This class wraps an add action in the tile header to add spacing between the action and the header. Use in div tags. |
| bbui-forms-summarytile-caption | This class is applied to the div element for field captions when the caption is placed above the value. |
| bbui-forms-summarytile-editaction | This class defines the image (without text ) for an edit action in the tile header, including the behavior for hover and down button events. Use in a tags. |
| bbui-forms-summarytile-headerlinkcontainer | This class positions a tile header link relative to the background gradient image. Use in div tags. |
| bbui-forms-summarytile-nowrap | This class provides a consistent way to prevent the text in field values from wrapping or extending past the edge of the tile. |
| bbui-forms-summarytile-pagingarrowcontainer | This class provides padding around the arrow buttons in repeater tiles. Use in div tags. |
| bbui-forms-summarytile-pagingleftarrow | This class defines the image for a left-facing arrow in repeater tiles, including the behavior for hover and down button events. Use in a tags. |
| bbui-forms-summarytile-pagingrightarrow | This class defines the image for a right-facing arrow in repeater tiles, including the behavior for hover and down button events. Use in a tags. |
| bbui-forms-summarytile-recordcounttextcontainer | This element provides padding around the record count in repeater tiles. Use in div tags. |
| bbui-forms-summarytile-subtleemphasis | This class emphasizes text within a tile. For example, the out-of-the-box Addresses tile uses this style to emphasize address type codes. |
In addition, you can use some tile-specific value styles in the UI Model to display standard images within custom tiles. Value styles are applied to the UI Model VB code rather than the UI Model HTML, and browsers render them based on that VB code. The tile-specific value styles are refined versions of existing styles that are tailored for the smaller space in a tile, and you want to apply them to the VB code in the tile's UI Model just like you would for any other custom view data form.
| CSS Class | VB Name | Description |
|---|---|---|
| bbui-valuestyles-good-imageandtext | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.GoodImageAndText | This class displays a green check mark image and a text label. Use in span tags. |
| bbui-valuestyles-good-imageonly | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.GoodImageOnly | This class displays a green check mark image with no text label. Use in span tags. |
| bbui-valuestyles-new-imageandtext | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.NewImageAndText | This class defines the image and display settings for an add action in the tile body. It displays a green add image and a text label. Use in a tags. |
| bbui-valuestyles-new-imageonly | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.NewImageOnly | This class defines the image and display settings for an add action in the tile body. It displays a green add image with no text label. Use in a tags. |
| bbui-valuestyles-padlock-imageandtext | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.PadlockImageAndText | This class defines the image and display settings for a padlock icon and a text label. Use in span tags. |
| bbui-valuestyles-padlock-imageonly | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.PadlockImageOnly | This class defines the image and display settings for a padlock icon with no text label. Use in span tags. |
| bbui-valuestyle-warning-imageandtext | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.WarningImageAndText | This class defines the image and display settings for a warning image and a text label. Use in span tags or a tags. |
| bbui-valuestyle-warning-imageonly | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.WarningImageOnly | This class defines the image and display settings for a warning image with no text label. Use in span tags or a tags. |
| bbui-valuestyle-warning-nocolor-imageandtext | Blackbaud.AppFx.UIModeling.Core.ValueDisplayStyle.WarningNoColorImageAndText | This class defines the image and display settings for a warning image and text label. Use in span tags or a tags. |