• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
User/Inbox/Alert Icon Replacement

User/Inbox/Alert Icon Replacement

Shorten your navigation tab just a bit more...

Sheldon

Well-known member
#1
Sheldon submitted a new resource:

Inbox/Alert Icon Replacement - Shorten your navigation tab just a bit more...

Inbox/Alert Icon Replacement
View attachment 59026 View attachment 59025
Simple template modification to change the look of your visitor navigation tabs.

First off, I decided to use Font Awesome, just seemed as easy to use as anything.

So, in order to do that, go to the template PAGE_CONTAINER

Find:
Code:
<head>
Insert After:
Code:
<link...
Read more about this resource...
 

Inkman

Active member
#4
Wow thanks this looks amazing, is there anything we could change the username part to? It would look great with the 3 icons in that area.
Thank you. :)
 

netkingZ

Active member
#13
inspired by this tutorial I created this:


I'll post how I did it so others can also do this:

Step 1:
go to the template PAGE_CONTAINER

Find:

Code:
<head>
Insert After:

Code:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Step 2:
Go to the template navigation

find:
Code:
<li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
replace with:
Code:
<li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink"><i class="icon-home icon-large icon-fixed-width"></i>{xen:phrase home}</a></li>
find:
Code:
<a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
replace with:
Code:
<a href="{$tabs.forums.href}" class="navLink"><i class="icon-comments icon-large icon-fixed-width"></i>{$tabs.forums.title}</a>
find:
Code:
<a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>
replace with:
Code:
<a href="{$tabs.members.href}" class="navLink"><i class="icon-group icon-large icon-fixed-width"></i>{$tabs.members.title}</a>
Thanks to this guide Sheldon.
 

ibaker

Well-known member
#14
Sheldon, don't suppose you could give the code and the icons used in your description (for dummies) so there isn't any reliance on FontAwesome?

Well done by the way...looks awesome
 

Sheldon

Well-known member
#15
Sheldon, don't suppose you could give the code and the icons used in your description (for dummies) so there isn't any reliance on FontAwesome?

Well done by the way...looks awesome

Gimme a bit, I will update the listing to show the option with images as well.
 

SignTorch

Active member
#18
the font-awesone css uses relative paths i.e. src: url('../font/fontawesome-webfont.eot?v=3.2.1');

so the font directory has to be a sibling of the css directory, like it is in the distribution package, then it will work
 

Adam Howard

Well-known member
#19
the font-awesone css uses relative paths i.e. src: url('../font/fontawesome-webfont.eot?v=3.2.1');

so the font directory has to be a sibling of the css directory, like it is in the distribution package, then it will work
In other words it sort of hates CDN or at least it doesn't seem to work with it

cdn.sociallyuncensored.com/font-awesome

or static domain names

sociallyuncensored.com/font-awesome

It really does have to be on the same domain as your forum....... Well that sucks.
 

Adam Howard

Well-known member
#20
In other words it sort of hates CDN or at least it doesn't seem to work with it

cdn.sociallyuncensored.com/font-awesome

or static domain names

sociallyuncensored.com/font-awesome

It really does have to be on the same domain as your forum....... Well that sucks.
For clarification.... It can be done if you start editing the files (a little bit of work, but it can be done)