Changing useron/useroff images in display.template
I can see in my display.template:
// 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
'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).
<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:
', $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.
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.
Have not tested this live, but I think it will work. It's all done in the template.
// 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:
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.
I'll have to look it up tomorrow... but I replaced the graphic/images with css radius-defined tinted circle. All css....
All css sounds even better. I think that multiple image and icon requests in themes is so last year...
Quote from: Antechinus on May 13, 2020, 06:58:30 PM
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 (https://www.mediacurrent.com/blog/dont-rely-title-attribute-accessibility-seo/) about the title tag being, oh, not so good. I am all in for accessibility, though.
Just checked:
PHP Syntax Check: Parse error: syntax error, unexpected '$message' (T_VARIABLE), expecting ',' or ';' in your code on line:
<i class="fas fa-circle" ,' $message['member']['is_online'] ? 'style="color:green;' : 'style="color:gray;', '>', $message['member']['online']['text'], '</i>
Swap round the first comma and single quote
<i class="fas fa-circle" ', $message[ ...
Thanks! Testing the code, the output was 4 gray bullets.
Nifty. I wonder how it did that. Gotta be good though. You'll certainly know when they're online. :D
Since there is only one bullet in the markup I gave you, I would say there have to be multiple instances in your template.
Try this ? -pure CSS-
// 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>' : '';
/* 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
<i class="fas fa-circle ', $message['member']['online']['is_online'] ? 'on' : 'off' ,'"></i>
.on {
color: #89e75a;
background: #89e75a;
border-color: #74d246;
}
.off {
color: #a7a2a2;
background: #a7a2a2;
border-color: #969292;
}
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?
Quote from: spiros on May 15, 2020, 03:55:38 AM
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 <3
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
// 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
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>';
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-
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?
Quote from: spiros on May 15, 2020, 04:18:34 AM
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).
Great, thanks!
The variable user_info is not defined by the way, giving:
8: Undefined variable: user_info
File: /Display.template.php
Line: 312
Maybe it is SMF 2.1-specific?
just add $user_info to global in the func.