User/Inbox/Alert Icon Replacement

User/Inbox/Alert Icon Replacement

Overview Updates (2) Reviews (27) Discussion
Sheldon

Sheldon

Well-known member
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...
Click to expand...

Read more about this resource...
 
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. :)
 
inspired by this tutorial I created this:
mv3rtd.jpg


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.
 
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
 
ibaker said:
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
Click to expand...


Gimme a bit, I will update the listing to show the option with images as well.
 
One of the "odd" things about Font Awesome is when you host it locally.... It ends up looking like Asian text or Egyptian

www.sociallyuncensored.net 2013-10-22 22 37 8.webp
 
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
 
SignTorch said:
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
Click to expand...
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 said:
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.
Click to expand...
For clarification.... It can be done if you start editing the files (a little bit of work, but it can be done)
 
You must log in or register to reply here.
Top Bottom