This page is a style guide for all of the defined styles available in the Success stories template according to the the CSI creative design files for Success stories. Styles for each template on the site are forced as per the requirement with the intent of not allowing users to define any styles outside of those defined in the creative. Each defined template uses its own individual CSS style class which overrides any custom HTML entered in the CMS editor, unless the user enters custom inline styles. Note that since the site styles are not necessarily the same as default Drupal styles, what a user sees in the editor may not match exactly what the user sees on the draft or published page. Because of the high level of design customization, WYSIWYG is mor like WYSI kind of WYG - the Drupal editor shows default styles while the viewed page shows actual custom styles. Best practice is to add content, save draft, preview to see final page, then publish.
 

Formats

1. Normal:Arial:14 pt - This is normal default text used as regular paragraph text. You can use any styles on top of this such as bold, italic, underline, strikethrough, color, size, background, hyperlink, superscript2, subscript2 all selectable from the kitchen sink. All line spacing is consistent at 28 pixels according to creative design.

a. Hyperlinks: hyperlinks retain the style of the anchor text, so whatever the style is, the hyperlink will reatin the font/size/style and make it blue and underlined.

b. Bullets and Numbered Lists - line spacing follows same as paragraph text.

Bullet List

  • Bullets: bullets take on the style of the text. The bullet style (dark grey dot) is not editable as per the requirement to force to the approved designs.
  • Bullets: bullets take on the style of the text. The bullet style is not editable as per the requirement to force to the approved designs.
  • Bullets: bullets take on the style of the text. The bullet style is not editable as per the requirement to force to the approved designs. Add <shift-enter> to add buffer line.
  • You can use any styles on top of this such as bold, italic, underline, strikethrough, color, size, background, hyperlink, superscript2, subscript2 all selectable from the kitchen sink.
     

Number List

  1. Number list: numbered lists take on the style of the text. The bullet style is not editable as per the requirement to force to the approved designs.
  2. Number list: numbered lists take on the style of the text. The bullet style is not editable as per the requirement to force to the approved designs.
  3. Number list: numbered lists take on the style of the text. The bullet style is not editable as per the requirement to force to the approved designs.

4. Normal (DIV): enters a blank div on the page at this location.

5. Formatted: this is for advanced use only, primarily when developers are debugging. Not normally used on a page.
6. Address:Ariel Normal 14pt - This is a special tag used for HTML5 to identify an address data type. Throughout the CSI site this format is forced to Ariel Normal 14 pt. Disregard italic look in CMS.

7. Heading 1 - This is the format for all H1 headings forced to the style of the given template. You can use any styles on top of this such as bold, italic, underline, strikethrough, color, size, background, hyperlink, subscript2, superscript2 all selectable from the kitchen sink. Same with all heading styles.

8. Heading 2 - This is the format for all H2 headings forced to the style of the given template.

9. Heading 3 - This is the format for all H3 headings forced to the style of the given template.

10. Heading 4 - This is the format for all H4 headings forced to the style of the given template.

11. Heading 5 - This is the format for all H5 headings forced to the style of the given template.
12. Heading 6 - This is the format for all H6 headings forced to the style of the given template.

Block Styles - some are out of the box Drupal and some are custom to template

 
"This is a quote in sky color."

This is a center full image

Cneter Image

 

This is a table wrapper - below table styled according to the style in CSS. First set the style, then create the table. Table created with class within div.

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

 

Clear - for multi column content that floats, it clears float property

This is Blue Title

This is Red Title

Inline Styles All Out of the Box Drupal

Marker: Yellow

Marker: Green

Big

Small

Typewriter

Computer Code

Keyboard Phrase

Sample Text

Variable

Deleted Text

Inserted Text

Cited Work

Inline Quotation

Language: RTL

Language: LTR