National Electrical Installation Standards

Standards as High as Your Own

 

Style Guide

The below are styling rules that are applied when you use the standard formatting options in a rich-text editor (the default content entry method used on pages, blog posts, news items, and more). Simply select using one of the buttons or drop-downs available to you.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Unordered List

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Ordered List

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

 

Table

item item item item
Item Item Item Item
Item Item Item Item
Item Item Item Item
Item Item Item Item

 

Colors

The hexadecimal codes (#e41963, #756767, etc.) are mainly informational. If you need a printer or another designer to adhere to the NECA-NEIS styles, this is the information you should provide them.
  • Red: #e41936
  • Yellow: #fff356
  • Gray: #756767
  • Dark yellow: #ebbd0f

If you are required to make a certain span of text a different color (NOT​ recommended, overall), select the text you wish to change and follow these steps:

  1. In the rich-text editor of a content block, page, news item or similar, click the button in the top right that reads "More formatting options"
  2. Find the button with a capital 'A'
  3. Click the down-pointing arrow beside it
  4. Click the link that reads "Add Custom Color"
  5. Enter the hexidecimal code of the brand colors seen at the left ONLY
  6. Click "OK"
  7. Click "Save"
  8. At the top of the window, click "Preview" and review the results.
  9. If they're acceptable, click "Publish"

 

Buttons

Regular Button: Button

This effect is easy. When you select the text and click the link button, enter the URL as you normally would. Then take the next steps:

  1. Click "More Options"
  2. Type button
  3. Click "Insert the link"

The code looks like this, if you need to look at the markup for any reason:

<p>Regular Button: <a href="#" class="button">Button</a></p>

CQD Button: Button

The easiest way to achieve this effect is to copy and paste a snippet of code into the HTML view of the rich-text editor. Please follow these steps:

  1. Place or open a new content block (or create/edit a news item, blog post, or similar)
  2. Below the main body area (where you type or paste your content), there are two tabs: Design and HTML
  3. Click HTML
  4. Paste this code into the main body area:

    <p class="cqd-wrap">CQD Button: <a href="#" class="button">Button</a></p>

  5. Click "Save"
  6. At the top of the page, click "Preview" and check to make sure the change was successful.
  7. If successful, click "Publish"

Once you have the style in place, you can replace the word "Button" but be sure that you replace the word, not the class.

Examples:

CQD Button with new text: Learn More

CQD Button with new text: Subscribe

CQD Button with new text: Try This