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

Heavy

Heavy

Active member
Hi,

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

Today's mission is to get this:
81f4bfcd69ba19acfa6e69f6ee6c9994.png


Look like this:
d021a6e30fa9a5de8727078d893c5374.png


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
 
Sort by date Sort by votes
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. :)
 
Upvote 0 Downvote
Martok said:
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. :)
Click to expand...
Ok thanks. :)
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
When you're starting off, you need to use an inspector, such as Firebug, Chrome/FireFox default ones.

Inspect that element:

Screenshot_2.webp


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

Screenshot_3.webp

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

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>
 
Upvote 0 Downvote
Russ said:
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>
Click to expand...
Thank you veeeeryy much for this tutorial!

<3
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
As i can see here
59b813ec4f76c2cfcc758790eebe5242.png


"lastThreadUser"

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

8f697c97b5c65a74dc439af4f681c712.png


but it's not working :(

Anyone who know how to fix this?
 
Upvote 0 Downvote
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.webp

And to place the date below, add-this:
Code: 
.node .lastThreadDate
{
      display: block;
}

As you can see on this image:

Screenshot_1.webp

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

Screenshot_2.webp

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

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.webp
 
Last edited:
Upvote 0 Downvote
Dylan V said:
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
Click to expand...
Thank you alot Dylan :) Do you know how to add that little icon? ;)
And it have to be linked to the thread

Thanks,

Heavy
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom