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

XF 1.2 Replace two strings with icons

Discussion in 'Styling and Customization Questions' started by AndreaMarucci, Nov 6, 2013.

  1. AndreaMarucci

    AndreaMarucci Well-Known Member

    Hello, This is my forum now

    Schermata 2013-11-06 alle 16.10.11.png

    and I'd like to replace the "Discussioni" and "Messaggi" text (stand for Threads and Messages) with a little icons like I've seen in some beautiful @Audentio themes.

    Someone can explain me how can I do that?
     
    Mike Creuzer likes this.
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. AndreaMarucci

    AndreaMarucci Well-Known Member

    Interesting. So practically I can use font-awesome or replace the text with an img using html. Thank you very much!
     
  4. Shelley

    Shelley Well-Known Member

    Yup, I thought template editing was needed (same question was posted at my site) . I almost got it with CSS only. :D

    Screenshot_35.png
     
  5. AndreaMarucci

    AndreaMarucci Well-Known Member

    Just a little more help. How can I find the name of the template to edit and the name of the phrases?
     
  6. AndreaMarucci

    AndreaMarucci Well-Known Member

    I ask since sheldon's instructions are relative to his modification... Sorry for asking but i'm not too practical in finding these things...
     
  7. Shelley

    Shelley Well-Known Member

    Template I'm sure you need is node_forum_level_2

    and the specific code is

    Code:
    <dl><dt>{xen:phrase discussions}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd></dl>
             <dl><dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd></dl>
    
     
  8. AndreaMarucci

    AndreaMarucci Well-Known Member

    I love you Shelley :love: Let me try...
     
  9. AndreaMarucci

    AndreaMarucci Well-Known Member

    And this is the result! Absolutely fantastic!!! Thanks @Brogan and thanks @Shelley

    Schermata 2013-11-06 alle 17.22.40.png
     
  10. AndreaMarucci

    AndreaMarucci Well-Known Member

    Just to finish the work @Shelley what I've to change to replace also the Ultimo (last thread) text? It's always in the same template?
     
  11. Shelley

    Shelley Well-Known Member

    you could probably remove that with css if i understood where that is, adding the following in extra will hide that (I probably misunderstood)

    Code:
    .node .nodeLastPost .lastThreadTitle span {display: none;}
    Edit: if you are wanting to remove the prefix and add in an icon as a replacement you can do this fully with css with no template editing required. http://xenforo.com/community/resources/1-2-icon-in-last-post-area.1995/
     
  12. AndreaMarucci

    AndreaMarucci Well-Known Member

    I'd like to replace it with an icon like the others, not hiding it :)
     
  13. Shelley

    Shelley Well-Known Member

    The link above will allow that. If you are wanting to keep the prefix "Ultimo" in then don't add in the display: none;
     
  14. AndreaMarucci

    AndreaMarucci Well-Known Member

    Wow, thanks again!
     
    Shelley likes this.
  15. Mike Creuzer

    Mike Creuzer Well-Known Member

    Yeh, great job Andrea!
     
  16. Shelley

    Shelley Well-Known Member

    There's probably a better way of doing this but I'll post it in here in case other people bump into the thread.

    Go into your node_forum_level_2 template and find:
    Code:
    <dl><dt>{xen:phrase discussions}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd></dl>
    <dl><dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd></dl>
    
    And then replace with the following:
    Code:
            <dl><dt><span class="bbdiscussions"></span></dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd></dl>
             <dl><dt><span class="bbmessages"></span></dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd></dl>
    
    Then add the following in your EXTRA.CSS template
    Code:
    .bbdiscussions
    {background: url("@imagePath/xenforo/icons/bbdiscussions.png") no-repeat scroll left center transparent;
    height:11px;
    width: 15px;
    display: inline-block;}
    .bbmessages {background: url("@imagePath/xenforo/icons/bbmessages.png") no-repeat scroll left center transparent;
    height:11px;
    width: 15px;
    display: inline-block;}
    
    And finally, upload the images to your /icons styles folder. Obviously, your images may be different and sizes so adjust css to suit.

    Output of all of that is as follows (screenshot below)

    Screenshot_38.png
     

    Attached Files:

  17. AndreaMarucci

    AndreaMarucci Well-Known Member

    Good work as usual Shelley. Just a question. Which way it's better considering forum speed and "weight"? The one that use font awesome that has to connect to an external site to take the icons or this one that use png?
     
  18. Shelley

    Shelley Well-Known Member

    Personally, I would have the icons pulling from my own server since it's quick enough. You could always further optimise the imagery (png-8) add them or insert them onto a spritesheet (possibly even add them to the xenforo-ui-sprite.png) if they are the only icons your using from font-awesome. That's just me though because i prefer relying on my own server than external servers.
     
  19. AndreaMarucci

    AndreaMarucci Well-Known Member

    You're correct. I'll use your version of the mod since I too prefer to have everything under control.
     

Share This Page