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

[sinucello]

Hi,

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:

jQuery.extend(XenForo.phrases,
{
...
    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,
Sacha

 

[Chris D]

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

.privateControls abbr.DateTime:before
{
    content: "\f017";
    font-family: FontAwesome;
    padding-right: 2px;
}

 

[sinucello]

Add this to EXTRA.css

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.

 

[sinucello]

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;
    display:block;
    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]

@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]

What I am doing wrong.

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.