Extended Classes
Overview
Extended Classes are a grouping of Template Package approved CSS Classes, provided to give CDC centers finer control over the layout of their pages. While not intended for large changes, they offer many options to subtly tweak the interactions of modules to suit a wider ranger of situations.
How to Use
When editing an item in Word Press, check for the ‘Additional CSS Classes’ field. Any item containing this field will accept Extended Classes. To use, simply enter the name of the class you’d like applied and re-save the page. In the case of multiple classes, separate the entries with commas.
Margin
Margin is the distance between the edge of the item and item nearest to it.
*all numbers represent their corresponding pixel move shift
margin-five
margin-left-five
margin-right-five
margin-top-five
margin-bottom-five
margin-ten
margin-left-ten
margin-right-ten
margin-top-ten
margin-bottom-ten
margin-fifteen
margin-left-fifteen
margin-right-fifteen
margin-top-fifteen
margin-bottom-fifteen
margin-twenty
margin-left-twenty
margin-right-twenty
margin-top-twenty
margin-bottom-twenty
Padding
Padding is the distance between the module content and it's interior edges
*all numbers represent their corresponding pixel move shift
padding-five
padding-left-five
padding-right-five
padding-top-five
padding-bottom-five
padding-ten
padding-left-ten
padding-right-ten
padding-top-ten
padding-bottom-ten
padding-fifteen
padding-left-fifteen
padding-right-fifteen
padding-top-fifteen
padding-bottom-fifteen
padding-twenty
padding-left-twenty
padding-right-twenty
padding-top-twenty
padding-bottom-twenty
Fonts
Adjust font sizes and font weight
extraLargeFont – font size 18px
largeFontSize – font size 16px
normalFontSize – font size 14px
smallFontSize – font size 12px
extraSmallFontSize – font size 9px
bold
Coloring
Background and Font Color
Font Color:
white-color
black-color
gray1-color
Background Color:
white-bg-color
black-bg-color
gray1-bg-color
transparent-bg-color
Borders
Add 1px Solid Gray Border
gray1-border – lightest
gray2-border
gray3-border
gray4-border – darkest
Display
Adjust how the browser stacks and layers items touching this module
Display Type:
block
inline
inherit
Hide Item:
hide
none
hidden
Show Item:
visible
Remove ‘Link’ Formatting:
noDecoration
noline
Change ‘Float’:
pull-right
pull-left
- Page last reviewed: September 7, 2017
- Page last updated: September 7, 2017
- Content source: