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

Welllll, having just posted that about the message index, it occurred to me that really the only problem is the default quick moderation options (checkboxes or icons over at the right). Those are a bit of a mongrel to deal with without rewriting a lot of the templating. I could do it easily enough, but don't want to for this little project.

However, the icons/checkboxes are really the only issue. So, if I simply force dropping of those via a media query then the problem literally disappears. :D It obviously means some loss of functionality for mods and admin on small screens  but I think they can put up with that (would still be available on 800 and up).

All the in-topic moderation options would still be available, and those are pretty effective most of the time. AFAIK the ones on the message index are only ever used if you have to get rid of a large stack of spam posts, or very occasionally if you want to mass move a series of posts to a new board or category you've just created. Back when I was adminning I hardly ever used them.

So I think I'll do it that way. :)

(Oh and actually, I have been doing some markup changes here and there. Not big ones, just ones that it would be a bit bonkers to not do.)

Antechinus

Got the message index sorted. Frankly I like the cleaner look so much that I could even happily use it on desktop.

This then gave me an idea about the old memberlist mod. As long as you're happy with the default arrangement of elements within each table row, there's no reason why the same presentation as the mod couldn't be done on entirely standard markup. The benefit of doing it that way would be that it should automatically be compatible with any mods that insert extra stuff into the memberlist. It might need a couple of custom tweaks for presentation details, but it should all basically work. I whipped up a quick test as a proof of concept, and at the moment I can't see anything wrong with it.

Biology Forums

Just installed Curve_CSS3 responsive_beta_5.zip. Thanks for assisting. Now if only they could add this to THIS forum, we'd have some mobile usability.

Antechinus

Glad you like it. I've been having fun trying out ideas.

They're pretty committed to not using modified themes on this site, on the basis that the home site should run what the software actually ships with.* Also, given the SMF name would be on the line, they wouldn't run it without thoroughly testing it themselves, and they have enough testing to do already (2.1, security patches for 2.0.x, etc). So although I'm pleased that you like the thing, it's not likely to be running on this site.

Speaking of testing, there will be another version out soon which has some bug fixes. For example, I found the hamburger was disappearing from view when using keyboard activation of the menu links. If you start tabbing away with b5 and light the hamburger up, but then keep tabbing without actually opening the menu, the hamburger vanishes. Took me a while to figure that out, but it's sorted now.

*Although this started as a very small CSS-only change to get rid of the main_block.png, it has rather gone beyond that. The template changes (even though they're not huge) would rule this one out as a site theme under standard SMF policy.

Biology Forums

QuoteThey're pretty committed to not using modified themes on this site, on the basis that the home site should run what the software actually ships with.* Also, given the SMF name would be on the line, they wouldn't run it without thoroughly testing it themselves, and they have enough testing to do already (2.1, security patches for 2.0.x, etc). So although I'm pleased that you like the thing, it's not likely to be running on this site.

What the team should do is give us the option to change our theme to the mobile version. Why do they have to collectively punish those that use the website regularly?

What I didn't like about the theme you modified was the popup that appears when you click (go to top). I think that's unnecessary.

Quote*Although this started as a very small CSS-only change to get rid of the main_block.png, it has rather gone beyond that. The template changes (even though they're not huge) would rule this one out as a site theme under standard SMF policy.

This was a discussion that needed to happen. Something that should have been discussed in 2015 and implemented then. The graphical interface in an embarrassment to the online community - SMF has become a laughing stock because of their outdated theme

Antechinus

The link that the "Go top top" redirects you to is #index_top. That is coded to act as a skipnav link. See https://webaim.org/techniques/skipnav/ for an explanation. Particularly this part:

QuoteWithout some sort of system for bypassing the long list of links, some users are at a huge disadvantage. Consider users with no arm movement, who use computers by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys.

We used to have someone in exactly that situation regularly using this site. I've also run into people who rely on screen readers. They're not just hypothetical, and they do browse on mobile these days.

A skipnav link is something SMF should, IMO, have by default and naturally I coded it in line with AIM recommendations. It seemed an obvious thing to do with a target link for the top of the page (dual use FTW). In any browser I've tested (admittedly not many) clicking the "Go to top" link will send you there but will not actually set focus on the target link, which means you won't see it unless you start using the Tab key to progress through the page's sequence of links, in which case it will appear as it should. This seems to be standard browser behaviour, AFAICT.

You seem to be saying that your device or browser (whatever on earth that may be) is actually setting focus on the target link, causing the skipnav to appear even when you are not using keyboard navigation via the Tab key. If that is the case it's not hard to fix. I can simply include another anchor (with no fancy stuff attached) directly before the skipnav, and set that new anchor link as the target of "Go to top". That way the skipnav will still be functional, but it will be impossible for your device to set focus on it if you simply want the top of the page.

Antechinus

Ok, if you want a fix for that one (will be in the next beta too) you can do this:

Index.template.php:

Code (Find) Select
<body><a href="#after_linktree" id="index_top">', $txt['index_top'], '</a>';

Code (Replace) Select
<body>';

Code (Find) Select
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

echo '
<div id="wrapper" ',!empty($settings['forum_width']) ? 'style="width: ' . $settings['forum_width'] . '"' : '', '>


Code (Replace) Select
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Hidden "Go to top" target anchor, followed by skipnav, followed by forum wrapper, then header.
echo '
<a id="index_top"></a>
<a href="#after_linktree" id="skip_nav">', $txt['skip_nav'], '</a>
<div id="wrapper" ',!empty($settings['forum_width']) ? 'style="width: ' . $settings['forum_width'] . '"' : '', '>


Index.css:

Code (Find) Select
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */
#index_top, #menu_skip {
position: absolute;
z-index: 9;
top: 0;
left: -99em;
padding: 9px 1em;
background-color: #fff;
color: #444;
font-weight: 700;
text-decoration: none;
border: 3px solid #fd9604;
border-radius: 0 0 8px 8px;
box-shadow: 0 3px 3px rgba(0,0,0,.6);
}
#index_top {
border-top: 0;
border-left: 0;
border-radius: 0 0 8px;
}
#index_top:focus, #menu_skip:focus {
left: 0;
outline: 0;
}


Code (Replace) Select
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */
/* Target anchor for "Go to top" button. */
#index_top {
position: absolute;
top: 0;
}
/* Skip navigation links, as per AIM standards. */
#skip_nav, #menu_skip {
position: absolute;
z-index: -9;
top: 0;
left: 0;
padding: 9px 1em;
background-color: #fff;
color: #444;
font-weight: 700;
text-decoration: none;
border: 3px solid #fd9604;
border-radius: 0 0 8px 8px;
box-shadow: 0 3px 3px rgba(0,0,0,.6);
opacity: 0;
transition: z-index 1s step-end, opacity 1s ease-in;
}
#skip_nav {
border-top: 0;
border-left: 0;
border-radius: 0 0 8px;
}
#skip_nav:focus, #menu_skip:focus {
z-index: 9;
opacity: 1;
transition: z-index .1s step-start, opacity .1s step-start;
}


That should make it behave nicely for you. It also tweaks the skipnav to have a fade-out when focus is removed, which is a trick that AIM use and recommend but which I had missed before (it means someone tabbing quickly has less chance of missing the skipnav if they're not expecting to see it). So, this should be better for everyone. :)

Biology Forums

Thanks, Antechinus. The changes are great!

An update. The beta 5 release worked just fine for me, my comment was based on it being an added feature. I've never ever seen it on any other forum in my life. In fact, it's not even on popular social media apps, where if you click "go to top", a link appears saying "skip nav". I'm not sure where you got this idea, but it's completely strange to me.

QuoteWe used to have someone in exactly that situation regularly using this site. I've also run into people who rely on screen readers. They're not just hypothetical, and they do browse on mobile these days.

I know there might be 1 person in every n-thousand that may need accommodations, but as webmasters we need to accept that we cannot accomodate 100% of the population; 99.9% is good enough in most cases.

Antechinus

I got this idea from web standard accessibility guidelines. :D It has been part of them for at least a decade now. It's not hard to accommodate, and in a lot of situations it's even a legal requirement. Not so much for the average social forum, but if it's a business site then it definitely becomes a consideration.

In this case all that was required was two anchors and a little bit of CSS. It's not just handy for disabled people. Power users often use keyboard navigation too, even if they are perfectly capable of using a mouse.

Antechinus

Ideas for this are still percolating. I've been tweaking the message index some more, to get an arrangement that looks good to me on all screen widths without requiring spaghetti code. This one works with minimal CSS and mostly default markup, and IMO gives a good arrangement that flows well. It still needs a bit of adjustment for break points, and I can probably cut the CSS down a bit too. It may also benefit from removing some information on narrow screens (open to feedback on that, easy to change).

It did require a couple of minor edits to the template: one to remove the hard-coded line break in the stats cell, and one to add a conditional class to the last cell in each row (for the quick moderation options). I don't think it's worth allowing the icons option for quick moderation. It's arguably not as good for functionality as the checkboxes, even on desktop, and the clutter of tiny icons can't be good on a phone. So I've left the icons option in for now, but hidden by display: none; if selected in profile, just in case someone has the time and inclination to sort out a viable solution for them later.

I decided last night that the new post indicators were better as position: absolute; and offset to the left over the topic icons. This allows the topic headings to stay perfectly aligned with or without new content, and gives a good use for the space taken by the standard icon columns. The hover/focus style matches the default buttons.

I've also added the same style to the last post icons (basic CSS padding added to the standard gif, with background colour and border-radius). It's the same general idea as the way I handled the Inline Modify image, when I transferred that to the quickbuttons list. It gives a much larger and more obvious target for selecting the last post link, without requiring custom icons (this same tweak has also been added to such things as the help icons and tiny upshrinks strewn around the interface).

I think this thing is very close to being fully sorted. :)

Biology Forums

Hi Antechinus, there's an issue with adding logos. If you add a logo, half of it is hidden, and isn't responsive either.

Looking forward to testing the next beta edition!

Antechinus

Aha! Yep I hadn't given those any thought yet. I know how to fix that. Will sort it later. :)

Antechinus

Quick fix:

Find:

/* The framing graphics. */
#header {
padding: 2px;
background-color: #fff;
border: 1px solid #aaa;
border-bottom: 0;
border-radius: 8px 8px 0 0;
}
#header .frame {
position: relative;
background-image: linear-gradient(#c8d6e7, #fff);
padding: 6px 20px 0 20px;
border-radius: 4px 4px 0 0;
}
#header .frame::after {
position: absolute;
display: block;
content: "";
top: 48px;
bottom: 0;
left: 5px;
right: 5px;
background-image: linear-gradient(#becbda, #fff);
border-radius: 6px 6px 0 0;
}
#top_section {
min-height: 60px;
}
/* The main title, restricted in line height. */
.forumtitle {
line-height: 45px;
font-size: 1.8em;
font-family: Geneva, verdana, sans-serif;
float: left;
}
/* Float these to the right. */
#siteslogan, #smflogo {
float: right;
line-height: 3em;
}
/* Upshrink image tweaks. */
#upshrink {
float: right;
margin: 1em;
}
/* Same for the SMF logo. */
#smflogo {
margin: 0 0 0 1em;
}


Replace:

/* The framing graphics. */
#header {
padding: 2px;
background-color: #fff;
border: 1px solid #aaa;
border-bottom: 0;
border-radius: 8px 8px 0 0;
}
#header .frame {
position: relative;
padding: 0 20px;
background-image: linear-gradient(#c8d6e7, #fff);
border-radius: 4px 4px 0 0;
}
#header .frame::after {
position: absolute;
display: block;
content: "";
top: 48px;
bottom: 0;
left: 5px;
right: 5px;
background-image: linear-gradient(#becbda, #fff);
border-radius: 6px 6px 0 0;
}
#top_section {
position: relative;
z-index: 1;
overflow: auto;
}
#top_section img {
max-width: 100%;
height: auto;
}
/* The main title, restricted in line height. */
.forumtitle {
display: inline-block;
line-height: 6rem;
font-size: 2.4rem;
font-family: Geneva, verdana, sans-serif;
}
/* Float these to the right. */
#siteslogan {
float: right;
padding: 10px 0;
line-height: 3em;
}
/* Upshrink image tweaks. */
#upshrink {
float: right;
margin: 9px 0;
}


There was a z-index issue with the pseudo that was used to mimic the default header gradient.

Antechinus

Damn, now I'm thinking about logos. :P

One of the most common requests is "How can I put a full-width banner on the default theme?". Which I and others have written instructions for, but which could still be so much simpler. It's so simple that it could have been done back in 2.0. RC days and, even IE6 would have been ok with it.

#top_section {
    position: relative;
}
#siteslogan {
    width: 300px;
    position: absolute;
    top: 1em;
    right: 1em;
    text-align: right;
}
.forumtitle img {
    width: auto;
    height: auto;
    max-width: 100%;
}


This automatically takes the site slogan/smf logo/upshrink button out of the way of everything else in #top_section. That in turn means you can just throw any damned banner image you like at the theme setting in admin and it will just plain work. It will always fit the header on any size screen, providing you use an image wide enough for large monitors. The slogan and upshrink will just sit on top of it without pushing anything out of place.

Oh yeah: no need to float anything either, so no need to write code for floats or to clear floats, and no need to worry about how to centre the logo if they want to do that.
Just put .forumtitle {text-align: center;} anywhere in the CSS file.

This is such a no-brainer, and would have saved so many support requests, that it really should have been part of the standard CSS. :P

Which it wasn't, because some muppet was too busy debugging things in IE6 and RTL languages to think of it at the time. But no other muppets had the sense to think of it either, so this muppet is going to blame them. :D

Anyway, I will add it to this revamp thing.

Arantor

max-width didn't come along until IE8 though...

Seriously though, great work.

Antechinus

Good point. I had forgotten some things about IE6. It would have had to have hidden overflow as a backup. That would have worked (although the image would still not have scaled for height). The absolute positioning of the slogan/upshrink would have been fine too. It's just one of those ideas that's so obviously good for idiot-proofing, once I thought of it, that I'm amazed it was never considered for default. It's the ideal way to prevent newbies from breaking their default theme layout.

The other thing that has occurred to me now is you have an admin setting for choosing to show an image or a slogan at top right, but what if you don't want either? Sure, you can swap the default SMF logo for a blank transparent image and get around it that way, but it seems a bit bonkers to have to do that. It would make more sense to have three options: SMF logo (or custom replacement image), text slogan, or nothing at all (ideal if running a full width custom banner in the h1).

ETA: Come to think of it, stuff it. I'm going to bite the bullet and do something that's been bugging me for a while now.

The basic index.template.php markup is cluttered and somewhat brittle. The full-width banner thing is a good example. The header section is marked up as #wrapper > #header > .frame > (#top_section + #upper_section + #main_menu). This means that if someone wants a full-width banner they will probably want to get rid of the side padding between #header and .frame, but then that requires editing padding for the other children of .frame. It's not the end of the world, but it's a nuisance and it can be made easier.

If the markup is changed to just #wrapper > #header > (#top_section + #upper_section + #main_menu) then suddenly any change to padding in #top_section leaves the other elements unaffected. Which is good. Furthermore, it has just occurred to me that it is easy to set #top_section up perfectly for full-width banners. All that it needs is 0 padding all round, with text-indent: 1em; on .forumtitle. This will set any header text in nicely from the left edge of the header, but will have no effect on an image. So if you just have the default setting of the forum name in text form it will look right, and if you suddenly switch that for a massive banner it will also automatically look right. No code edits required at all. Totally n00b-friendly. :) 

Antechinus

Ok, got it sorted. Turns out it was slightly trickier than I expected with the text-indent. The point I'd forgotten is that text-indent only works on inline elements that are the direct children of a block level element.

In other words, setting text-indent 0.7em on the h1 will indent the text as expected. It does this by shunting the anchor over by 0.7em and it all works. If you just had plain text directly inside the h1 (no anchor wrapping the text) that would also work.

However, if you set the text indent on the anchor, and the anchor is at its default inline display, then the text will not be indented. Now it would be possible to get around this by setting the anchor to display: block; but the drawback of that is someone might not want it extending across the full width of the header (for example, if they only want a smallish banner). Leaving it at the default inline display allows it to shrink to wrap any size banner, which is good.

You might think the next dodge would be to declare the anchor as display: inline-block; but there's a catch to that too. While it will certainly make the text indent work, and will also allow the anchor to shrink to the size of the banner, inline-block has an automatic right margin of approximately 4px (one character space at standard font settings). This means that if your image expands to 100% width the 4 px margin will be added to that, giving a total width slightly over the desired 100% and introducing a minor break in your layout.

The solution is easy though. You simply add the text-indent to the h1, and then add a matching negative left margin to the image itself. The result is the text will sit where you want it, when you have text, and when you use an image it will never exceed 100% width and will have perfect lateral alignment. And, since the old .frame has gone now, if you do want to adjust any padding or whatever in the #top_section (for example, if you want a wider frame around your banner) it can be done completely independently of the user/news section.

Code looks like this:

/* H1 - The main forum heading, linked to the home page. */
/* In default text format. */
#forum_title {
margin-bottom: 20px;
line-height: 2em;
font-size: 2em;
text-indent: .7em;
}
/* As optional image banner. */
/* Note: For a full-width banner to fit the header perfectly, */
/* the negative left margin must match the text-indent above. */
#forum_banner {
max-width: 100%;
height: auto;
margin-left: -.7em;
border-radius: 6px 6px 0 0;
}
/* Default SMF logo, or site slogan, at upper right. */
#siteslogan {
display: inline-block;
position: absolute;
top: 10px;
right: 1em;
color: #346;
font-weight: 700;
line-height: 3em;
}
/* Header collapse/expand icon. */
#upshrink {
float: right;
padding: 7px;
border: 2px solid #0000;
border-radius: 50%;
}
#upshrink:hover {
background: #5a6c85;
border-color: #fff;
}


Screenshots show what happens when you switch the admin setting from text title to full-width image. The result is automatic. No tweaking of CSS required. :)

Gwenwyfar

But Antechinus: wah wah wah YOU JUST SHRUNK EVERYTHING DOWN AND YOU HAZ NO IDEA WHAT YOU DOING, DIS IZ NOT RESPONSIVE

... as someone here once told me back in 2015. I find it funny that your messageindex is almost the same. Although my plan was to not edit the html.

(And yeah, I'm still bitter about that, apparently anything I ever do is a stupid idea anyway).

[/endrant]

Sorry to disturb your topic, carry on, there's some nice stuff in ther :D
"It is impossible to communicate with one that does not wish to communicate"

Antechinus

I have no idea what you are talking about. :D

I started off intending to not edit the markup, but honestly there are just too many silly things that are so easy to fix. It just doesn't really make sense to not do some minor markup changes. Less stress all round.

Gwenwyfar

It made sense for the intended purpose and the context. But it doesn't matter anyway.
"It is impossible to communicate with one that does not wish to communicate"

Advertisement: