SMF 2.1 RC4 - Minor improvement for .bbc_link class

Started by Antechinus, August 29, 2021, 06:13:21 PM

Previous topic - Next topic

Antechinus

There's a better way of handling this class these days. The bottom border was good because it improves legibility, due to being clear of any descenders, but of course it's a PITA for linked images, so needs jQuery to sort that out.

There's good support for text-underline-position now, which basically makes text-underline behave like a bottom border. Supported in pretty much everything except Firefox/Android and Safari/iOS.

I suspect those two will also end up supporting it fairly soon anyway (or at least FF/Android will). At the moment FF/Android and Safari/iOS will ignore text-underline-position, and just treat it like a standard underline. Which is still not too bad (colour can still be set to anything you like) and means there's no need to frig around with javascript to fix linked images (because images are not text, so do not get text-decoration applied).

So, suggestion:
Code (index.css - Find) Select
.bbc_link {
border-bottom: 1px solid #a8b6cf;
}
Code (index.css - Replace) Select
.bbc_link {
text-decoration: underline #a8b6cf;
text-underline-position: under;
}

Code (index.css - Find) Select
.bbc_link:hover {
text-decoration: none;
border-bottom: 1px solid #346;
}
Code (index.css - Replace) Select
.bbc_link:hover {
text-decoration: underline #346;
}

Code (theme.js - Find) Select
// tooltips
$('.preview').SMFtooltip();

// find all nested linked images and turn off the border
$('a.bbc_link img.bbc_img').parent().css('border', '0');
Code (theme.js - Replace) Select
// tooltips
$('.preview').SMFtooltip();

Mick.

Oooooooo nice find. I always wanted to add a fancy underline using js but could never make them to work as expected. Anyhow, this is a good find. Imma use it  8)

Antechinus

I'm currently running this in my live light variant override:
.bbc_link:link, .bbc_link:visited {
text-decoration: underline #a8b6cf;
text-underline-position: under;
border-bottom: 0;
}
/* NOTE: divs need 4px bottom padding for this. */
.bbc_link:hover, .bbc_link:focus, .bbc_link:active {
text-decoration: underline double;
border-bottom: 0;
}

Just note the comment there. To work visually with any parent that has hidden or auto overflow, the bottom padding needs to be at least 4px. Standard 2.1 .signature code is an example. It needs a little more bottom padding for this to work. Otherwise the descenders are too close to the limit of the parent, so the underline @ position under gets hidden. ;)

Mick.

[from mobile]


Can we add a height to it? I see you're not using border-bottom. I'd like to figure out a height with a minus margin top so its behind the link on hover. You know, with a nice hardly opacity background. I'm out to dinner but I think imma mess with this again. Seen some webs out there with this fancy trick.

Antechinus

You can set the thickness of the underline easily. You just add the thickness you want in whatever units you feel like using. And yes you can use translucent if you want too (rgba, or eight digit hex). Example:

.bbc_link:link, .bbc_link:visited {
text-decoration: 4px underline #a8b6cf44;
}

4 px thick, will sit behind descenders, and about 25% or so opacity.

Advertisement: