How to add custom icons to Metro tabs

• Adding custom icons to vBulletin 5 version
• Adding custom icons to vBulletin 4 version

If you want to add custom icons to your Metro tabs (vBulletin 5 version) just follow these simple steps.

1. First of all you need to prepair an image. If you don't have one, you can use one of the icons from great Modern UI Icons set.
   
   Create a 120x120px image a place it to
   images/metro/YOUR_COLOR/misc/YOUR_TAB_ICON_NAME.png
   
   Don't forget to give your image a unique name!
2. Create a new tab via the vBulletin Navigation Manager (You can use this official tutorial or this video) and find its unique css ID —
   using e.g. Chrome Developer Tools (this tutoral may help you).
3. You'll see something like this —
   
   
   
   In this case navbar_blogs is the tab unique ID. Your ID will have other name but you'll use it to assing you tab icon
4. Now go to AdminCP — Styles & Templates — Style Manager —YOUR_THEME —Edit templates (under the dropdown menu to the right) and find additional.css template under the CSS Templates.
5. Add the following code at the end of the file
   

   .metro-header.b-top-background__header-mainnav-subnav #channel-tabbar > ul > li > a.YOUR_TAB_ID::before {
       background-attachment: scroll;
       background-image: url("images/metro/YOUR_COLOR/misc/YOUR_TAB_ICON_NAME.png") !important;
       background-position: center 0 !important;
       background-repeat: no-repeat;
   }

   Don't forget to use your real ID's, theme color name and image name!
6. Save the template and refresh your forum page.

---

If you want to add custom icons to your Metro tabs (vBulletin 4 version) just follow these simple steps.

1. First of all you need to prepair an image. If you don't have one, you can use one of the icons from great Modern UI Icons set.
   
   Create a 120x120px image a place it to
   images/metro/YOUR_COLOR/misc/YOUR_TAB_ICON_NAME.png
   
   Don't forget to give your image a unique name!
2. Create a new tab via the vBulletin Navigation Manager and find its unique css ID —
   open Google Chrome, then right-click on the new tab and select Inspect Element.
   
   The DevTools window will open at the bottom of your Chrome browser.
3. You'll see something like this —
   
   
   
   In this case vbtab_cms is the tab unique ID. Your ID will have other name but you'll use it to assing you tab icon
4. Now go to AdminCP — Styles & Templates — Style Manager —YOUR_THEME —Edit templates (under the dropdown menu to the right) and find additional.css template under the CSS Templates.
5. Add the following code at the end of the file
   

   #YOUR_TAB_ID > a {
       background-attachment: scroll;
       background-image: url("images/metro/YOUR_COLOR/misc/YOUR_TAB_ICON_NAME.png") !important;
       background-position: center 0 !important;
       background-repeat: no-repeat;
   }

   Don't forget to use your real ID's, theme color name and image name!
6. Save the template and refresh your forum page.