Has anyone improved /main_block.png to have transparent rounded edges?

Started by Biology Forums, August 30, 2019, 11:35:58 AM

Previous topic - Next topic

Antechinus

Ok, hauled this thing out of the swamp again. Since Bloc (smartypants) said he'd got the first letters of usernames working as fallback avatars without much code, I had a think about it. Turns out to be a no-brainer.

All it needs is something to pick up the lack of an avatar image, and then set an extra class on the anchor and call the member name as anchor content. So quick test PHP/HTML in Display.template.php looks like this:

// Show the member's avatar?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">
', $message['member']['avatar']['image'], '
</a>';
}
else
{
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar no_avatar">
', $message['member']['name'], '
</a>';
}


And CSS additions are just:
.poster_avatar.no_avatar {
height: 100px;
width: 100px;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto 8px;
padding: 22px 0 0;
background: #738599;
color: transparent;
font-size: 60px;
line-height: 100px;
writing-mode: vertical-rl;
text-align: center;
text-orientation: upright;
text-decoration: none;
border-radius: 50%;
}
.poster_avatar.no_avatar::first-letter {
color: #fff;
}


Which looks like the attached image. No problem. And is a lot easier than the way Discourse did the same job. :P

Of course there has to be a catch, and of course the catch has to be that Microsoft browsers are stupid, and don't support things that every other browser has supported for yonks.

In this case the thing they don't support is text-orientation, which is useful because it stacks the letters of the username vertically and thereby allows text-align: center; to take care of lateral positioning of the visible letter.

MS browsers, which only exist to make other browsers look like sane options, will require a left padding bodge to centre the letter laterally. Which can be done, as the typical only-for-MS-crud declarations we have known and loved since the internet was in nappies, but at the moment I'm not sure I give a rat's. :P

Kindred

DO note that Edge is retired and is replaced with Chromium (this update should be mostly automatic for anyone who is not in a corporate controlled update environment)...   that may have addressed some of the problems with MS browsers.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Excellent. :) I've been thinking for years that MS should get the hell out of trying to make browsers, and leave that to people who are good at it.

Antechinus

Turns out Bloc was smarter than I was this time, but then he cheated by learning more PHP than I did.
Best way to do it seems to be to use PHP to filter out the first character of the username, which then saves on CSS.
Current template code looks like this:

Code (Display.template.php) Select
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">
', (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image'])) ?
$message['member']['avatar']['image'] : '<span class="no_avatar">'. (substr($message['member']['name'],0,1)) . '</span>', '
</a>';


With CSS being:

Code (index.css) Select
.no_avatar {
display: block;
height: 80px;
width: 80px;
margin: 0 auto 4px;
background: #738599;
color: #fff;
font-size: 56px;
font-family: roboto, verdana, sans-serif;
line-height: 80px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
border-radius: 8px;
}
/* 768px at standard browser settings. */
@media screen and (max-width: 48em) {
.no_avatar {
height: 40px;
width: 40px;
font-size: 28px;
line-height: 40px;
border-radius: 4px;
}
}
/* 640px at standard browser settings. */
@media screen and (max-width: 40em) {
.no_avatar {
height: 44px;
width: 44px;
font-size: 30px;
line-height: 44px;
border-radius: 5px;
}
}


Which can probably be simplified a bit, once I go back and sort the whole file instead of just tacking test code on the end. :)

lurkalot

Nice.  8) I have a question though.  Do these "fallback avatars"  change colour dependant on group, like other systems do?

Antechinus

Not at the moment, but I suppose they could. That shouldn't be hard to arrange. Obviously I won't know which groups people are going to use, so couldn't include colours for any and all possibilities. I can include a class for membergroup, and can include colours for default groups, but people would have to do their own CSS for any extra groups they created.

At the moment I'm pondering how best to do CSS sheets for variants, which I think I have figured out, so I'll play with colours by group on the "fallback avs" too.

Antechinus

This works. It's a bit verbose, but I can't really see a cleaner way of doing it. You could try and jam it all into ternaries, but it'd end up a bit of a pig's breakfast. I think the more spacious formatting is more sensible in this case.

Code (Display.template.php) Select
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">';

if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
', $message['member']['avatar']['image'];
}
elseif (!empty($message['member']['group']))
{
echo '
<span class="no_avatar ', $message['member']['group'], '">', (substr($message['member']['name'], 0, 1)), '</span>';
}
elseif ($message['member']['post_group'] != '')
{
echo '
<span class="no_avatar ', $message['member']['post_group'], '">', (substr($message['member']['name'], 0, 1)), '</span>';
}
echo '
</a>';


Then you just do the CSS as:

.no_avatar.Administrator {
background: #d73d00;
}

.no_avatar.Newbie {
background: #dbcc4c;
}


Or whatever colours you happen to prefer. :)

Antechinus

Have expanded this a bit. Turns out you need two different syntaxes: one to deal with fallback avs in Display.template.php and Profile.template.php, and another to deal with fallback avs in index.template.php (ie: the theme header). Gets to be quite fun. :P

Display and Profile call the group name, which depending on what they are called can require escaping some characters. The CSS can still deal with any name under the sun though, as long as it is written correctly. Unicode characters and even emojis are no problem. If you want a poo emoji as your group name, it will still work.

The avs in the theme header have to call the group id number instead, so to deal with a particualr group in all locations requires writing CSS like this:

/* Default groups are set to match the colour of their default "stars". */
/* Note: It is necessary to use two different syntaxes:
one for avatars in Display.template.php and Profile.template.php,
and another for the avatar in the theme header (index.template.php).
These should be kept as pairs in each declaration. */
.no_avatar.Administrator, .no_avatar.group_1 {
background: #d73d00;
}
.no_avatar.Global.Moderator, .no_avatar.group_2 {
background: #006bd9;
}
.no_avatar.Moderator, .no_avatar.group_3 {
background: #80c800;
}
/* These can be split up into different colours, but */
/* each line should be kept as a pair of declarations. */
/* Note that some characters need to be escaped with a backslash. */
/* Default post count groups would also work as .no_avatar.Member for the first syntax, */
/* since they all contain the word "Member" and share the same background. */
/* The expanded version is shown as an example of how to deal with more complex cases. */
.no_avatar.Newbie, .no_avatar.group_4,
.no_avatar.Jr\..Member, .no_avatar.group_5,
.no_avatar.Full.Member, .no_avatar.group_6,
.no_avatar.Sr\..Member, .no_avatar.group_7,
.no_avatar.Hero.Member, .no_avatar.group_8 {
background: #dbcc4c;
}


Template code is now this:

Code (index.template.php) Select
// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<p class="avatar">
<a href="', $scripturl, '?action=profile">';

if (empty($options['show_no_avatars']) && !empty($context['user']['avatar']))
{
echo '
', $context['user']['avatar']['image'], '</a>';
}
elseif ($user_info['groups']['0'] != '')
{
echo '
<span class="no_avatar group_', $user_info['groups']['0'], '">', (substr($context['user']['name'], 0, 1)), '</span></a>';
}
elseif ($user_info['groups']['1'] != '')
{
echo '
<span class="no_avatar group_', $user_info['groups']['1'], '">', (substr($context['user']['name'], 0, 1)), '</span></a>';
}
else
{
echo '
<span class="no_avatar">', (substr($context['user']['name'], 0, 1)), '</span></a>';
}

echo '
</p>


Code (Display.template.php) Select
// Show the member's avatar?
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '" id="msg_', $message['id'], '_poster_avatar" class="poster_avatar">';

if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{
echo '
', $message['member']['avatar']['image'], '</a>';
}
elseif (!empty($message['member']['group']))
{
echo '
<span class="no_avatar ', $message['member']['group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
elseif ($message['member']['post_group'] != '')
{
echo '
<span class="no_avatar ', $message['member']['post_group'], '">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}
else
{
echo '
<span class="no_avatar">', (substr($message['member']['name'], 0, 1)), '</span></a>';
}


Code (Profile.template.php) Select
// Show avatars, images, etc.?
if (empty($options['show_no_avatars']) && !empty($context['member']['avatar']['image']))
{
echo '
', $context['member']['avatar']['image'];
}
elseif (!empty($context['member']['group']))
{
echo '
<span class="no_avatar ', $context['member']['group'], '">', (substr($context['member']['name'], 0, 1)), '</span>';
}
elseif (!empty($context['member']['post_group']))
{
echo '
<span class="no_avatar ', $context['member']['post_group'], '">', (substr($context['member']['name'], 0, 1)), '</span>';
}
else
{
echo '
<span class="no_avatar">', (substr($context['user']['name'], 0, 1)), '</span>';
}


And before anyone asks: personally I'm not a fan of avs on the board index and message index, so those are not (this means not) happening. If you want those, you can code them yourself. There are plenty of examples around.

Diego Andrés

I'm not in favor of using style in the template but would be easier for coloring the background since you can use the group color in there as a variable too and many ppl use it to customize the poster info sometimes

SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

I'd rather leave it in the CSS. ;) They can still edit it if they want to. Thing is you might not want the actual group colour for the fallback avatars. I found that picking something off the group stars, and then tweaking it a bit, gave a better look than just plain CSS red or blue or whatever. This way you can have the fallback avs matching for general looks, but with better colour balance sometimes.

Also, if someone wants fancy stuff like gradients or whatever, easier if it's all in the CSS.

Antechinus

Decided to have a crack at the memberlist too. This is more or less the same presentation as my old memberlist mod, but done on the default tabular markup, so no need for a mod. It has minor markup tweaks (to add in the avatar and a couple of classes here and there) and then CSS to suit.

This is both more flexible than the old mod, due to the use of media queries to set block widths, and should also be better for a11y since it still has all the default table column scopes, etc. It should also accept custom profile fields without much drama (may need slight CSS tweaks). I think it makes more sense this way than trying to drop chunks out of the default table presentation, and it was a bit of fun to set up too. :)

I'm half inclined to do the memberlist sorting options in a similar way to how I did them back on the ancient 1.1.x Outline mobile theme. They make a lot of sense done that way, and it probably wouldn't be that difficult to set up. A bit tricky keeping valid markup with the table, so would have to adapt it slightly, but the general idea should be workable.

https://www.simplemachines.org/community/index.php?action=dlattach;topic=431813.0;attach=174758;image

Antechinus

Did them. Better like this. It's a basic hover drop like the main menu (which will obviously automatically act like a click drop on mobile). This will make it easy to pick a letter on mobile and on desktop. The overall presentation of the memberlist has been tidied up a bit too.

Also changed the up/down buttons. The SMF ones have always annoyed me, because they're never where I want them when I want them. I use this sort of button quite a lot, on any site that has them available, and if the site only has an up button I'm always cursing them for not have a down button as well. And if I can't access them anytime on any page that annoys me too. :P

My preference for desktop is to have them vertically along the left edge of the screen, because on desktop that's the most idiot-proof place for them. I can just casually throw the cursor over that way with my brain in neutral, and in full screen mode the edge is as far as it can go, and somewhere in the top half or bottom half will hit the relevant button.

This isn't so good for mobile devices, due to the often severely-limited screen width, so I've put them at the bottom of the screen. I could have had them at the side on wider screens, changing to the bottom on narrow ones, but that might confuse people when going from portrait to landscape mode.

If I want them at the side on desktop then I, or anyone else, can run a simple override in Stylus. Or a variant could be made to put them at the side, or even a basic user setting could be added to do the job. But at the moment they're just sitting at the bottom. There are no longer any up/down links hiding in the thread pages, etc.

Gonna look at getting another zip done over the weekend. This thing is very close to being worth submitting. :)

Antechinus

Ok feral web denizens: I've got this thing as finished as it is going to get for some time, unless someone finds a particularly nasty bug. I even went nuts and fitted the theme out with RTL support, after grumbling that I wasn't going to. :D

The theme, and the associated page index mod, have both been officially submitted to the Theme Site and Mod Site.

Submission pages are here - Ant's Mutant Curve - and here - Dangerous Marsupial Page Index.

This just happened, so obviously they will take some time to be approved.

I have tested these beasties pretty thoroughly, so they should be safe around children and small animals.

If you are feeling a bit daring and don't want to wait for the official approval, zips for the theme and the mod are attached.

All code in both is totally rippable. Feel free to steal any of it and do wotcha like. :)

Antechinus

Ha. Found a few validation errors in it. Only trivial stuff, which doesn't seem to break anything, but I decided to double check everything and fixed them anyway.

Won't bother putting up another zip at the moment. Funny thing is that the theme site doesn't allow you to upload any corrected zips before the theme is approved. No options for that at all. I can download the first zip I uploaded, but there's no way I can upload a replacement.

So due to that bit of cleverness the approvals peeps are going to look at the contents sometime, and then get back to me and tell me it won't pass coz it has validation errors, at which point I will say "I know that, but your theme site wouldn't let me fix them".

Hey ho. :D

Diego Andrés


SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

Aha. Hidden in the header bar. Same colour as the title. Found it. Good job on the camouflage. :D

Ok, new zip is upped. Ignore the first one. Waste of time. The new one should be good to go.

Sir Osis of Liver

Hey, Ant, where's the current zip?  Installed Curve_CSS3_RC3.14159.zip on a forum 2-3 weeks ago, maybe I'll update it.  Recolored it to match Grasslands Curve variant that forum was using, would rather not have to do it again.  Have another forum using Curve Multi Color, they need responsive and responsive curve mod doesn't work.  Would like to show them your theme (have to recolor for them, too).
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Antechinus

The current (hopefully final, with no errors, coz I can't find any) zip is attached to this post.

Just be aware that it's not going to be totally n00b-proof for mod installation. Most should go in pretty easily, but some will need a little bit of persuasion here and there. I've tested Digger's Highslide mod and Dougie's Inline Attachments mod, and they're fine if you give them a bit of help (will post instructions at some point). Haven't tested many others yet.

If you don't want to update RC3.14159 there's no real need to, since it works anyway. This one just has a few more fancy bits (fallback avs, memberlist, etc) and the support for RTL.

I'm idly messing with a few variants at the moment. In the mood for something simple, now that I've good a good base together. :)

PS: If someone with team permissions could ditch the older zip with the validation errors (first attachment in this post) that would be cool.


Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters


Advertisement: