Nav Icons ...

[rowedf]

Hello, I read the "How To's" but this part is really vague to me:

How to add new navigation icons

First you'll want to find an icon you wish to use for your navigation link, it should be 32 x 32, you can open styles/fragzone/xenforo/sources/navhome.png for reference. For consistency sake save it navNAME and upload it into that directory(sources)

Next you'll need to find your navigation selector by viewing the source code (source code of what file). For example home, portal and forum are...

.navTabs .navTab.forums .navLink
.navTabs .navTab.home .navLink
.navTabs .navTab.portal .navLink


So in extra.css you'll add:

Code:
.navTabs .navTab.YOURTAB .navLink {
background: url("styles/fragzone/xenforo/sources/navICON.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}

And you're done, if you need help finding an icon just post a request on the forums here

 

[Russ]

Do you by chance have Chrome or Firefox?

If you have Firefox you'll want to search for an add-on called Firebug(this is one of the best resources to create/customize XenForo styles). Alternatively you could use Chrome:

If you have Chrome it comes with an easy to do inspector, you can right click the navtab in question, then click "Inspect Element":

With Firebug installed on Firefox it'll be the same way, right click -> Inspect Element


From there you'll see a little mini window pop up:

If you notice the blue line is the code you're specifically inspecting. Look right above that(1 line up) you'll see the <li class="navTab xengallery Popup ect ect...."

For this tab it's called xengallery, so as per the tutorial you'd do:

.navTabs .navTab.xengallery.navLink
{
background: url("styles/fragzone/xenforo/sources/navICON.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}

I hope that helps, if you still need help you can link me your site and I can just grab all the tab names for you . I wish there was an easier way with the icons in the navigation however sadly there's absolutely not, which is why some ground work is required for ya heh.

 

[rowedf]

I appreciate the detailed explanation, but still having troubles trying to figure out exactly what I'm looking for

my sites www.shadowops.org I'm sure I'll be adding more tabs but if you can show me the names on my forums I might be able to find any new ones I add

Thanks again.

 

[Russ]

I appreciate the detailed explanation, but still having troubles trying to figure out exactly what I'm looking for

my sites www.shadowops.org I'm sure I'll be adding more tabs but if you can show me the names on my forums I might be able to find any new ones I add

Thanks again.

No worries it can be confusing that's for sure .

On yours the source code reads like so:

So you can add:

.navTabs .navTab.rml_list.navLink
{
background: url("styles/fragzone/xenforo/sources/navICON.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}
.navTabs .navTab.media.navLink
{
background: url("styles/fragzone/xenforo/sources/navICON.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}

Of course change the navICON.png name to the name of your icon you choose. I included a camera for media stuff, you can use navMedia.png for the .navTab.media.navLink one.

Put the above code into extra.css

 

[rowedf]

I put the code into extra.css and nothing changed. Trying to use the media one for now since the icons already there. Do I need to make any changes to fragzone_navicons.css ? Sorry for so many questions

 

[Russ]

Strange, should work would you mind creating me a temporary account with just appearance privs then PM me the details?

 

[Adam Thomson]

Hi Russ. I'm having the same issue with my board.

If I'm understanding this correctly, my navTab would be steam? and the code i add to extra.css would be

.navTabs .navTab.steam.navLink
{
background: url("styles/fragzone/xenforo/sources/steam.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}


If you could take a look at my board to make sure I'm using the correct info as well. http://www.doom4game.com/forums

 

[Russ]

Hi Russ. I'm having the same issue with my board.

If I'm understanding this correctly, my navTab would be steam? and the code i add to extra.css would be

.navTabs .navTab.steam.navLink
{
background: url("styles/fragzone/xenforo/sources/steam.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}


If you could take a look at my board to make sure I'm using the correct info as well. http://www.doom4game.com/forums

Hey Adam, sorry the code should have a space after the steam part. I didn't follow my own guide correctly in this thread haha.

.navTabs .navTab.steam .navLink
{
background: url("styles/fragzone/xenforo/sources/steam.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}

 

[Adam Thomson]

Hey Adam, sorry the code should have a space after the steam part. I didn't follow my own guide correctly in this thread haha.

.navTabs .navTab.steam .navLink
{
background: url("styles/fragzone/xenforo/sources/steam.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}

hehe np! all is working.

 

[officer_cartman]

Russ
on our site i have node for tabs but one thing i want to do is put icons on the navbar for the adds as you can see from looking at www.gamingoldies.co.uk
any chance you could point me in the right direction to edit it..i can get the icons needed and upload to install so just need to know where and what to edit

 

[Russ]

Check out:

http://pixelexit.com/threads/how-tos.454/

At the bottom,

for your missing icons you'll need:

.navTabs .navTab.livestream .navLink {
  background: url("@imagePath/xenforo/sources/navForum.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}
.navTabs .navTab.nodetab67 .navLink {
  background: url("@imagePath/xenforo/sources/navForum.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}
.navTabs .navTab.nodetab98 .navLink {
  background: url("@imagePath/xenforo/sources/navForum.png") no-repeat scroll center 10px rgba(0, 0, 0, 0);
}

If you see the source code on your page using inspector or what not, you'll see where I got those names from, the .navTab.NAME