so I added

a:link {
text-decoration: underline;
}

to "Custom CSS" in Mastodon's site settings in the admin section but a:link is too general of a selector, it underlines things like profile names which seems unnecessary

what would be a selector for links that are in a post only?

Follow

so thanks to @hierarchon

a.status-link:not(.mention) {
text-decoration: underline;
}

underlines links in posts that are not user mentions or hashtags

I am deploying this bit of custom CSS on Ten Forward as well.

BTW since I'm sort of learning CSS myself

the "not" there is a negation pseudo-class

"The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class."

developer.mozilla.org/en-US/do

also someone more creative than me probably has a better styling idea than the browser's default style for link underlining that might match the default Mastodon web UI's aesthetic

but it doesn't look bad as it is now

so for Mastodon admins:

Administration -> Site settings -> Custom CSS

Since this is something that can be done on the front end, masto.host based instances should be able to do it as well.

so for Mastodon users that are not admins:

Ask your instance administrator about adding the custom CSS.

Alternatively, you can use a browser extension like Stylus to apply a custom style to your instance.

In general, Stylus is a very powerful extension that can be used for a lot of things

Google Chrome:
chrome.google.com/webstore/det

Mozilla Firefox:
addons.mozilla.org/en-US/firef

there is a repository of user created styles at

userstyles.org/

For example, I use a "Github Dark" style to have a dark theme on Github. It makes reading Github issues with nonsensical arguments much easier on the eyes.

@staticsafe Coincidentally there is a PR for Mastodon to underline links that several people (myself included) have been advocating for just today: github.com/tootsuite/mastodon/

tl;dr underlining is good #a11y, so I'd keep it that way 😁 👍 👏

@staticsafe

An awesome upgrade that Hackers.town will gladly add to it's config... like V'Ger.

@staticsafe
Didn't that app inject malicious code into the users' browsers? I swear I read that somewhere.

@staticsafe i changed the colour to hlpe it stand out from names but that's about it

if it were up to me i'd make it brutalist af but then the 3 people who are also here would be like >:C at me

@staticsafe @hierarchon An extension to this idea:

a.status-link:not(.mention) {
text-decoration: underline;
text-decoration-color: #778899;
}
a.status-link:not(.mention):hover {
text-decoration-color: #ffffff;
}

This allows the underline colour to change when you're hovering it. Adjust colours to taste.

@staticsafe

Hi Sadiq! Just noticed that this doesn't underline links outside of the tweetdeck view, for example if people open a single post/thread in a new tab.

In addition to your suggestion I've added:

div.status__content a:not(.hashtag):not(.mention) {
text-decoration:underline;
}

Which seems to cover things :)

@hierarchon

@blueberrysoft @staticsafe @hierarchon Just started using this on my site, and I like it, and was wondering why, and figured out it was because I'm so colorblind I actually _was_ having trouble seeing links. :(

Sign in to participate in the conversation
Zombocom

staticsafe's personal Mastodon instance.