Card
- Last UpdatedMar 12, 2021
- 1 minute read
You can use custom style sheets to change style for HTML elements of controls using CSS classes.
For detailed steps on creating a custom style, see Custom Styles.
Modify the style for the HTML elements of Card using SVG elements and CSS classes.
|
HTML Element |
CSS Class |
|---|---|
|
CardContainer |
.skcardwrapper |
|
CardControl |
.skcard.skcardflt |
|
CardHeader |
.skcardheader |
|
CardContent |
.skcardcontent |
|
CardValue1Container |
#skcardval1block |
|
CardValue1 |
#skcardvl1 |
|
CardValue2 |
#skcardvl2 |
|
Cardv345Wrapper |
#skcardvl345Wrap |
|
CardValue3 |
#skcardvl3 |
|
CardValue4 |
#skcardvl4 |
|
CardValue5 |
#skcardvl5 |
|
CardImage |
.skcardImg |
|
CardFooter |
.skcardfooter |
|
CardButtonDefault |
.skcardbtndef |
|
CardButtonBlack |
.skcardbtnblk |
|
CardActionButton1 |
#skcardactbtn1 |
|
CardActionButton2 |
#skcardactbtn2 |
|
CardActionButton3 |
#skcardactbtn3 |
Prefix the Custom Style Identifier of a control with the CSS Class name to apply the style to the specific control. For example:
/* mdmcardcn is the Custom Style Identifier of the Card control. */
.mdmcardcn_skctr
Note: If you plan to use your own CSS file, the Custom Style Identifier that you define in the file must match the value that you specify in the Custom Style Sheet Identifier property in the Appearance tab of the control's properties page. For example: mdmcardcn
Examples
/* Change card header font size. */
.mdmcardcn_skctr .skcardheader h1
{
font-size: 14px!important;
}
/* Change card value font properties and color. */
.mdmcardcn_skctr #skcardvl3 p #skcardvl4 p #skcardvl5 p
{
font-size: 8px!important;
color: red!important;
font-family: 'robotobold' !important;
}