1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Please donate today & help us with our growing server costs or buy premium for access to our premium products
    Dismiss Notice

Free Add an image to individual navigation tabs

Discussion in 'Xenforo Template Mods & Extras' started by Armaan Ali, Mar 15, 2016.

  1. Armaan Ali

    Armaan Ali Banned BANNED

    Likes Received:
    1
    Trophy Points:
    3
    Gender:
    Male
    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 in orange 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:
    [​IMG]

    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:
    [​IMG]

    With a little bit of styling though, it appears like this:
    [​IMG]
     

Share This Page