• 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

AndreaMarucci

Well-known member
#1
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?
 

Shelley

Well-known member
#4
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
 

AndreaMarucci

Well-known member
#6
I ask since sheldon's instructions are relative to his modification... Sorry for asking but i'm not too practical in finding these things...
 

Shelley

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

Shelley

Well-known member
#11
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/
 

Shelley

Well-known member
#16
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
 

Attachments

AndreaMarucci

Well-known member
#17
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?
 

Shelley

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