Currently, I am testing this code in GenericMessages.template.php and so far it is working:
// Show avatars, images, etc.?
if (empty($options['hide_poster_area']) && !$ignoring)
{
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']) && $message['member']['online']['is_online'])
$poster_div .= '
<li class="listlevel1 poster_avatar">
<a class="linklevel1" href="' . $scripturl . '?action=profile;u=' . $message['member']['id'] . '">
' . $message['member']['avatar']['image'] . '
</a>
</li>';
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']) && !$message['member']['online']['is_online'])
$poster_div .= '
<li class="listlevel1 poster_avatar">
<a class="linklevel1 blur_avatars" href="' . $scripturl . '?action=profile;u=' . $message['member']['id'] . '">
' . $message['member']['avatar']['image'] . '
</a>
</li>';
And for the css (may be added to custom css):
@media screen and (max-width: 50em) {
.blur_avatars {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
}
The code can further simplified and there should an easier way to inject this css to avatar in messages or elsewhere something like in HLBM addon which I will attempt later.
Modern, Free, Powerful