Fixing Blog Formatting
- Kayla Ingersoll
This article explains how to fix the most common issues that cause the styling and formatting on the blog to appear incorrectly. There may be other causes not covered here that require additional troubleshooting.
Determining The Cause of The Issue
The most common cause of this issue is that the link to the CSS stylesheet is either missing or incorrect. Typically, if this is happening, the blog will look something like this:
Compared to their normal site, there is a lack of color and font, and items that should be positioned in a horizontal line are often stacked on top of each other. This is because the stylesheet that tells the elements how to look is either not linked in the settings at all, or the link is wrong.
However, there are other things that can go wrong – for example, elements being out of place despite styling being correct, images not loading properly, etc. Examples of those will be shown below.
Pretty much all of these can be fixed by taking a look at the Settings and seeing what may be out of place from the standard format, so let’s get into how to look at those.
Checking the Settings
To verify what part of the formatting is incorrect, we’ll want to check the settings to confirm that the Header code looks the way it should. To do that, we’re going to need to go into the Websites > Blog area. Typically, if you are logged in to the appropriate account in ICC it should open up the blog for that account directly for you, but in the case of dealers with multiple domains with separate blogs, you may need to access it by logging in to the InteractRV account, going to Websites > Blog, and then selecting “Sites” on the left hand side. Use the “Search Sites” dialog on the right hand side to search for the one you need.
Once you’ve accessed the Dashboard for the account in question, you’ll want to go to the Settings for the account. This is where all of the code is stored that is relevant to the blog. Navigate to Settings > InteractRV Settings.
Once you arrive at the InteractRV Settings page, you’ll see a couple of boxes with some code in them. Each of these should have something very specific in them, so depending on the issue we are seeing on the front end of the blog, we’ll want to check a specific box.
Page Layout
This box relates to the positioning of the elements on the page. The standard format should look like this:
<div id="headerPlaceholder"></div>
<div id="navPlaceholder"></div>
<div class="container">
<div id="mainContainer" class="row">
<section id="main" class="col-md-9 col-md-push-3">
<div id="pageContent">[#wp_main]</div>
</section>
<aside id="sideBar" class="col-md-3 col-md-pull-9">
<div class="panel panel-default wp-sidebar">
<div class="panel-heading">
<h3 class="panel-title">Blog</h3>
</div>
<div class="panel-body">[#wp_sidebar]</div>
</div>
</aside>
</div>
</div>
<div id ="socialPlaceholder"></div>
<div id="footerPlaceholder"></div>If you notice that certain elements do not follow this order (for example, the “navPlaceholder” element is above the “headerPlaceholder” element, and you see on the front end that the Header and Nav are switched compared to their normal site … you may conclude that the two need to be switched here. There are certain scenarios where some blogs follow a non-traditional formatting here, but it’s okay if it’s different as long as it’s not malfunctioning.
Another common issue with this section is you might notice the header and footer not stretching all the way across the screen properly.
This is often the result of the header/nav and footer placeholders being places inside a container (which prevents it from touching the sides). An example of an INCORRECT version of the standard styling may look something like this:
<div class="container">
<div id="headerPlaceholder"></div>
<div id="navPlaceholder"></div>
</div>
<div class="container">
<div class="row">
<div id="rvTypesPlaceholder"></div>
</div>
</div>
<div class="container">
<div id="mainContainer" class="row">
<section id="main" class="col-md-9 col-md-push-3">
<div id="pageContent">[#wp_main]</div>
</section>
<div class="panel panel-default wp-sidebar">
<br />
<div class="panel-heading">
<h3 class="panel-title">Blog</h3>
</div>
<div class="panel-body">[#wp_sidebar]</div>
</div>
<div id="sidebarPlaceholder"></div>
</div>
</div>
</div>
<div class="container footer">
<div id="footerPlaceholder"></div>
</div>To resolve, simply replace this HTML with the correct version above.
Head (Styles, Scripts)
This is where everything from the head area of the current site belongs. If this box is empty enough that you don’t have to scroll down to see all of it, it’s almost certain that elements of what should be here are missing.
To resolve this, we’re going to need to navigate back to the actual website to grab the appropriate code. Go to Websites > Content and make your way to the domain node’s Developer tab.
The Page Head HTML box is exactly what we need to start filling out the styling for the blog. (Adding any other scripts they may have in the Head is fine, as it will allow tracking etc to occur on the blog as well.) Copy & paste this whole box to take back over to the blog.
Once you’re back in the InteractRV Settings area, you can paste this into the Head (Styles, Scripts) box.
Now we are almost done with fixing the styling. The final piece is changing out the URLs for the stylesheet. On the regular site, the area that links to this looks like this:
<link rel="stylesheet" type="text/css" href="[#CssFileDefaultUrl]" />
<link rel="stylesheet" type="text/css" href="[#CssFileClientUrl]" />However, as of the writing of this article, the shortcodes [#CssFileDefaultUrl] and [#CssFileClientUrl] do not work properly on the blog, only on the regular site. So we need to swap these out with the appropriate URLs!
The URLs should follow this structure instead:
The various parameters that need to be replaced in the URL are listed below:
DEALER FOLDER NAME - this corresponds to the specific name of the folder that the dealer’s assets are kept in. For example, Carpenter’s Campers folder is “carpenterscampers”. If you’re not sure what the value that goes here is, try right clicking on the logo for the site and opening it in a new tab. The URL will show you the name of that folder.
DEALER ID - this corresponds with the numerical ID for the site. This can be found under Websites > Content, and then navigate to the domain node’s Properties tab. Make sure you copy this number exactly!
Once you’ve swapped out those two parameters with the appropriate folder name and number, you should now have a working link to the CSS files for this dealer. It should look a little something like this:
Once those links are correctly in place, hit “Save” at the bottom of the page to save your changes.
More coming soon!