Add an image to individual navigation tabs

by Bi0S - 05-04-2017 - 01:17 AM
Posts:
12,182

Reputation:
29

Credits:

LeakerActiveChampion Poster10kAddictedRich BitchCredit WhoreKnightGoldDiamondEmerald
Emerald Member
Emerald
Posts:
12,182

Threads:
12,128

Joined:
May 2017

Likes:
38

Credits:

Reputation:
29

Warning Level:

LeakerActiveChampion Poster10kAddictedRich BitchCredit WhoreKnightGoldDiamondEmerald
#1
OP
Posted: 05-04-2017 - 01:17 AM
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]
Posts:
16

Reputation:
0

Credits:

Rookie User
Posts:
16

Threads:
1

Joined:
Nov 2017

Likes:
0

Credits:

Reputation:
0

Warning Level:

#2
Posted: 11-05-2017 - 04:44 AM
thanks for this very useful guide
Posts:
17

Reputation:
0

Credits:

Rookie User
Posts:
17

Threads:
1

Joined:
Dec 2017

Likes:
0

Credits:

Reputation:
0

Warning Level:

#3
Posted: 12-20-2017 - 08:59 PM
How do you add a link to a tab?
Posts:
23

Reputation:
0

Credits:

Rookie User
Posts:
23

Threads:
2

Joined:
Feb 2018

Likes:
0

Credits:

Reputation:
0

Warning Level:

#4
Posted: 02-12-2018 - 08:45 PM
Hi, any update for XF 2.0 ?




USERS BROWSING THIS THREAD:  1 Guest(s)
"Join for the content, stay for the community."
© All Rights Reserved DemonForums.
© 2015-2017 / DemonForums
Server time: 02-18-2018, 05:52 PM (847 Days Online)