Please ensure Javascript is enabled for purposes of website accessibility
Powered by Zoomin Software. For more details please contactZoomin

AVEVA™ Work Tasks

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;

}

Related Links
TitleResults for “How to create a CRG?”Also Available in