User/Inbox/Alert Icon Replacement

User/Inbox/Alert Icon Replacement

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

Read more about this resource...
 

Inkman

Active member
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. :)
 

Sheldon

Well-known member
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. :)

Most likely... could use a smilie face icon.. or the member icon that FontAwesome has.
 

Inkman

Active member
Strange... I just added it to another site, same code, different theme and it worked.

If you PM me login, I will correct it.
Excellent its now working perfect it was me i messed the whole thing up... Im tired going to sleep now lol.
 

netkingZ

Active member
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.
 

ibaker

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

Adam Howard

Well-known member
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.png
 

SignTorch

Active member
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
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
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)
 
Top