XF 1.1 Insert Icons to Custom Navigation Tab

[Ji2myTran]

HI Guys,

I'm using this Add-on to add a new tab on my site:

http://xenforo.com/community/resources/nodes-as-tabs.9/

After create a tab, anyone know how can i add an icon beside it? where is the code of the new tab that i can find to insert an icon?

for example as the demo on above add-on: Promoters Tab

http://mmazone.com.au/community/pages/Promoters/

how can i add a icon beside the tab name: "Promoters"?

Thank you!

 

[Mr. Goodie2Shoes]

You need to use CSS like:

.nodetab50 > .navLink:before {
position: absolute;
width: 16px;
height: 16px;
background-image: url({link to your tab image});
}

of-course you need to refine the code, add more style properties to match the look

 

[Ji2myTran]

Thanks Mr.Goodie. However, it seems very complicated. Are there any other ways to find the name tab that i just added on the navigation then insert some html code like: <img src="image links"> as same as i can do it for the default tabs of Xenforo?

 

[Mr. Goodie2Shoes]

I don't think so... as the tabs are added dynamically.

 

[Jake Bunce]

Thanks Mr.Goodie. However, it seems very complicated. Are there any other ways to find the name tab that i just added on the navigation then insert some html code like: <img src="image links"> as same as i can do it for the default tabs of Xenforo?

The Nodes As Tabs addon (as well as every other addon with a tab) uses the extraTabs skeleton in the navigation template. It's a generic block of HTML that is used for all such tabs. Editing that skeleton would affect all such tabs.

CSS is the way to go. Example:

.nodetab31 .navLink:before
{
	content: url('path/to/image.gif');
	margin-right: 5px;
}

The result:

 

[Ji2myTran]

@ Jake: Amazing... Love this mod so much!