Icons, Nav Bar and Sub Forums

[Coax]

Hey,

I would like to find out if it's possible to add generic icons for the nav bar seen here -


I have added icons to the main forum section for channels, using the channel IDs seen here -

However when I try to add the icons to show in the sub forums for each channel, they all show as the first image on top "above screenshot"
I have been struggling with this for awhile now, tried to work it out myself but couldn't get it sorted.

Regards.

[delicjous]

You could find an English translation of my NavBar Icon Modification-Tutorial her: https://vbulletin-forum.de/forum/eng...ain-navigation

That should help you to resolve your problem.

[Coax]

Heya, thanks for the link, seems I would need to sign up for this site to view, I am kind of hoping not to sign up to more site.

[glennrocksvb]

Adding icons to main navigation can be done via pure CSS without scripting or template hook required.

An example for Home nav item below. Each nav bar item has a CSS class of navbar_XXXX which you will use in the CSS like below. Right-click and Inspect each item to see the correponding CSS class.

.navbar_home:before {
    content: '';
    background: transparent url("/path/to/the/icon.png") no-repeat;
    width: 16px;    
    height: 16px;
    margin-right: 3px; /* margin-left for RTL or margin-{vb:stylevar right} */
    display: inline-block;
    position: relative;
    top: 2px;
}

Adjust icon path and pixel values as needed.

If you are using similar-sized icons, then the above code can be simplified like this:

/* Common style for all nav icons */
.channel-tabbar-list .section-item > a:before {
    content: '';
    background: transparent no-repeat;
    width: 16px;    
    height: 16px;
    margin-right: 3px; /* margin-left for RTL or margin-{vb:stylevar right} */
    display: inline-block;
    position: relative;
    top: 2px;
}

/* Icon for Home */
.navbar_home:before {
    background-image: url("/path/to/the/home/icon.png");
}

/* Icon for Blogs*/
.navbar_blogs:before {
    background-image: url("/path/to/the/blogs/icon.png");
}
...and so on

[Coax]

Hey Glenn, thanks so much, just getting the icons designed now! Have a great day.