Help Changing Status Icons for each Forum

[alexxxmk]

Hi,

I found this useful code on vb.com which I am using now on my forum. But what I am still missing is to add icons in specific forums. Not having all the forums with the same icon. if anyone knows how to please let me know!



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

Example:

http://eurocrewpr.com/forum


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


Thanks to vbulletin.com former developer who posted the code

[Lynne]

The example you posted has the same icon for all the forums. I thought you were saying you want them different for each forum? If so, I think you would need to first edit the display_Forums_item template and use the nodeid to create a new class:

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

And then change the classes in the list to something like this (changeXX to the nodeid of the forum):
.forum-list-container .forum-item.iconclassXX .cell-forum .icon {....

[alexxxmk]

Hi Lynne, yes that's exactly what I am looking for.

Just tried creating the iconclass but didn't work out for me :(

any other suggestions?

[Lynne]

It worked just fine on my test site. I suggest you try it again from scratch. And be sure that the URLs for your images are correct or they won't show.

[alexxxmk]

Yes! now its working! just realized I had the .forum-item repeated on my css_additional.css

Thank you so much Lynne!

--------------- Added 1397100570 at 1397100570 ---------------

http://eurocrewpr.com/forum/images/css/screenshoticons.png

[Lynne]

That looks nice! I'm glad it finally worked for you. :)

[Spangle]

I like this idea, it would be useful for my football ( soccer) forum, is there any chance the OP could do an idiots guide on how to achieve this ?

TIA

[Lynne]

All he did was what was posted here - https://vborg.vbsupport.ru/showpost.php?p=2492132&postcount=2

[Spangle]

All he did was what was posted here - https://vborg.vbsupport.ru/showpost.php?p=2492132&postcount=2


I'm confused as to how the correct icons are displayed for each forum :confused:

[IggyP]

here is more code for changing if you want icons the same...

this has adjustments for spacing and such so can easily do with most any size icons

http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028327-vb5-temp-fix-for-custom-forum-icons-any-size

[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: