1. 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)?!

Discussion in 'Styling and Customization Questions' started by Heavy, Apr 19, 2015.

  1. 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: [​IMG]

    Look like this: [​IMG]

    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
     
  2. Martok

    Martok Well-Known Member

    Heavy likes this.
  3. Heavy

    Heavy Active Member

    Last edited: Apr 19, 2015
  4. Martok

    Martok Well-Known Member

    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. :)
     
    Amaury likes this.
  5. Heavy

    Heavy Active Member

    Ok thanks. :)
     
  6. Heavy

    Heavy Active Member

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

    Amaury Well-Known Member

    Are the screenshots of the discussion list? If so, you can start by checking out the discussion_list template.
     
  8. Heavy

    Heavy Active Member

    I dont know, [​IMG]
    [​IMG]
    Thanks,
     
  9. Amaury

    Amaury Well-Known Member

    Oh, that's the forum list. Check out the forum_list template.
     
  10. Russ

    Russ Well-Known Member

    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>
    
     
    sbj, Demon, Heavy and 1 other person like this.
  11. Heavy

    Heavy Active Member

    Thank you veeeeryy much for this tutorial!

    <3
     
  12. Heavy

    Heavy Active Member

    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?
     
  13. Heavy

    Heavy Active Member

    As i can see here [​IMG]

    "lastThreadUser"

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

    [​IMG]

    but it's not working :(

    Anyone who know how to fix this?
     
  14. Dylan V

    Dylan V Well-Known Member

    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: Apr 20, 2015
    Heavy likes this.
  15. Heavy

    Heavy Active Member

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

    Thanks,

    Heavy
     
  16. Heavy

    Heavy Active Member

    Anyone?
     
  17. Heavy

    Heavy Active Member

  18. Brogan

    Brogan XenForo Moderator Staff Member

    Have you tried, as the title of your thread suggests, "to learn yourself"?

    Linking an image is basic HTML.
    This site may help you to learn the basics: http://www.w3schools.com/
     
  19. Heavy

    Heavy Active Member

    Hi, i know but i don't know were to put the code and the code should be linked to {thread}?
     

Share This Page