1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Add an image to individual navigation tabs

Each tab can have a different image applied.

  1. Brogan

    Brogan 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.

    Read more about this resource...
     
  2. CyberAP

    CyberAP Well-Known Member

    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.
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    Sure, that's another way of doing it.

    The CSS can be adapted to suit.
     
  4. 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?
     
  5. it_

    it_ Member

    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!
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    You can do that just by editing the phrase.
    Phrases support HTML so just use IMG code.
     
  7. it_

    it_ Member

    @Brogan
    I'm confused, which phrases do you mean? Can you give me an example where to locate a specific phrase to do this?
     
  8. Shelley

    Shelley Well-Known Member

    Appearances >> Phrase and search for instances of that specific tab it won't be difficult to locate.
     
  9. it_

    it_ Member

    Sorry for being dumb, I cannot manage to find those tabs... What is the syntax like?
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

  11. it_

    it_ Member

    What am I doing wrong?

    create.png noresult.png
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    You didn't say it was a link forum using the nodes as tabs add-on.

    There is no phrase for that.
     
  13. DRE

    DRE Well-Known Member

    How do you do this in Xenporta?
     
  14. Ferdinand

    Ferdinand Active Member

    Is it possible to replace the text with an image using this?
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    If you mean the phrase text, phrases support HTML so you can do it that way.
     
  16. Ferdinand

    Ferdinand Active Member

    I'm using nodes as tabs and I can't put html or bb in the Title section. I have used phrases to replace the default tabs.
     
  17. oO5 Dynasty

    oO5 Dynasty Active Member

    How can i add the images but take the words away. Like repleace Home/forum/members etc. with small icons?
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

     
  19. Commander

    Commander Member

    How to remove TAB name, and leave only images?
     
  20. Brogan

    Brogan XenForo Moderator Staff Member

    Edit the phrase and remove it, or replace the text with the image HTML.
     

Share This Page