Customizing SMF > SMF Coding Discussion

Changing useron/useroff images in display.template

(1/4) > >>

spiros:
Changing useron/useroff images in display.template

I can see in my display.template:


--- Code: ---// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img class="online_img" src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

--- End code ---

And in Load.php


--- Code: ---'image_href' => $settings['images_url'] . '/' . ($profile['buddy'] ? 'buddy_' : '') . ($profile['is_online'] ? 'useron' : 'useroff') . '.gif',
'label' => $txt[$profile['is_online'] ? 'online' : 'offline']
--- End code ---

And I want to change the icons there for my theme with Font Awesome icons (for on and off respectively).

--- Code: ---<i class="fas fa-circle" style="color:green !important"></i>
<i class="fas fa-circle" style="color:gray !important"></i>
--- End code ---

I tried to do something like this:


--- Code: ---', $context['can_send_pm'] ? '<i class="fas fa-circle" style="color:gray !important" title="' . $message['member']['online']['label'] . '"></i>' : '', '<i class="fas fa-circle" style="color:green !important" title="', $message['member']['online']['text'], '"></i>', $context['can_send_pm'] ? '</a>' : '';
--- End code ---

But is just added two icons that are both visible at the same time.

Antechinus:
Yes, the default coding there is a bit of a pig's breakfast. That's what happens when clever buggers get clever. It confuses everyone else. :P

It's obviously possible it make it do what you want it to do, but I'd have to mess around with it a bit. Will have a look tonight if nobody beats me to it.

Antechinus:
Have not tested this live, but I think it will work. It's all done in the template.


--- Code: --- // Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
{
if ($context['can_send_pm'])
{
echo '
<a href="', $message['member']['online']['href'], '" title="', $message['member']['online']['label'], '">
<i class="fas fa-circle" ,' $message['member']['is_online'] ? 'style="color:green;' : 'style="color:gray;', '>', $message['member']['online']['text'], '</i>
</a>';
}
else
{
echo '
<i class="fas fa-circle" ,' $message['member']['is_online'] ? 'style="color:green;' : 'style="color:gray;', '>', $message['member']['online']['text'], '</i>';
}
}
--- End code ---

You might also want to change it so it switches a class rather than an inline style. That would make it possible to style it in the CSS file rather than everywhere it goes in the templates (Display, Profile, PersonalMessage, etc).

You will need some CSS anyway, because I've put text inside the i tag. The reason is so that people on screen readers will have the indication of whether the member is online or not. This text would have to be hidden from sighted users. The easiest way of doing that is:


--- Code: --- display: inline-block;
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
--- End code ---

Obviously you could remove the text if you weren't worried about users on screen readers.

Kindred:
I’ll have to look it up tomorrow... but I replaced the graphic/images with  css radius-defined tinted circle. All css....

spiros:
All css sounds even better. I think that multiple image and icon requests in themes is so last year...

Navigation

[0] Message Index

[#] Next page

Go to full version