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

XF 1.4 Edit Font Face For Posted Time Text in Each Message

Discussion in 'Styling and Customization Questions' started by CiaranT, Dec 27, 2014.

  1. CiaranT

    CiaranT Member


    Can you please advise as to edit the font face of the posted time text at the bottom of each message.

    I cannot find it in styles. Can you please advise as to the where this can be changed?

  2. Amaury

    Amaury Well-Known Member

    Try using #datePermalink.
  3. CiaranT

    CiaranT Member

    I don't understand. What does that mean?

    Is there anywhere in styles, in the admin panel, that I can change the font face of the date and poster name?

  4. Tracy Perry

    Tracy Perry Well-Known Member

    Most items can be changed via EXTRA.css. That was what @Maru's comment about using the #datePermalink referred to.
    In EXTRA.css place
    #datePermalink {
    As for the poster name... where exactly are you wanting to change it at? On the postbit? In the visitor panel?
  5. CiaranT

    CiaranT Member

    Thanks for the reply.

    I should have been clearer.

    My post above has "CiaranT,Yesterday at 9:06 PM" in small grey letters at the bottom of the post.

    How do I move the "Yesterday at 9:06 PM" date part up to the top of the message, make the font size larger, remove it from the bottom but keep it inside the message box.

    Asking for too much? Is this possible?
  6. Tracy Perry

    Tracy Perry Well-Known Member

    That's totally different.. to move that you will have to edit the template. The size related info for styling would remain the same. I'd have to look at the templates to see what needs to be moved. Are you on a standard style or do you have a custom one (downloaded or purchased)? That will make a difference.

    It could be the message template.
    Last edited: Dec 29, 2014
  7. Amaury

    Amaury Well-Known Member

    @mike406, our other admin, accomplished this on our site and should be able to help. :)
  8. mike406

    mike406 Member

    In the post template you're looking for this here
                    <span class="item muted">
                        <span class="authorEnd"><xen:username user="$post" class="author" />,</span>
                        <a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="datePermalink"><xen:datetime time="$post.post_date" /></a>
    That is what shows the Author, PostDate at the bottom of posts. If you want to move it up, place that code in the message template under the opening <li id="{$messageId}" ...> element or around that area depending where exactly you want it placed. You'll need to play around with CSS using EXTRA.CSS template to situate how you want it to look.

    If you want just the date portion remove this bit
    <span class="authorEnd"><xen:username user="$post" class="author" />,</span>
    Last edited: Dec 28, 2014
    Amaury likes this.
  9. CiaranT

    CiaranT Member

    Thank you guys. You have pointed me in the right direction. Cheers.
  10. Sorry to dig up an old discussion but I'm looking to increase the size of the font for the time and date at the bottom of each message. Can somebody tell me where to make that edit?
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Sal Collaziano likes this.
  12. Thank you. Before I go breaking things in templates - is that my only choice here? I made changes to small fonts in other areas by editing style properties. I had a feeling I might be able to do the same, for consistency's sake, in the style properties of "message layout" or "message elements". Am I barking up the wrong tree there?

    I guess the proper way to ask this question is: Does a style property exist for the element I wish to change?

    In the meantime, I made the change at messageMeta in message.css...
    Last edited: Jun 24, 2017
  13. Tracy Perry

    Tracy Perry Well-Known Member

    You can make those changes (since they are CSS) by using EXTRA.css to place the CSS statements. Every now and then you may have to use the !important designator - but not often.
    Sal Collaziano likes this.
  14. That would be best to avoid having the settings overwritten later, correct?
  15. Brogan

    Brogan XenForo Moderator Staff Member

    The !important declaration is only required in rare instances - most times you can use higher specificity.
    It doesn't have anything to do with having settings overwritten later.

    Editing the CSS template or using EXTRA.css will achieve the same result.
    Upgrading won't remove the changes.
    Sal Collaziano likes this.
  16. Tracy Perry

    Tracy Perry Well-Known Member

    With the merge system in place, that's pretty much an issue in the past with XenForo. It's one of the things I REALLY like about the templating system.

Share This Page