Changing useron/useroff images in display.template

[spiros]

Changing useron/useroff images in display.template

I can see in my display.template:

Code Select Expand

// 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>' : '';


And in Load.php

Code Select Expand

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

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

Code Select Expand

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

I tried to do something like this:

Code Select Expand

', $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>' : '';

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.

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 Select Expand

// 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>';
}
}

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 Select Expand

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

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

[spiros]

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

Thanks about the info on screen readers. I had no idea about it and was an incentive to read this about the title tag being, oh, not so good. I am all in for accessibility, though.

[spiros]

Just checked:

PHP Syntax Check: Parse error: syntax error, unexpected '$message' (T_VARIABLE), expecting ',' or ';' in your code on line:

Code Select Expand

<i class="fas fa-circle" ,' $message['member']['is_online'] ? 'style="color:green;' : 'style="color:gray;', '>', $message['member']['online']['text'], '</i>

[Shambles]

Swap round the first comma and single quote

Code Select Expand

<i class="fas fa-circle" ', $message[ ...

[spiros]

Thanks! Testing the code, the output was 4 gray bullets.

[Antechinus]

Nifty. I wonder how it did that. Gotta be good though. You'll certainly know when they're online.

Since there is only one bullet in the markup I gave you, I would say there have to be multiple instances in your template.

[Antes]

Try this ? -pure CSS-

Code Select Expand

// 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'] . '">' : '', '<span class="', $message['member']['online']['is_online'] ? 'on' : 'off' ,'"></span>', $context['can_send_pm'] ? '</a>' : '';

Code Select Expand

/* On/Off Icons (User) */
.on, .off {
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 1px solid transparent;
   vertical-align: middle;
}
.on {
   background: #89e75a;
   border-color: #74d246;
}
.off {
   background: #a7a2a2;
   border-color: #969292;
}

Alternative
You can setup the system as is, and use

Code Select Expand

<i class="fas fa-circle ', $message['member']['online']['is_online'] ? 'on' : 'off' ,'"></i>

Code Select Expand

.on {
   color: #89e75a;
   background: #89e75a;
   border-color: #74d246;
}
.off {
   color: #a7a2a2;
   background: #a7a2a2;
   border-color: #969292;
}

[spiros]

Wow, Antes, just tested the pure css option, this is awesome! I believe this should become the default in SMF 2.1, why use images when one can use css?

[Antes]

Wow, Antes, just tested the pure css option, this is awesome! I believe this should become the default in SMF 2.1, why use images when one can use css?

https://github.com/SimpleMachines/SMF2.1/commit/26151b15af8403430a35fd8c333c75a3a0fc4251 (6 years ago)
&
some other commits 3 years ago to make sure it looks even better

[spiros]

Wow, well done! I think next in line should be the default Message icons (like Standard, Thumb, etc), star icons (in user member level badges) and the sort icons (up/down) in multiple places.

I can also see some similar instances in PersonalMessages.template.php

Code Select Expand

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />';

echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

And Profile.template.php

Code Select Expand

echo '<div class="pfC">
<div><span id="userstatus" style="', $context['member']['online']['label']=="Online" ? 'color:#5abc0a' : '', '">', $context['can_send_pm'] ? '<a href="' . $context['member']['online']['href'] . '" title="' . $context['member']['online']['label'] . '" rel="nofollow">' : '', $settings['use_image_buttons'] ? '<img class="online_img" src="' . $context['member']['online']['image_href'] . '" alt="' . $context['member']['online']['text'] . '" align="middle" />' : $context['member']['online']['text'], $context['can_send_pm'] ? '</a>' : '', $settings['use_image_buttons'] ? '<span class=""> ' . $context['member']['online']['text'] . '</span>' : '';
echo '
</span></div>';

[Antes]

You can always check Bastion or Lunarfall and see how I dealt with those issues... (it kinda gets tiring when you are catching all those alone), but if someone finds broken image/ or non-converted image in my theme(s) - I'll fix it.

* I do recall that I removed jScript selector of post icons in post (display) section and converted them into FA icons as well as custom icons -wasn't pleasant but somebody has to do it-

[spiros]

Great, I will check them! Yes, it is sad not many other people share the same imageless vision -:)

Do you have a demo of your themes?

[Antes]

Great, I will check them! Yes, it is sad not many other people share the same imageless vision -:)

Do you have a demo of your themes?

Hopefully I'll setup one today because I keep forgetting that... https://www.wowsnips.xyz/smf2 - https://www.wowsnips.xyz/smfnext (not yet setup but you can check in later).

[spiros]

Great, thanks!

The variable user_info is not defined by the way, giving:

Code Select Expand

8: Undefined variable: user_info
File: /Display.template.php
Line: 312

Maybe it is SMF 2.1-specific?

[Antes]

just add $user_info to global in the func.