ALERT!
Click here to register with a few steps and explore all our cool stuff we have to offer!
Home
Upgrade
Credits
Help
Search
Awards
Achievements
 9146

Add an image to individual navigation tabs

by Bi0S - 05-04-2017 - 03:17 AM
#1
Compatible XF Versions:
  • 1.0
  • 1.1
  • 1.2
  • 1.3
  • 1.4
  • 1.5
This resource is not affiliated with XenForo Ltd.

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/names.

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

This will add an image in front of the Forums tab text.
Code:
.navTabs .publicTabs .navTab.forums:before {
content: url('@imagePath/path/to/image.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}

This will add an image in front of the Fantasy F1 tab text, which has been added using the Nodes As Tabs add-on.
Code:
.navTabs .navTab.nodetab38:before {
content: url('@imagePath/path/to/image.png');
display: inline;
vertical-align: middle;
float: left;
padding-left: 4px;
padding-top: 4px;
}
 
The text nodetab38 denotes the tab.
Add a new block of code for each tab as required.

The CSS can be adapated to suit, depending on the size of image and desired result.

This is how it looks:
[Image: 26552-2bf4581e090b76f91f47f654e9bb01bd.jpg]

Note that you may need to add additional styling and/or adjust the existing styling of the navigation tabs to get it to display correctly when the tab is selected. This will vary for each style.
For example, this is how it appears unstyled:
[Image: 26554-79e9ee79c4f8bff07aeb846e6ce86866.jpg]

With a little bit of styling though, it appears like this:
[Image: 26555-1c00d0bc152dcae1127585bb7a102464.jpg]
Reply
#2
thanks for this very useful guide
Reply
#3
How do you add a link to a tab?
Reply
#4
Hi, any update for XF 2.0 ?
Reply

Users browsing: 1 Guest(s)