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

XF 1.4 CSS/JS: Add font-awesome clock icon to date phrase

Discussion in 'Styling and Customization Questions' started by sinucello, Oct 3, 2014.

  1. sinucello

    sinucello Well-Known Member


    I`d like to move the post date from the privateControl section under the post to the div.messageUserBlock to the left of the post.

    This works but as the messageUserInfo-Block is only 124px wide so the default date output in german is a bit too long. (and no, I don`t want to reduce the font size to make it fit in there)

    Example: In the german language, the phrase "today_x_at_time_y" has the following content:
    Heute um {time} Uhr
    I had the idea to shorten the phrase with the font-awesome clock icon. I tried to change the phrase like this:
    Heute, <i class="fa fa-clock-o"></i>{time}
    But it seems that the date-phrases get processed by a PHP function. In the "post"-template I found the following snippet:
    <xen:datetime time="$post.post_date" />
    which is responsible for the post date output. The PHP function seems to insert the phrase into some JS var when the page is rendered:
        today_at_x:      "Heute <i class=\"fa fa-clock-o\"><\/i> %time% ",
    This seems to make it impossible for the font awesome-CSS to transfer the code into the desired icon. When I insert the phrase directly into the template code:
    <abbr>{xen:phrase today_at_x}</abbr>
    everything works fine, the font-awesome clock icon will be rendered as desired.

    So the problem seems to be that all phrases that get inserted via the jQuery.extend(XenForo.phrases function and contain font-awesome classes won`t be processed by the font-awesome CSS.

    I`m stuck here as I don`t have enough knowledge to solve this.

    Any help is appreciated.

    thank you - all the best,
  2. Chris D

    Chris D XenForo Developer Staff Member

    It's easier than this. Add this to EXTRA.css:

    .privateControls abbr.DateTime:before
        content: "\f017";
        font-family: FontAwesome;
        padding-right: 2px;
    Andrej and Steve F like this.
  3. sinucello

    sinucello Well-Known Member

    Thanks Chris. It`s almost perfect. The problem is, that older timestamps only contain the date and not the time. Also the clock icon should be displayed before the time. So I need to address the time within the abbr-element and insert the icon before it. But as soon as I wrap the time into some HTML like <i>{time}</i> , the <i> will get special char-ed and the CSS rule .messageUserInfo abbr.DateTime i:before won`t work.
  4. sinucello

    sinucello Well-Known Member

    I`m done with it now. Used the calendar icon and some little tweaks:


    .messageUserInfo abbr,
    .messageUserInfo span.DateTime {
        position: relative;
        padding: 5px 10px 5px 10px;
        line-height: 16px;
        font-size: 10px;
    .messageUserBlock .arrow span {
        border-left-color:#d7edfc !important;
    .messageUserInfo span.DateTime:before,
    .messageUserInfo abbr.DateTime:before,
    .message .privateControls span.DateTime:before,
    .message .privateControls abbr.DateTime:before
        content: "\f073";
        font-family: FontAwesome;
        padding-right: 2px;
    Sunka and Chris D like this.
  5. Sunka

    Sunka Well-Known Member

    @sinucello I tried your code in Extra.css but result is only awesome font before post time, and post time is still under post.
    What I am doing wrong.
    I like the way you move post time above avatar
    sinucello likes this.
  6. sinucello

    sinucello Well-Known Member

    sorry, I forgot to add the changes I made to the "message_user_info" template:
    Edit template "message_user_info"
    find the line "<div class="avatarHolder">"
    add "<xen:datetime time="$post.post_date" />"
    before it.

    Or even better: create a template modification ( /admin.php?template-modifications/add ) for it.
    Sunka likes this.

Share This Page