{"id":2095,"date":"2016-11-21T18:17:59","date_gmt":"2016-11-21T18:17:59","guid":{"rendered":"https:\/\/insulation.org\/?page_id=2095"},"modified":"2017-04-26T19:05:14","modified_gmt":"2017-04-26T19:05:14","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/insulation.org\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<div id=\"pl-2095\"  class=\"panel-layout\" ><div id=\"pg-2095-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-0-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h4>Instructions for NIA<\/h4>\n<ul>\n<li>Adding a rule to images<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\">* Rule class for images<br \/> 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.<\/p>\n<ul>\n<li>The size that the image in the main NIA homepage branding area with the slideshow is <em>is 850x376<\/em>.<\/li>\n<li>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.\u00a0<\/li>\n<li>Our content will need to be in superscript or subscript occasionally. (I.E. 62nd Annual Convention or NOx) How do we accomplish this? \n<ul>\n<li><span class=\"st\">&lt;sup&gt;text&lt;\/sup&gt; for example (62&lt;sup&gt;nd&lt;\/sub&gt; Annual Convention)<br \/> <\/span><\/li>\n<li><span class=\"st\">&lt;sub&gt;text&lt;\/sub&gt; Or (NO&lt;sub&gt;x&lt;\/sub&gt;)<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>\u00a0<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pg-2095-1\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-1-0\"  class=\"panel-grid-cell panel-grid-cell-mobile-last\" ><div id=\"panel-2095-1-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h1><span style=\"text-decoration: underline;color: #993366\">Overall<\/span><\/h1>\n<h4>Updating logo site wide<\/h4>\n<p>Navigate to Appearence &gt; Customize &gt; Logo &gt; [Change the Logo]<\/p>\n<h4>Updating favicon site wide<\/h4>\n<p>Navigate to Appearence &gt; Customize &gt; Favicon&gt; [Change the Favicon]<\/p>\n<h4>Different Header Styles - these are the colors, styles, and sizes the default for NIA and IO templates.<\/h4>\n<h1>Header 1(&lt;h1&gt;) - NIA staff should not use this one.<\/h1>\n<h2>Header 2(&lt;h2&gt;) - most pages will start with this as the top level when creating content.<\/h2>\n<h3>Header 3(&lt;h3&gt;) <\/h3>\n<h4>Header 4(&lt;h4&gt;) this is the NIA green used throughout the site<\/h4>\n<h5>Header 5(&lt;h5&gt;) this is #876199<\/h5>\n<h6>Header 6(&lt;h6&gt;) this is #6698C1.<\/h6>\n<p>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.<\/p>\n<h4>Making menu item active(light blue).<\/h4>\n<ol>\n<li>At the top of the Appearance -&gt; Menu screen, you should see a tab reading \"Screen Options\". Open it and check \"CSS classes\" under \"Show advanced menu properties\".<\/li>\n<li>Add class \"active\" to make menu item light blue( By default they are dark blue).<\/li>\n<li>Add class \"nobar\" to remove small bar next to menu item.<\/li>\n<\/ol>\n<h4>Showing selected item for mobile from top menu<\/h4>\n<ol>\n<li>Add class \"mobile\" on the menu item you want to display on mobile.<\/li>\n<\/ol>\n<h4>Adding superscript\/subscript<\/h4>\n<p>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.<\/p>\n<p>So for superscript, you'd put a \"&lt;sup&gt;\" tag before it, and a \"&lt;\/sup&gt;\" tag after it (without the quotes), and for subscript you'd do the same, except replace those with \"&lt;sub&gt;\" and \"&lt;\/sub&gt;\".<\/p>\n<h4>Adding horizontal lines<\/h4>\n<p>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.<\/p>\n<h1><span style=\"text-decoration: underline;color: #993366\">Insulation org Site<\/span><\/h1>\n<\/div>\n<\/div><\/div><\/div><div id=\"pgc-2095-1-1\"  class=\"panel-grid-cell panel-grid-cell-empty\" ><\/div><\/div><div id=\"pg-2095-2\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-2-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-2-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h4>\"I want to find\" box<\/h4>\n<ol>\n<li>Add a SiteOrigin Row\u00a0with 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).<\/li>\n<li>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.<\/li>\n<li>Click Attributes on the right hand pane and add \"findbox\" to the Widget Class.<\/li>\n<li>Add an h3 element that will be the title of the findbox.<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/div>\n<\/div><\/div><\/div><div id=\"pgc-2095-2-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-2-1-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"3\" ><div class=\"findbox panel-widget-style panel-widget-style-for-2095-2-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h3>This is a findbox (the title should be an h3)<\/h3>\n<ul>\n<li><a href=\"#\">Each item should be a linked unordered list item<\/a><\/li>\n<li><a href=\"#\">The arrows will be added automatically<\/a><\/li>\n<li><a href=\"#\">This is a third item<\/a><\/li>\n<li><a href=\"#\">You can add as many items as necessary, but it will increase the height<\/a><\/li>\n<li><a href=\"#\">Like so<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><div id=\"pg-2095-3\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-3-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-3-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"4\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h4>Colored Boxes<\/h4>\n<ol>\n<li>Create a SiteOrigin row with five columns of equal width.<\/li>\n<li>Create one SiteOrigin editor and add it to one of the boxes.<\/li>\n<li>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.<\/li>\n<li>On the SiteOrigin editor widget, click \"duplicate\" until you have five of them, then put one in each column of your new row.<\/li>\n<li>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).<\/li>\n<li>You can customize the colors in two ways:\n<ul>\n<li>by changing the \"blue\" in widget classes to either \"green\" or \"purple\", which will make the background green or purple.<\/li>\n<li>by clicking on \"Design\" in the right pane, and selecting background and\/or link colors, which will override the default.<\/li>\n<\/ul>\n<\/li>\n<li>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!<\/li>\n<li>You can have less than five elements, but the boxes are fixed width so it will look a little odd.<\/li>\n<\/ol>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pg-2095-4\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-4-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-4-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"5\" ><div class=\"linkbox blue panel-widget-style panel-widget-style-for-2095-4-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><a href=\"_wp_link_placeholder\">This is a blue box<\/a><\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-2095-4-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-4-1-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"6\" ><div class=\"linkbox green panel-widget-style panel-widget-style-for-2095-4-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><a href=\"#\">This is a green box<\/a><\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-2095-4-2\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-4-2-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"7\" ><div class=\"linkbox purple panel-widget-style panel-widget-style-for-2095-4-2-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><a href=\"#\">This is a purple box<\/a><\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-2095-4-3\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-4-3-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"8\" ><div class=\"linkbox green panel-widget-style panel-widget-style-for-2095-4-3-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><a href=\"#\">This is a special orange box<\/a><\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-2095-4-4\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-4-4-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"9\" ><div class=\"linkbox blue panel-widget-style panel-widget-style-for-2095-4-4-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><a href=\"#\">This is a special black text box<\/a><\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><div id=\"pg-2095-5\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-5-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-5-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"10\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h4>NIA Colors and their Hexcodes <\/h4>\n<ul>\n<li><span style=\"color: #0066cc;\">The blue in the NIA logo is #0066cc.<\/span><\/li>\n<li><span style=\"color: #6698c1;\">The light blue used in the colored boxes is #6698C1.<\/span><\/li>\n<li><span style=\"color: #009639;\">The green in the NIA logo is #009639\u00a0<\/span><\/li>\n<li><span style=\"color: #4e9669;\">The light green used on the website is #4E9669.<\/span><\/li>\n<li><span style=\"color: #621f67;\">The purple color is #621F67<\/span><\/li>\n<li><span style=\"color: #876199;\">The lighter purple color is #876199<\/span><\/li>\n<li><span style=\"color: #a71930;\">The red color is\u00a0#A71930<\/span><\/li>\n<li><span style=\"color: #feb545;\">The yellow\/orange color is #FEB545<\/span><\/li>\n<li><span style=\"color: #333333;\">The dark gray color is #333333<\/span><\/li>\n<li><span style=\"color: #ebebeb;\"><strong>The lighter gray color is<\/strong> <span style=\"color: #000000;\">#EBEBEB<\/span><\/span><\/li>\n<li>The background for the site is true white\u00a0 #ffffff<\/li>\n<li>The black used is true black -\u00a0#000000<\/li>\n<li><span style=\"background-color: #eff6fa;\">The blue\/gray background color for text boxes is: #eff6fa<\/span><\/li>\n<li>The Fall Summit colors are<br \/> <span style=\"color: #ce3431;\">Red: ce3431<\/span> and <span style=\"color: #511a6c;\">Purple:<\/span> <span style=\"color: #511a6c;\">511a6c<\/span><\/li>\n<li>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.<\/li>\n<\/ul>\n<p>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.\u00a0 <strong>You should choose a color from the list above and not introduce a new color to the website.\u00a0<\/strong> <\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pg-2095-6\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-6-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-6-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"11\" ><div class=\"img-block panel-widget-style panel-widget-style-for-2095-6-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1694 size-full\" src=\"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/OnDemandVideos_TechsandSpecs.jpg\" width=\"280\" height=\"200\" srcset=\"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/OnDemandVideos_TechsandSpecs.jpg 280w, https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/OnDemandVideos_TechsandSpecs-150x107.jpg 150w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><br \/> <label><a href=\"#\">Copy\/Pasted Text<\/a><\/label><\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-2095-6-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-6-1-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"12\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h4>Creating a text-aligned image block<\/h4>\n<ol>\n<li>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.<\/li>\n<li>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.<\/li>\n<li>On the right pane, click on \"Attributes\" and add \"img-block\" to the \"Classes\" section.\n<\/li>\n<li>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.)<\/li>\n<li>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.<\/li>\n<li><strong>If you add things other than in this specific fashion outlined in #4 and #5, it may break the format of the box.<\/strong><\/li>\n<\/ol>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pg-2095-7\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-2095-7-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2095-7-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child\" data-index=\"13\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<h4>Image overlay Box<\/h4>\n<ol>\n<li>Add widget class \"img-block\".<\/li>\n<li>Use this format to create image block with text overlay.<\/li>\n<\/ol>\n<pre>&lt;img \u00a0src=\"[url to image]\" \/&gt;\n&lt;a href=\"[overlay text link]\"&gt;\n&lt;label&gt;[Overlay text]&lt;\/label&gt;\n&lt;\/a&gt;<\/pre>\n<p>3. Image box without page builder<\/p>\n<pre>&lt;div class=\"img-block\"&gt;\n\n&lt;img src=\"[url to image]\" \/&gt;\n&lt;a href=\"[overlay text link]\"&gt;\n&lt;label&gt;[Overlay text]&lt;\/label&gt;\n&lt;\/a&gt;\n\n&lt;\/div&gt;<\/pre>\n<h4>\u00a0<\/h4>\n<h1><span style=\"text-decoration: underline; color: #993366;\">Meeting Event Templates<\/span><\/h1>\n<h4>Website Templates<\/h4>\n<p id=\"add-existing-user\">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. <strong>NOTE:<\/strong> 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. <\/p>\n<h4>Meeting clock<\/h4>\n<ol>\n<li>Add following block , In this text between &lt;h3&gt; tag is heading text.<\/li>\n<\/ol>\n<pre>&lt;div class=\"clock\"&gt;\n&lt;h3&gt;Convention Countdown&lt;\/h3&gt;\n&lt;\/div&gt;<\/pre>\n<p>Big Camera Icon with link<\/p>\n<ol>\n<li>Add following block and replace the link. Class \"\"<\/li>\n<\/ol>\n<pre>&lt;a class=\"gallery-link\" href=\"https:\/\/www.facebook.com\/pg\/NIAinfo\/photos\/?ref=page_internal\"&gt;View Photos from Last Year\u2019s\nConvention&lt;\/a&gt;<\/pre>\n<h4>Keydates<\/h4>\n<ol>\n<li>Add following block when keydates block needed. Increase the &lt;li&gt; as many you want.<\/li>\n<\/ol>\n<pre>&lt;div class=\"keydates\"&gt;\n &lt;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\" \/&gt;\n &lt;h3&gt;Key Dates&lt;\/h3&gt;\n &lt;ul&gt;\n &lt;li&gt;\n &lt;div&gt;&lt;label&gt;Feb&lt;\/label&gt;\n &lt;label&gt;3&lt;\/label&gt;&lt;\/div&gt;\n &lt;div&gt;&lt;label&gt;February 3, 2017&lt;\/label&gt;\n &lt;label&gt;Golf Shirt Order Deadline&lt;\/label&gt;&lt;\/div&gt;&lt;\/li&gt;\n &lt;li&gt;\n &lt;div&gt;&lt;label&gt;Mar&lt;\/label&gt;\n &lt;label&gt;3&lt;\/label&gt;&lt;\/div&gt;\n &lt;div&gt;&lt;label&gt;March 3, 2017&lt;\/label&gt;\n &lt;label&gt;Hotel Reservation Deadline&lt;\/label&gt;&lt;\/div&gt;&lt;\/li&gt;\n &lt;\/ul&gt;\n &lt;\/div&gt;<\/pre>\n<h4>Creating grey-blue background<\/h4>\n<ol>\n<li>Add class \"inner-grey\" in row class or in widget class section.<\/li>\n<\/ol>\n<\/div>\n<\/div><\/div><div id=\"panel-2095-7-0-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"14\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t><h3 class=\"widget-title\">Insulation Outlook <\/h3>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p>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.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Instructions for NIAAdding a rule to images* Rule class for images You can add an &#8220;image-ruled&#8221; class to an image to add a border around it. If you additionally add an &#8220;image-padded&#8221; class to it as well, it&#8217;ll add a little bit of padding inside of the border.The size that the image in the main<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.0 (Yoast SEO v22.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Style Guide - NIA<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/insulation.org\/style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Style Guide\" \/>\n<meta property=\"og:description\" content=\"Instructions for NIAAdding a rule to images* Rule class for images You can add an &quot;image-ruled&quot; class to an image to add a border around it. If you additionally add an &quot;image-padded&quot; class to it as well, it&#039;ll add a little bit of padding inside of the border.The size that the image in the main\" \/>\n<meta property=\"og:url\" content=\"https:\/\/insulation.org\/style-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"NIA\" \/>\n<meta property=\"article:modified_time\" content=\"2017-04-26T19:05:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/OnDemandVideos_TechsandSpecs.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@NIAInfo\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/insulation.org\/style-guide\/\",\"url\":\"https:\/\/insulation.org\/style-guide\/\",\"name\":\"Style Guide - NIA\",\"isPartOf\":{\"@id\":\"https:\/\/insulation.org\/#website\"},\"datePublished\":\"2016-11-21T18:17:59+00:00\",\"dateModified\":\"2017-04-26T19:05:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/insulation.org\/style-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/insulation.org\/style-guide\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/insulation.org\/style-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/insulation.org\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Style Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/insulation.org\/#website\",\"url\":\"https:\/\/insulation.org\/\",\"name\":\"NIA\",\"description\":\"The voice of the insulation industry\",\"publisher\":{\"@id\":\"https:\/\/insulation.org\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/insulation.org\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/insulation.org\/#organization\",\"name\":\"National Insulation Association\",\"url\":\"https:\/\/insulation.org\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/insulation.org\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/logo.png\",\"contentUrl\":\"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/logo.png\",\"width\":368,\"height\":92,\"caption\":\"National Insulation Association\"},\"image\":{\"@id\":\"https:\/\/insulation.org\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/twitter.com\/NIAInfo\",\"https:\/\/www.youtube.com\/channel\/UC9S8DOfnrI0YSDvhlkUXtZg\",\"https:\/\/www.linkedin.com\/company\/70970715\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Style Guide - NIA","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/insulation.org\/style-guide\/","og_locale":"en_US","og_type":"article","og_title":"Style Guide","og_description":"Instructions for NIAAdding 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","og_url":"https:\/\/insulation.org\/style-guide\/","og_site_name":"NIA","article_modified_time":"2017-04-26T19:05:14+00:00","og_image":[{"url":"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/OnDemandVideos_TechsandSpecs.jpg"}],"twitter_card":"summary_large_image","twitter_site":"@NIAInfo","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/insulation.org\/style-guide\/","url":"https:\/\/insulation.org\/style-guide\/","name":"Style Guide - NIA","isPartOf":{"@id":"https:\/\/insulation.org\/#website"},"datePublished":"2016-11-21T18:17:59+00:00","dateModified":"2017-04-26T19:05:14+00:00","breadcrumb":{"@id":"https:\/\/insulation.org\/style-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/insulation.org\/style-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/insulation.org\/style-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/insulation.org\/"},{"@type":"ListItem","position":2,"name":"Style Guide"}]},{"@type":"WebSite","@id":"https:\/\/insulation.org\/#website","url":"https:\/\/insulation.org\/","name":"NIA","description":"The voice of the insulation industry","publisher":{"@id":"https:\/\/insulation.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/insulation.org\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/insulation.org\/#organization","name":"National Insulation Association","url":"https:\/\/insulation.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/insulation.org\/#\/schema\/logo\/image\/","url":"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/logo.png","contentUrl":"https:\/\/insulation.org\/wp-content\/uploads\/2016\/09\/logo.png","width":368,"height":92,"caption":"National Insulation Association"},"image":{"@id":"https:\/\/insulation.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/twitter.com\/NIAInfo","https:\/\/www.youtube.com\/channel\/UC9S8DOfnrI0YSDvhlkUXtZg","https:\/\/www.linkedin.com\/company\/70970715"]}]}},"_links":{"self":[{"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/pages\/2095"}],"collection":[{"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/comments?post=2095"}],"version-history":[{"count":28,"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/pages\/2095\/revisions"}],"predecessor-version":[{"id":2348,"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/pages\/2095\/revisions\/2348"}],"wp:attachment":[{"href":"https:\/\/insulation.org\/wp-json\/wp\/v2\/media?parent=2095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}