Advertisement:

Author Topic: Has anyone improved /main_block.png to have transparent rounded edges?  (Read 36946 times)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #400 on: January 28, 2020, 11:26:28 PM »
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:

Code: [Select]
// 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:
Code: [Select]
.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

Offline Kindred

  • The Mean One
  • Lead Support Specialist
  • SMF Legend
  • *
  • Posts: 60,437
  • Gender: Male
    • Kindred-999 on GitHub
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #401 on: January 29, 2020, 09:52:35 AM »
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.
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."

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #402 on: January 29, 2020, 03:21:19 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #403 on: February 04, 2020, 03:49:04 PM »
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. :)

Offline lurkalot

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,787
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #404 on: February 04, 2020, 06:23:12 PM »
Nice.  8) I have a question though.  Do these "fallback avatars"  change colour dependant on group, like other systems do?

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #405 on: February 04, 2020, 06:32:59 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #406 on: February 04, 2020, 07:48:13 PM »
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:

Code: [Select]
.no_avatar.Administrator {
background: #d73d00;
}

.no_avatar.Newbie {
background: #dbcc4c;
}

Or whatever colours you happen to prefer. :)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #407 on: February 05, 2020, 06:52:27 PM »
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:

Code: [Select]
/* 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.

Offline Diego Andrés

  • On Hiatus
  • SMF Hero
  • *
  • Posts: 3,847
  • Gender: Male
    • DiegoAndresCortes on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #408 on: February 05, 2020, 08:53:51 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #409 on: February 05, 2020, 08:59:26 PM »
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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #410 on: February 05, 2020, 11:14:02 PM »
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

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #411 on: February 07, 2020, 04:35:56 AM »
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. :)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #412 on: February 08, 2020, 04:50:55 AM »
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. :)

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #413 on: February 09, 2020, 06:57:56 AM »
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

Offline Diego Andrés

  • On Hiatus
  • SMF Hero
  • *
  • Posts: 3,847
  • Gender: Male
    • DiegoAndresCortes on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #414 on: February 09, 2020, 07:41:48 PM »
There should be an 'Edit' button on the top left

SMF Tricks - Free & Premium Responsive Themes for SMF.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #415 on: February 09, 2020, 09:08:41 PM »
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.

Offline Sir Osis of Liver

  • SMF Super Hero
  • *******
  • Posts: 11,139
  • We were all equal in the end.
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #416 on: February 09, 2020, 10:33:23 PM »
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).
“The best laid schemes o' mice an' men / Gang aft a-gley.” - Robert Burns

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #417 on: February 09, 2020, 10:50:23 PM »
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.


Offline Sir Osis of Liver

  • SMF Super Hero
  • *******
  • Posts: 11,139
  • We were all equal in the end.
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #418 on: February 09, 2020, 11:33:33 PM »
Is it a theme or a mod?
“The best laid schemes o' mice an' men / Gang aft a-gley.” - Robert Burns

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,668
  • Master of BBC Abuse
Re: Has anyone improved /main_block.png to have transparent rounded edges?
« Reply #419 on: February 09, 2020, 11:37:08 PM »
It's a theme.