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

XF 1.4 Time to learn myself just need some help (What template)?!

Heavy

Active member
#1
Hi,

It's time that I (Heavy) need to learn how to use xenforo system.

Today's mission is to get this:


Look like this:


So its "By" before the username and date UNDER username.

And hopefully that little icon :)

Can someone just tell me what template i need to edit?

I might need some help on the way, haha :)

Thanks,

Heavy
 

Martok

Well-known member
#4
Telling you exactly where to edit isn't really learning the XenForo system, is it?

You know the template this is happening in. Look at what's happening in the code in the browser console ie what is being output and where on the page. Then look at the forum_list template and try and relate what's in there to what you've seen. You'll also see that the forum_list template refers to other templates, so some code used is from these.

BTW I don't know off the top of my head what the answer is so I'm not being awkward. I could log onto a PC rather than use my tablet or phone and work it out but that's not really the point and would defeat the purpose of you learning the XenForo system. Hopefully though you've got enough to start and, with a bit of patience and testing, you'll soon have the answer. :)
 

Heavy

Active member
#5
Telling you exactly where to edit isn't really learning the XenForo system, is it?

You know the template this is happening in. Look at what's happening in the code in the browser console ie what is being output and where on the page. Then look at the forum_list template and try and relate what's in there to what you've seen. You'll also see that the forum_list template refers to other templates, so some code used is from these.

BTW I don't know off the top of my head what the answer is so I'm not being awkward. I could log onto a PC rather than use my tablet or phone and work it out but that's not really the point and would defeat the purpose of you learning the XenForo system. Hopefully though you've got enough to start and, with a bit of patience and testing, you'll soon have the answer. :)
Ok thanks. :)
 

Heavy

Active member
#6
Sorry but this is impossible.. Could you tell me were i'm gonna edit this?

Maybe i learn how to find / what if you tell me, from that i can start making a phrase and so.

Thanks.
 

Russ

Well-known member
#10
When you're starting off, you need to use an inspector, such as Firebug, Chrome/FireFox default ones.

Inspect that element:

Screenshot_2.png


You can see it has a class of nodeLastPost, search that via appearance:

Screenshot_3.png

Comes up with a few results... the red box are CSS templates, so that's not where you'd adjust HTML.

The green ones are where this is located.


Screenshot_4.png

node_category_level_2 isn't very common unless you have a category in a category showing on the forum node list.

So open: node_forum_level_2



You can edit this html:

Code:
    <div class="nodeLastPost secondaryContent">
       <xen:if is="{$forum.privateInfo}">
         <span class="noMessages muted">({xen:phrase private})</span>
       <xen:elseif is="{$forum.lastPost.date}" />
         <span class="lastThreadTitle"><span>{xen:phrase latest}:</span> <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">{$forum.lastPost.title}</a></span>
         <span class="lastThreadMeta">
           <span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>,</span>
           <xen:datetime time="$forum.lastPost.date" class="muted lastThreadDate" data-latest="{xen:phrase latest}: " />
         </span>
       <xen:else />
         <span class="noMessages muted">({xen:phrase contains_no_messages})</span>
       </xen:if>
     </div>
 

Heavy

Active member
#11
When you're starting off, you need to use an inspector, such as Firebug, Chrome/FireFox default ones.

Inspect that element:

View attachment 104105


You can see it has a class of nodeLastPost, search that via appearance:

View attachment 104106

Comes up with a few results... the red box are CSS templates, so that's not where you'd adjust HTML.

The green ones are where this is located.


View attachment 104107

node_category_level_2 isn't very common unless you have a category in a category showing on the forum node list.

So open: node_forum_level_2



You can edit this html:

Code:
    <div class="nodeLastPost secondaryContent">
       <xen:if is="{$forum.privateInfo}">
         <span class="noMessages muted">({xen:phrase private})</span>
       <xen:elseif is="{$forum.lastPost.date}" />
         <span class="lastThreadTitle"><span>{xen:phrase latest}:</span> <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">{$forum.lastPost.title}</a></span>
         <span class="lastThreadMeta">
           <span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>,</span>
           <xen:datetime time="$forum.lastPost.date" class="muted lastThreadDate" data-latest="{xen:phrase latest}: " />
         </span>
       <xen:else />
         <span class="noMessages muted">({xen:phrase contains_no_messages})</span>
       </xen:if>
     </div>
Thank you veeeeryy much for this tutorial!

<3
 

Heavy

Active member
#12
Ok, so i created a phrase called "by" then i'll do this
Code:
<span>{xen:phrase by}:</span>
right?

Now i'll put it before something like "username" in the code?
 

Heavy

Active member
#13
As i can see here


"lastThreadUser"

and then i look into the template i try to put my phrase before:



but it's not working :(

Anyone who know how to fix this?
 

Dylan V

Well-known member
#14
The easiest method is to do this in CSS only. Add this to "EXTRA.css":
Code:
.node .lastThreadUser:before
{
    content: "By";
    margin-right: 2px;
}
Screenshot_1.png

And to place the date below, add-this:
Code:
.node .lastThreadDate
{
      display: block;
}
As you can see on this image:

Screenshot_1.png

There is not enough space so the date is visible, so you need to remove the background:

Screenshot_2.png

So to do this, add this to "EXTRA.css":

Code:
.node .nodeLastPost
{
      background: none !important;
      border: none !important;
      overflow: visible !important;
      top: -7px !important;
}
Screenshot_3.png

Now to remove the comma, go to "node_forum_level_2" and replace this line of code:
Code:
<span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>,</span>
with:
Code:
<span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if></span>
Final result:

Screenshot_4.png
 
Last edited:

Heavy

Active member
#15
The easiest method is to do this in CSS only. Add this to "EXTRA.css":
Code:
.node .lastThreadUser:before
{
    content: "By";
    margin-right: 2px;
}
View attachment 104149

And to place the date below, add-this:
Code:
.node .lastThreadDate
{
      display: block;
}
As you can see on this image:

View attachment 104150

There is not enough space so the date is visible, so you need to remove the background:

View attachment 104151

So to do this, add this to "EXTRA.css":

Code:
.node .nodeLastPost
{
      background: none !important;
      border: none !important;
      overflow: visible !important;
      top: -7px !important;
}
View attachment 104152

Now to remove the comma, go to "node_forum_level_2" and replace this line of code:
Code:
<span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>,</span>
with:
Code:
<span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if></span>
Final result:

View attachment 104153
Thank you alot Dylan :) Do you know how to add that little icon? ;)
And it have to be linked to the thread

Thanks,

Heavy