How did I do that?

[Wayne Luke]

For each of the changes on this site, I will list how I accomplished each customization within this topic. Each post will be a new Tip or Tutorial.

[Wayne Luke]

Enable the use of Font Awesome Glyphs.

1. Turn on Site Builder.
2. On any page, click the Style tab in Site Builder.
3. In the Style editor, click on CSS Editor.
4. Add the following code at the very top.

   	@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);

5. Save your changes.
6. Close the CSS Editor.

If you have your own personal Font Awesome CDN Code for CSS, you can use that instead. Please note that the CSS version of the Font Awesome embed doesn't provide accessibility options.

Font Awesome Icon List

To see the code for a specific icon, click on it in the list above.

[Wayne Luke]

Use Font Awesome Glyphs in your Navigation Tabs

This effect can be seen at the top of this page.

1. To enable this you need to head into the AdminCP.
2. Go to Languages & Phrases.
3. Go to Search in Phrases.
4. Type in the text of the tab you want to change in the "Search For..." box.
5. Select "Navbar Links" in the Phrase Type selection box.
6. On the results page, click on Edit to the right of your phrase.
7. At the bottom, you're going to translate your phrase. If the basic text isn't in the translation box, pressing "Copy Default Text" button will add it.
8. Add your image code before the text. For example:

   <i class="fa fa-home" aria-hidden="true"></i> Home

9. Save the phrase.
10. Repeat for each tab.
11. Change should take effect on the next page load of the front end.

[Wayne Luke]

Move the Search Box to the Navigation Bar

The instructions for this effect can be found in the main vBulletin.com Community at this link:
https://www.vbulletin.com/forum/foru...navigation-bar

[Wayne Luke]

Rotating Banner in Header

To do this first upload the images you want to use in the AdminCP using the vBCloud File Manager.

Once your images are uploaded create a new notice in the Notice Manager within the Admincp.

Place this content in it:

 <script type="text/javascript">
     var dir = 'url(core/css/0/0/0/0/9/2/images/';
     var images = ['background0.jpg','background1.jpg','background2.jpg','background3.jpg','background4.jpg','background5.jpg','background6.jpg','background7.jpg','background8.jpg'];
     document.getElementById("header").style.backgroundImage = "url(" + dir + images[Math.floor(Math.random() * images.length)] + ")";
  </script>

For the dir variable, you want to replace this with the directory where your images are stored. You can see this in the vBCloud File Manager.

For the images list your image names surrounded by single quotes (') and separated by commas as shown.

Save the new notice. In the list of notices note the ID for your new notice.

Add the following to your site CSS to hide the notice:

[data-notice-id="X"] {display:none;}

Replace the X with the ID of your notice.

[Wayne Luke]

Import Google Fonts.

Fonts are a great way of enhancing your presentation. However, if the end user's computer doesn't have the font installed, they won't see it. Luckily you can tell your website to install a font on the end-user's computer temporarily so that it can be used. This is done via CSS. Google has created a large library of free to use fonts that you can use on your vBulletin site. The simplest way is to use the @import attribute in CSS to do this.

Pick the fonts you want on Google and then use their tool to get the code. We're interested in the @import code. As presented it looks like this:

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

We're interested in the middle line which is:

@import url('https://fonts.googleapis.com/css?family=Roboto');

To add this click on Style in Site Builder then select the CSS Editor tab. Paste your @import line as the very first line in your custom CSS. Save and close the CSS Editor.

Now, you can call the font name ('Roboto' in this example) in style variables or additional custom CSS. You would use the font-family attribute of CSS. Here is an example:

body {
   font-family: 'Roboto', sans-serif;
}

Have fun with fonts on your site. However, there is a caveat with using fonts. The more fonts you load per page, the slower your site will be.

[Wayne Luke]

Updated Article Channel Layout

This will update the article layout to appear like the articles on this site. One important thing to remember is that the first attached image will be used as the article's preview image. Make sure it is an image that you want to use.

In the Article Channel Display Module, I've chosen the layout of 1 article then 2 articles per row. You can change this by clicking on the pencil icon in the module's control menu.

To update the layout, just add this to your custom CSS:

.article-list.stream-view.stream-view-full-width .list-item {
background: #feffff; /* Old browsers */
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
padding: 6px;
margin-bottom: 12px;
}
.article-list.stream-view .list-item:first-child {
border: 2px solid #FAFAFA;
}
.article-list.stream-view .list-item:first-child img.b-post__preview-image
    {
width: 900px;
height: 160px;
border: 0px;
padding: 0px;
}
.article-list li .post-links {text-align:right;}

[Wayne Luke]

Using Font Awesome for Status Icons.

First, you need to clear the existing images. Unfortunately, I had to do this on an ID basis. Without doing this the original background image would continue to show. Here is the CSS:

/* Force background image clear on Forum Icons */
#forum19 .cell-forum .icon, #forum20 .cell-forum .icon, #forum22 .cell-forum .icon, 
#forum36 .cell-forum .icon, #forum34 .cell-forum .icon, #forum283 .cell-forum .icon, 
#forum269 .cell-forum .icon, #forum270 .cell-forum .icon, #forum271 .cell-forum .icon, 
#forum281 .cell-forum .icon, #forum277 .cell-forum .icon, #forum447 .cell-forum .icon, 
#forum276 .cell-forum .icon, #forum272 .cell-forum .icon, #forum274 .cell-forum .icon,
#forum275 .cell-forum .icon, #forum278 .cell-forum .icon, #forum279 .cell-forum .icon,
#forum280 .cell-forum .icon, #forum1299 .cell-forum .icon, #forum273 .cell-forum .icon,
#forum1300 .cell-forum .icon, #forum282 .cell-forum .icon, #forum3049 .cell-forum .icon {
     background: transparent;
}

Then I was able to apply individual icons per forum.

/* forum icon for forums with no new posts */
.forum-list-container .forum-item .cell-forum .icon::before {color:gray;font-family:'FontAwesome';font-size:19px;content: "\f1b0";}

/* forum icon for forums with new posts */
.forum-list-container .forum-item.new .cell-forum .icon {background: transparent;}
.forum-list-container .forum-item.new .cell-forum .icon::before {color:green;font-family:'FontAwesome';font-size:19px;margin-top:-4px;content: "\f1b0"; }

/* forum icons for some individual forums */
#forum269.forum-item.main .cell-forum .icon::before{content:"\f0ac";}
#forum269.forum-item.main.new .cell-forum .icon::before{content:"\f0ac";}
#forum270.forum-item.main .cell-forum .icon::before{content:"\f0d6";}
#forum270.forum-item.main.new .cell-forum .icon::before{content:"\f0d6";}
#forum271.forum-item.main .cell-forum .icon::before{content:"\f0c3";}
#forum271.forum-item.main.new .cell-forum .icon::before{content:"\f0c3";}
#forum281.forum-item.main .cell-forum .icon::before{content:"\f0f2";}
#forum281.forum-item.main.new .cell-forum .icon::before{content:"\f0f2";}
#forum277.forum-item.main .cell-forum .icon::before{content:"\f03d";}
#forum277.forum-item.main.new .cell-forum .icon::before{content:"\f03d";}
#forum1300.forum-item.main .cell-forum .icon::before{content:"\f21e";}
#forum1300.forum-item.main.new .cell-forum .icon::before{content:"\f21e";}
#forum283.forum-item.main .cell-forum .icon::before{content:"\f292";}
#forum283.forum-item.main.new .cell-forum .icon::before{content:"\f292";}

You can find the UTF-8 Code for each Font Awesome Icon on the Font Awesome website.