NIA / Style Guide

Style Guide

Missing Items or explainations

  • For Joseph – Questions or action items for Insulation Outlook’s template

  • Can you change the size of the image on the Current issue page? It is huge and touches the items in the right column.  Also the article headlines do not stand out in the navy text. Can you make the current article titles green on the IO homepage and the current issue page?
  • New last week, the author database is not in alpha order.
  • New this week, I tried to move photos in older articles and take out bad line breaks and the spacing went crazy for both the photos and text. I added the December 2016 issue on Friday and didn’t have these problems so I’m not sure what happened. Can we discuss or can you try move photos in one of these articles?Caitlyn said she had the same problem a few weeks ago in the second article.
    • https://insulation.org/io/articles/case-study-creating-a-program-for-cui-prevention-at-a-refinery/ or
    • https://insulation.org/io/articles/corrosion-under-insulation-differences-in-gel-coating-technology/

Outstanding items

  • How do we add a rule to images or around an item?

Joseph: There’s not really a clean way to do this because adding borders requires using CSS, and adding it globally can cause issues. If you have specific items that need rules (or a specific style of rule you’d like to put around certain types of items) we can discuss adding that to the CSS.

Julie: Do you mean as a class? Yes, please add this class element so when we come across an image that needs a rule or box around it, we can add it. Please add instructions on how to add the class below on this page.

* 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. (I’ll add this to the style guide soon.)

  • Can you give us the image size for the various image areas on the website? We especially need the size that the image should be in the main NIA homepage branding area with the slideshow.

The image size needed for the branding area is 850×376. There are several image sizes covered in the new sections below, are there specific others for which you need an image size?

Great! Can you tell us the image size for the large top image on the events template too?

Instructions for NIA

  • How do we create or add tables? How do we fix sizing issues? The staff listing is very long but the tables above that are normal on this page https://insulation.org/about-nia/leadership-staff/. Please let us know how to correct this type of issue for the future. Is there a way to control the size of tables?
  • A: In the text box, you can add html codes to limit the height and width table size. The staff listing is fixed and you can view the code there as an example.
  • Our content will need to be in superscript or subscript occasionally. (I.E. 62nd Annual Convention or NOx) How do we accomplish this? Do we just use html?
    • <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.

This is a findbox (the title should be an h3)

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.

This is a blue box

This is a green box

This is a purple box

This is a special orange box

This is a special black text box

NIA Colors and their Hexcodes – Joseph, please add the missing colors codes. There were colors used from the moodboard and by Matrix to design the site and we want to know the exact hex code so we can use the same colors in the future.

  • 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 white background is ?? It is a off white/cream, not a true stark white, right?  The designer re-reviewed the approved moodboard and they do not see a cream color on it.  The background for the site is true white – #ffffff
  • What is the hexcode for the black color? Is it the true black? It is true black – #000000
  • The blue/gray background color for text boxes is: #eff6fa
  • The Fall Summit colors are
    Red: ce3431 and Purple: 511a6c
  • What color is the Key Dates box? How do we change that from event to event?


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 280×200 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 Template

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.

Creating a table

  1. Add table using TablePress and inserting code into page.
<[table “6” not found /]

>

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.

 

Body Text
height: 100%;
font-family: Roboto-Regular;
font-size: 16px;
overflow-x: hidden;
margin: 0;

FONT COLORS ON THE HOMEPAGE
–wp–preset–color–black: #000000
–wp–preset–color–cyan-bluish-gray: #abb8c3
–wp–preset–color–white: #ffffff
–wp–preset–color–pale-pink: #f78da7
–wp–preset–color–vivid-red: #cf2e2e
–wp–preset–color–luminous-vivid-orange: #ff6900
–wp–preset–color–luminous-vivid-amber: #fcb900
–wp–preset–color–light-green-cyan: #7bdcb5
–wp–preset–color–vivid-green-cyan: #00d084
–wp–preset–color–pale-cyan-blue: #8ed1fc
–wp–preset–color–vivid-cyan-blue: #0693e3
–wp–preset–color–vivid-purple: #9b51e0

–wp–preset–gradient–vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
–wp–preset–gradient–light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
–wp–preset–gradient–luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
–wp–preset–gradient–luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
–wp–preset–gradient–very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
–wp–preset–gradient–cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
–wp–preset–gradient–blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
–wp–preset–gradient–blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
–wp–preset–gradient–luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
–wp–preset–gradient–pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
–wp–preset–gradient–electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
–wp–preset–gradient–midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);

–wp–preset–font-size–small: 13px;
–wp–preset–font-size–medium: 20px;
–wp–preset–font-size–large: 36px;
–wp–preset–font-size–x-large: 42px;
–wp–preset–spacing–20: 0.44rem;
–wp–preset–spacing–30: 0.67rem;
–wp–preset–spacing–40: 1rem;
–wp–preset–spacing–50: 1.5rem;
–wp–preset–spacing–60: 2.25rem;
–wp–preset–spacing–70: 3.38rem;
–wp–preset–spacing–80: 5.06rem;

–wp–preset–shadow–natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
–wp–preset–shadow–deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
–wp–preset–shadow–sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
–wp–preset–shadow–outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
–wp–preset–shadow–crisp: 6px 6px 0px rgba(0, 0, 0, 1);