Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 08 Apr 2014, 00:22
alexxxmk alexxxmk is offline
 
Join Date: Apr 2014
Help Changing Status Icons for each Forum

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
Reply With Quote
  #2  
Old 08 Apr 2014, 17:54
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

And then change the classes in the list to something like this (changeXX to the nodeid of the forum):

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #3  
Old 10 Apr 2014, 01:06
alexxxmk alexxxmk is offline
 
Join Date: Apr 2014
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?
Reply With Quote
  #4  
Old 10 Apr 2014, 01:54
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #5  
Old 10 Apr 2014, 02:27
alexxxmk alexxxmk is offline
 
Join Date: Apr 2014
Yes! now its working! just realized I had the .forum-item repeated on my css_additional.css

Thank you so much Lynne!

--------------- Added 10 Apr 2014 at 03:29 ---------------

Reply With Quote
  #6  
Old 10 Apr 2014, 17:52
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
That looks nice! I'm glad it finally worked for you.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #7  
Old 11 Apr 2014, 05:51
Spangle Spangle is offline
 
Join Date: Jun 2011
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
Reply With Quote
  #8  
Old 11 Apr 2014, 18:54
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
All he did was what was posted here - http://www.vbulletin.org/forum/showp...32&postcount=2
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #9  
Old 11 Apr 2014, 19:23
Spangle Spangle is offline
 
Join Date: Jun 2011
Originally Posted by Lynne View Post
All he did was what was posted here - http://www.vbulletin.org/forum/showp...32&postcount=2

I'm confused as to how the correct icons are displayed for each forum
Reply With Quote
  #10  
Old 11 Apr 2014, 19:23
IggyP IggyP is offline
 
Join Date: May 2012
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...icons-any-size
Reply With Quote
  #11  
Old 11 Apr 2014, 23:13
alexxxmk alexxxmk is offline
 
Join Date: Apr 2014
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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

5. And Add
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

in the line like this:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

12. And repeat step 11 adding over and over the code but changing the icon image path and nodeid number
Reply With Quote
  #12  
Old 19 Apr 2014, 20:03
Spangle Spangle is offline
 
Join Date: Jun 2011
I've worked out how to do this, but the images are too small, how do I enlarge them ?
Reply With Quote
  #13  
Old 19 Apr 2014, 21:10
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #14  
Old 19 Apr 2014, 22:03
Spangle Spangle is offline
 
Join Date: Jun 2011
Thanks for the advice Lynne.

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

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #15  
Old 19 Apr 2014, 23:48
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Add this:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 04:18.

Layout Options | Width: Wide Color: