XF 1.2 Replace two strings with icons

AndreaMarucci

Well-known member
Hello, This is my forum now

Schermata 2013-11-06 alle 16.10.11.webp

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?
 
Just a little more help. How can I find the name of the template to edit and the name of the phrases?

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

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

Attachments

  • bbdiscussions.webp
    bbdiscussions.webp
    148 bytes · Views: 4
  • bbmessages.webp
    bbmessages.webp
    144 bytes · Views: 2
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?
 
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?

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