Skip directly to search Skip directly to A to Z list Skip directly to navigation Skip directly to page options Skip directly to site content

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

TOP