1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained User/Inbox/Alert Icon Replacement

Shorten your navigation tab just a bit more...

  1. Sheldon

    Sheldon Well-Known Member

    Sheldon submitted a new resource:

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

    Read more about this resource...
     
  2. Sheldon

    Sheldon Well-Known Member

    Here is the look on Black Responsive, by @Arty

    dark.png
     
  3. SignTorch

    SignTorch Active Member

    that's just awesome.... :love:
     
  4. Inkman

    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. :)
     
  5. Sheldon

    Sheldon Well-Known Member

    Most likely... could use a smilie face icon.. or the member icon that FontAwesome has.
     
    Inkman likes this.
  6. Sheldon

    Sheldon Well-Known Member

    This?

    Screenshot_6.png

    Dropdown....

    Screenshot_2.png
     
    QenTox, SignTorch and Inkman like this.
  7. MattW

    MattW Well-Known Member

    These are the icons I've changed on UI.X

    upload_2013-10-14_23-35-57.png
     
    Sheldon likes this.
  8. Sheldon

    Sheldon Well-Known Member

    SneakyDave likes this.
  9. Sheldon

    Sheldon Well-Known Member

    With all the icons FontAwesome has, plus whatever you can really find... it's a simple, yet nice looking enhancement.
     
    MattW likes this.
  10. Inkman

    Inkman Active Member

  11. Sheldon

    Sheldon Well-Known 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.
     
    Inkman likes this.
  12. Inkman

    Inkman Active Member

    Excellent its now working perfect it was me i messed the whole thing up... Im tired going to sleep now lol.
     
    Sheldon likes this.
  13. netkingZ

    netkingZ Active Member

    inspired by this tutorial I created this:
    [​IMG]

    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.
     
    Moddis and Adam Howard like this.
  14. ibaker

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

    Sheldon Well-Known Member


    Gimme a bit, I will update the listing to show the option with images as well.
     
    ibaker likes this.
  16. Sheldon

    Sheldon Well-Known Member

    About 3/4 of the way down in the resource listing.
     
  17. Adam Howard

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

    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
     
    SneakyDave likes this.
  19. Adam Howard

    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.
     
  20. Adam Howard

    Adam Howard Well-Known Member

    For clarification.... It can be done if you start editing the files (a little bit of work, but it can be done)
     

Share This Page