Style Guide

Instructions for NIA

  • Adding a rule to images

* Rule class for images
You can add an "image-ruled" class to an image to add a border around it. If you additionally add an "image-padded" class to it as well, it'll add a little bit of padding inside of the border.

  • The size that the image in the main NIA homepage branding area with the slideshow is is 850x376.
  • Creating tables: There is a new plugin for creating table but you can also control the size of tables by adding html codes to limit the height and width table size. 
  • Our content will need to be in superscript or subscript occasionally. (I.E. 62nd Annual Convention or NOx) How do we accomplish this?
    • <sup>text</sup> for example (62<sup>nd</sub> Annual Convention)
    • <sub>text</sub> Or (NO<sub>x</sub>)

 

Overall

Updating logo site wide

Navigate to Appearence > Customize > Logo > [Change the Logo]

Updating favicon site wide

Navigate to Appearence > Customize > Favicon> [Change the Favicon]

Different Header Styles - these are the colors, styles, and sizes the default for NIA and IO templates.

Header 1(<h1>) - NIA staff should not use this one.

Header 2(<h2>) - most pages will start with this as the top level when creating content.

Header 3(<h3>)

Header 4(<h4>) this is the NIA green used throughout the site

Header 5(<h5>) this is #876199
Header 6(<h6>) this is #6698C1.

Jessica and I discussed the headers/subheaders on our conf call. The current subheaders get smaller than the regular text and therefore are not effective. Black is also not very effective to quickly break the visual look of the page. See above for our requests. We prefer this over the red and blue you selected for the zombie article.

Making menu item active(light blue).

  1. At the top of the Appearance -> Menu screen, you should see a tab reading "Screen Options". Open it and check "CSS classes" under "Show advanced menu properties".
  2. Add class "active" to make menu item light blue( By default they are dark blue).
  3. Add class "nobar" to remove small bar next to menu item.

Showing selected item for mobile from top menu

  1. Add class "mobile" on the menu item you want to display on mobile.

Adding superscript/subscript

There's unfortunately not an editor shortcut for doing this in WordPress, so it has to be done in the "text" view that contains the HTML. You have to find the text you want and add an opening and closing tag before and after the text.

So for superscript, you'd put a "<sup>" tag before it, and a "</sup>" tag after it (without the quotes), and for subscript you'd do the same, except replace those with "<sub>" and "</sub>".

Adding horizontal lines

There's a button for this on the WordPress WYSIWYG editor, directly to the right of the blockquote one and to the left of the alignment options. It looks like a small horizontal line.

Insulation org Site

"I want to find" box

  1. Add a SiteOrigin Row with two columns, with the side containing the box (typically the right) set to 33.3% width (or whatever width you'd like it to be).
  2. Add a SiteOrigin Editor widget to the right and left boxes, you'll be using the right one for the findbox. Click edit on that one.
  3. Click Attributes on the right hand pane and add "findbox" to the Widget Class.
  4. Add an h3 element that will be the title of the findbox.
  5. Add an unordered (bulleted) list element to be each element, and link each of the individual items. You should be able to do this through the visual editor if you're careful to do these in order.

Colored Boxes

  1. Create a SiteOrigin row with five columns of equal width.
  2. Create one SiteOrigin editor and add it to one of the boxes.
  3. Click on Attributes on the right pane and add "linkbox blue" to the Widget Class. This will set the linkbox style and the default color. You can use green or purple in place of blue.
  4. On the SiteOrigin editor widget, click "duplicate" until you have five of them, then put one in each column of your new row.
  5. Now you can go to each widget and add your content. The content should be a plain link without the double arrows (they'll be added automatically).
  6. You can customize the colors in two ways:
    • by changing the "blue" in widget classes to either "green" or "purple", which will make the background green or purple.
    • by clicking on "Design" in the right pane, and selecting background and/or link colors, which will override the default.
  7. The first three boxes below are customized using the first method, and the last two are using the second method. Either will work, but be careful to test before you publish!
  8. You can have less than five elements, but the boxes are fixed width so it will look a little odd.

NIA Colors and their Hexcodes

  • The blue in the NIA logo is #0066cc.
  • The light blue used in the colored boxes is #6698C1.
  • The green in the NIA logo is #009639 
  • The light green used on the website is #4E9669.
  • The purple color is #621F67
  • The lighter purple color is #876199
  • The red color is #A71930
  • The yellow/orange color is #FEB545
  • The dark gray color is #333333
  • The lighter gray color is #EBEBEB
  • The background for the site is true white  #ffffff
  • The black used is true black - #000000
  • The blue/gray background color for text boxes is: #eff6fa
  • The Fall Summit colors are
    Red: ce3431 and Purple: 511a6c
  • Convention colors will change each year. Get them from Ashley. They should only be used on the Convention web pages, not on the regular NIA pages unless it is Convention text.

You can change the text color in the text toolbar by click "text color," then custom, and adding the hexcode. You can change the background color of a box or other element by opening the "DESIGN" area on the far right side of the screen, under "WIDGET STYLE." Select "BACKGROUND COLOR" and enter the hexcode.  You should choose a color from the list above and not introduce a new color to the website. 

Creating a text-aligned image block

  1. Create a SiteOrigin row. Add two SiteOrigin editor widgets, one for the image block and one for the text that should be next to it.
  2. Open the image block next to this example and switch to the "Text" view, and copy all of it there. Paste it into your new image block.
  3. On the right pane, click on "Attributes" and add "img-block" to the "Classes" section.
  4. To change the image, click on it, and click the pencil icon to edit. On the right side of the window, click Replace. It should bring up the Media Library. (Images for the boxes should be around 280x200 or at least a similar aspect ratio.)
  5. To change the text and link target, highlight or click on it, and a little box should appear. Click the pencil icon and then click the gear icon. The new window should have a line for the URL and the link text.
  6. If you add things other than in this specific fashion outlined in #4 and #5, it may break the format of the box.

Image overlay Box

  1. Add widget class "img-block".
  2. Use this format to create image block with text overlay.
<img  src="[url to image]" />
<a href="[overlay text link]">
<label>[Overlay text]</label>
</a>

3. Image box without page builder

<div class="img-block">

<img src="[url to image]" />
<a href="[overlay text link]">
<label>[Overlay text]</label>
</a>

</div>

 

Meeting Event Templates

Website Templates

In 2017, Matrix copied the Convention and Fall Summit websites in their entirety. They made 3 copies of each so that we can update them each year for the new event. This is the only way to copy all of the elements and the structure without having to rebuild it each year. Staff cannot do it. When we have used these, we will need to pay Matrix to reinstall the plugin and copy the current websites a few times again for future years. These copies will appear on the Network Super Admin page, not under MY SITES. In order for staff to have access them a NIA staff member who is a super admin (Julie, Erin, and Leslie) must go to the "NETWORK ADMIN" section and then to "SITES" and find the correct event website template. It will be listed as "ARCHIVED" and must be changed to "UNARCHIVED." They will also need to add users to each event website template, which is not done in the users sections as you would think. Add users to each template under the SITE section by selection the event website template and editing it. Then click on the "USERS" tab and under "Add Existing User" type in their email address and set their" ROLE" to ADMIN, not author, and click ADD USER. Once you have unarchived and added users, the users will be able to see the website under MY SITES. NOTE: The unarchived site is now visible to the public who visit the web address. You will need to manually change all the pages to DRAFT or UNPUBLISH them. You will also still need to follow the normal instructions to add the pages to the navigation when you are ready.

Meeting clock

  1. Add following block , In this text between <h3> tag is heading text.
<div class="clock">
<h3>Convention Countdown</h3>
</div>

Big Camera Icon with link

  1. Add following block and replace the link. Class ""
<a class="gallery-link" href="https://www.facebook.com/pg/NIAinfo/photos/?ref=page_internal">View Photos from Last Year’s
Convention</a>

Keydates

  1. Add following block when keydates block needed. Increase the <li> as many you want.
<div class="keydates">
 <img class="alignnone size-medium wp-image-142" src="http://localhost/matrix/SDLC/wordpress/nia/convention-2017/wp-content/uploads/sites/2/2016/10/Convention-Homepage-Hotel-Main-homepage-photo-300x200.jpg" alt="Convention Homepage- Hotel Main homepage photo" width="300" height="200" />
 <h3>Key Dates</h3>
 <ul>
 <li>
 <div><label>Feb</label>
 <label>3</label></div>
 <div><label>February 3, 2017</label>
 <label>Golf Shirt Order Deadline</label></div></li>
 <li>
 <div><label>Mar</label>
 <label>3</label></div>
 <div><label>March 3, 2017</label>
 <label>Hotel Reservation Deadline</label></div></li>
 </ul>
 </div>

Creating grey-blue background

  1. Add class "inner-grey" in row class or in widget class section.

Insulation Outlook

The text at the top of the homepage and the archives page can be accessed in the Insulation Outlook template, under STYLE, then under POST SNIPPETS. don't change the page names or html there, just the 2 text blocks at the bottom.