Add an image to individual navigation tabs

Add an image to individual navigation tabs

Paul B

XenForo moderator
Staff member
Brogan submitted a new resource:

Add an image to individual navigation tabs (version 1.0) - Each tab can have a different image applied.

Another simple bit of CSS which will add an image to the navigation bar for each tab, in front of the tab text/name.

You need to know the class name for each tab.
The default ones are: home, forums, members, help.
If you are using the Nodes As Tabs add-on, each tab will have a class name such as nodetab38.

You can use one of the browser inspection tools to identify the tab classes.

For each tab, you will need to add CSS similar to the following to...

Read more about this resource...
 
Won't it be simple to use just background-image? Just a bit of padding on navTab + a background-image.
Pseudo-elements are not a cross-browser feature, I think it is better to use css2 properties.
 
I feel dumb.. how do I find out what node_tab # is what?

For instance:

Code:
.navTab.nodetab38:before {

How do I know if my tabs are 1-4 or 100-130?
 
Brogan or anyone else.
I really would appreciate the code for just showing the icon without tab text, therefore the icon be linkable.
Best regards!
 
You can do that just by editing the phrase.
Phrases support HTML so just use IMG code.
 
Appearances >> Phrase and search for instances of that specific tab it won't be difficult to locate.
 
You didn't say it was a link forum using the nodes as tabs add-on.

There is no phrase for that.
 
Top Bottom