XF 1.2 Replace two strings with icons

[AndreaMarucci]

Hello, This is my forum now



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?

 

[Paul B]

Follow the instructions in this resource: http://xenforo.com/community/resources/user-inbox-alert-icon-replacement.2440/

Either edit the template and replace the phrase code with the HTML or just edit the phrase text.

 

[AndreaMarucci]

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

 

[Shelley]

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

 

[AndreaMarucci]

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

 

[AndreaMarucci]

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]

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

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

 

[AndreaMarucci]

I love you Shelley Let me try...

 

[AndreaMarucci]

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

 

[AndreaMarucci]

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?

 

[Shelley]

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)

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

 

[AndreaMarucci]

I'd like to replace it with an icon like the others, not hiding it

 

[Shelley]

I'd like to replace it with an icon like the others, not hiding it

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

 

[AndreaMarucci]

Wow, thanks again!

 

[Dad.]

Yeh, great job Andrea!

 

[Shelley]

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:

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

        <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

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

 

[AndreaMarucci]

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]

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.

 

[AndreaMarucci]

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