CSS Styles

The following is a list of useful inline css classes for cmoa.org and storyboard.cmoa.org that can be useful when adjusting the typography and appearance of text.

This list is a work in progress. Our goal is to integrate these classes into the WordPress editor for easier access.

Headings

.level-1 = 2.75em, bold, dark text .level-2 = 2em, bold, dark text .level-3 = 1.5em, bold, dark text .level-4 = 1em, bold, dark text .level-5 = 16 pixels, bold .level-6 = 14 pixels, dark text

Headers

.header-main = 16 pixels, dark text, long width underline

Buttons

.btn = red background, white text .btn-alt = black border, dark text .btn-alt.dark = dark border, dark text .btn-alt.red = red border, red text .btn-link = no border, underlined, light grey text .btn-continue = arrow in circle to the right of text, bold, black text .btn-arrow = bold, black text

Links

.skip-link = 16 pixels, red text, underlined .nav-callout = 16 pixels, black text, underline, on hover text white and background red .entry__link = 16 pixels, red text, underline, on hover a darker red .social-links = formats social media icon links

Spacers

hr.spacer-small = 20 pixels hr.spacer-medium = 40 pixels hr.spacer-large = 80 pixels .page-content = 17pixels, spacing between sections in page content on cmoa.org

.spacer-top-small = 20 pixels .spacer-top-medium = 40 pixels .spacer-top-large = 80 pixels

Text

.accent-text = 16 pixels, black text .category-tag = 14 pixels, black text, grey background .center = 16 pixels, black text .hashtag = 16 pixels, bold text .open-times = 16 pixels, red text, non-highlightable .tabs = .9 em, black text, grey background .times = 16 pixels, black text, non-highlightable .inline = 16 pixels, black text

Lists

.blank-list = 16 pixels, no bullet points, black text .inline-list = 16 pixels, no bullet points, black text, inline .calendar-nav = 16 pixels, bullet points, black text

Blockquotes

.blockquote-attr = formats blockquote so an underscore _ appears above the text within the blockquote

Sections

.highlight-text = makes background an off yellow sharpie color .section-gold = makes entire background of section gold colored .section-teal = makes entire background of section teal colored .section-cadet = makes entire background of section cadet colored .section-red = makes entire background of section red colored .divided-columns = block, content is placed between two separating bars || .omnilert-content = makes entire background of section cmoa red colored