Help Changing Status Icons for each Forum

[alexxxmk]

Hope this helps:

1. Create your icon images in Photoshop or other software and save them as .png

2. Upload your images to your ftp or to anywhere in the internet for example:
http://dropbox.com/images/icons/myicon-new1.png

3. On your Vbulletin Cpanel go to -> Styles & Templates -> Style Manager -> Edit Template -> Double Click on Display Templates -> Double Click on display_Forums_item

4. Find the line code with:

class="forum-item {vb:raw forumCssPrefix} forum-item{vb:raw forumStatus}"

5. And Add

iconclass{vb:raw forum.nodeid}

in the line like this:

class="forum-item {vb:raw forumCssPrefix} forum-item{vb:raw forumStatus} iconclass{vb:raw forum.nodeid}"

6. Now it's time to find your different nodeid for each forum channel.

7. Use Firefox or Google Chrome and open your webpage on the browser

8. Right click and select the option Inspect Element

9. You will find different nodeid for each forum channel (for example:256)

10. On your CPanel go to -> Styles & Templates -> Style Manager -> Edit Template -> Click on CSS Templates -> Open css_additional.css

11. Paste the following code with your NodeID and your url icon images

 /* forum icon for forums with no new posts */
.forum-list-container .forum-item.iconclass256 .cell-forum .icon {
background: transparent url("http://yoursite.com/forum/images/css/car-old2.png") no-repeat;
}

/* forum icon for forums with new posts */
.forum-list-container .forum-item.new.iconclass256 .cell-forum .icon {
background: transparent url("http://yoursite.com/forum/images/css/car-new3.png") no-repeat;
}

12. And repeat step 11 adding over and over the code but changing the icon image path and nodeid number

[Spangle]

I've worked out how to do this, but the images are too small, how do I enlarge them ?

[Lynne]

You made them only 16x9, so you would need to make the images larger and then set the width and height in the CSS.

[Spangle]

Thanks for the advice Lynne.

I've set the CSS as follows, but now I have an alignment problem with the forum titles

/* forum icon for forums with no new posts */
.forum-list-container .forum-item .cell-forum .icon {
background: transparent url("http://football-rants.com/images/icons/footballogo2.png") no-repeat;
  width:40px;
  height:32px;
}
/* forum icon for forums with new posts */
.forum-list-container .forum-item.new .cell-forum .icon {
background: transparent url("http://football-rants.com/images/icons/footballogo2.png") no-repeat;
  width:40px;
  height:32px;
}

[Lynne]

Add this:

.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {padding-left: 45px;}

[Spangle]

That worked...thanks Lynne :up: