×

Notice

The forum is in read only mode.
× Keep in mind that suggestions must be within the realm of possibility to be taken seriously.

Posting rules: All registered members can create threads and post to existing ones.

Question Hyperlink visibility

8 years 1 month ago #1 by Arcanist Lupus
  • Arcanist Lupus
  • Arcanist Lupus's Avatar Topic Author


  • Posts: 1820

  • Gender: Male
  • Birthdate: Unknown
    • Is it possible to tweak the hyperlink CSS so that it's easier to see them? It seems like it should be a simple change, but I know better than to assume that it actually is simple.
    "Shared pain is lessened; shared joy, increased — thus do we refute entropy." - Spider Robinson
    8 years 1 month ago #2 by DanZilla
    • DanZilla
    • DanZilla's Avatar


  • Posts: 1648

  • Gender: Unknown
  • Birthdate: Unknown
    • I don't know how it works in the backend with setting it up so the style show in a more visible way... I've taken to applying a blue and underlined style to mine whenever I include one in my posts... Link

    One thing that bugs me is if you add the blue first and then underlined it comes out this way... Link

    but I prefer it to have the blue color to the underlining as well (silly as I am) so I have to make sure I use the underline first and THEN the blue... Link

    and make sure to do it to just the descriptive text and not the URL and all or else you just get it underlined and not blue... Link
    8 years 1 month ago #3 by Kristin Darken
    • Kristin Darken
    • Kristin Darken's Avatar


  • Posts: 3898

  • Gender: Unknown
  • Birthdate: Unknown
    • Ya... unfortunately, all the story lists in the sidebars, the menus, the breadcrumbs, are also all hyperlinks. So, making a 'small' change will change the whole color/focus dynamic of the site. The current shade of brown that links are shown in was chosen specifically because it is neither the color of normal text OR of headings but only the 'on hover' color really jumps out. I'm open to suggestions... I'm just not sure how to work in that many variations of color into this palette without messing things up badly. I imagine a burnt orange and a brick red would work... what else?
    Fate guard you and grant you a Light to brighten your Way.
    8 years 1 month ago #4 by GrimGrendel
    • GrimGrendel
    • GrimGrendel's Avatar


  • Posts: 243

  • Gender: Female
  • Birthdate: Unknown
    • How about darkgoldenrod (#b8860b)? With hover maybe #f3bf3f in the same pallete? Visibly lighter, both as regular text and on hover.

    And if this change is only for inside the forum messages, maybe the following selector would work?
    a[class=bbcode_url]
    (ie. Exactly bbcode_url class, no more no less)
    That would select only those links in forum posts, and leave the sidebar menus untouched.
    Up for review: Magpies 1 - Flock (Part 1)
    8 years 1 month ago #5 by Arcanist Lupus
    • Arcanist Lupus
    • Arcanist Lupus's Avatar Topic Author


  • Posts: 1820

  • Gender: Male
  • Birthdate: Unknown
    • Hm.... Well, a contrasting color definitely won't work, then. And even something like underlining would make the hyperlink heavy sidebars look busy. GrimGrendel's suggestion of darkgoldenrod looks pretty good to me, although we'd have to see it in the sidebars to be sure. #f3bf3f could work as hover, but definitely not as the regular color. What about a font change? Making the links slightly bigger than or slightly smaller than normal? A different font might work as well, but the editor doesn't come with a list of available fonts, so I'm not going to try to experiment there. Also, when I type in the editor, the text is in the sans-serif font that I see the posts in, but in the preview window the font is transformed into the serif font that I see in the sidebars. So I'm not sure what's up with that.
    "Shared pain is lessened; shared joy, increased — thus do we refute entropy." - Spider Robinson
    8 years 1 month ago #6 by Kristin Darken
    • Kristin Darken
    • Kristin Darken's Avatar


  • Posts: 3898

  • Gender: Unknown
  • Birthdate: Unknown
    • Larger fonts in any of the sidebars result in titles word wrapping for 'most' titles instead of a couple. Of course, if you're already using a browser significantly narrower than a 1900 pixel wide, you may already be seeing a lot of wrapping... depending on whether your browser looks at the responsive CSS or the regular stuff.

    Remember, also, that for colors, you want a reasonably visible color (but not outside the palette of the site) for "I've never looked at that link" ... something hightened visibility for mouseover/hover... and something more muted for "already visited it" . In theory, I think already visited links should be the closest to default text coloring, because you don't really need a reminder of it being a link once you've read the material it pointed to.

    Darkgoldenrod, btw, does look good on the background in forums text...but it would disappear completely in the sidebars.
    Fate guard you and grant you a Light to brighten your Way.
    8 years 1 month ago - 8 years 1 month ago #7 by Arcanist Lupus
    • Arcanist Lupus
    • Arcanist Lupus's Avatar Topic Author


  • Posts: 1820

  • Gender: Male
  • Birthdate: Unknown

    • Kristin Darken wrote: Darkgoldenrod, btw, does look good on the background in forums text...but it would disappear completely in the sidebars.


    The preview pane in the text editor looks to me like it's the same color as the sidepanels, but darkgoldenrod showed up just fine. (I'd say it was slightly worse than the current color, but still plenty readable.) Does the preview pane treats colors differently than the sidepanels, or am I seeing something different from what you are seeing?

    Maybe make the regular text darkgoldenrod, and then use the current color specifically for hyperlinks? How does this look? Is it more taxing to read?

    What if it's in a quote box?

    Warning: Spoiler! [ Click to expand ]
    "Shared pain is lessened; shared joy, increased — thus do we refute entropy." - Spider Robinson
    Last Edit: 8 years 1 month ago by Arcanist Lupus.
    8 years 1 month ago #8 by GrimGrendel
    • GrimGrendel
    • GrimGrendel's Avatar


  • Posts: 243

  • Gender: Female
  • Birthdate: Unknown
    • I think the current color (#633704) for links already visited would work fine.

    Wouldn't it be easier to leave the sidebars as they are and only change the color for links in forum posts? The forum post links all have the same specific class, so they'd be easy to target.

    Good point for spoilers and quotes. The spoiler has enough contrast, but I'm not too sure about the quote.

    How about multilayered quotes?

    Arcanist Lupus wrote:

    What if it's in a quote box?

    Arcanist Lupus wrote:

    What if it's in a quote box?


    We could have another color for within the quotes. It would be one place where blue could fit.

    What if it's in a quote box?

    Up for review: Magpies 1 - Flock (Part 1)
    8 years 1 month ago #9 by Arcanist Lupus
    • Arcanist Lupus
    • Arcanist Lupus's Avatar Topic Author


  • Posts: 1820

  • Gender: Male
  • Birthdate: Unknown

    • Wouldn't it be easier to leave the sidebars as they are and only change the color for links in forum posts? The forum post links all have the same specific class, so they'd be easy to target.

    If I had to guess, I'd guess that the individual classes* for links in different areas were never established, so they all rely on the same base style. And creating individual classes is possible, but it makes the site harder to maintain and is more work than is worth bothering for, especially considering that those of us who like pothole hyperlinks can do our own color corrections without much difficulty.

    *I apologize if I'm using the wrong terminology. My experience with CSS is very close to zero.


    Anyways, more color stuff!

    What about the intermediate between dark goldenrod and the current color? It's more readable than dark goldenrod, but still distinguishable from the surrounding text.

    Or we can reverse it, and make the current normal color the hyperlink color, and the intermediate the normal text color. On the other hand, I do think that this is slightly harder to read, and it would also affect the main story text, right? And maximum readability should go to whichever style the main story text is in.

    Testing in Multiquote. It's definitely readable on my screen, but I'd prefer the darker color if I'm to read long paragraphs.



    Dark Goldenrod (#b8860b)
    Intermediate (#8d5e07) (I literally just averaged the RGB values)
    Current Color (#633704)
    "Shared pain is lessened; shared joy, increased — thus do we refute entropy." - Spider Robinson
    8 years 1 month ago #10 by GrimGrendel
    • GrimGrendel
    • GrimGrendel's Avatar


  • Posts: 243

  • Gender: Female
  • Birthdate: Unknown

    • Arcanist Lupus wrote: If I had to guess, I'd guess that the individual classes* for links in different areas were never established, so they all rely on the same base style. And creating individual classes is possible, but it makes the site harder to maintain and is more work than is worth bothering for, especially considering that those of us who like pothole hyperlinks can do our own color corrections without much difficulty.

    *I apologize if I'm using the wrong terminology. My experience with CSS is very close to zero.

    A different class already exists, no need to create one. It's just a matter of changing the style of that one class. But you are right that inserting a bunch of conditional styling will make the site harder to maintain.

    Testing a few layers of the quotes. Looks definitely better than darkgoldenrod.

    Testing in Multiquote.

    Testing in Multiquote.

    Testing in Multiquote.

    Testing in Multiquote.

    Up for review: Magpies 1 - Flock (Part 1)
    8 years 1 month ago #11 by Kristin Darken
    • Kristin Darken
    • Kristin Darken's Avatar


  • Posts: 3898

  • Gender: Unknown
  • Birthdate: Unknown
    • Well, one of the first things I can point out is that the quoting system uses background colors defined by RGB values and an Opacity factor. The sidebar modules do as well. So there's a cascade impact as you layer things.

    Second, no, I can't change the base text to a intermediate color without pissing off all the people who need either size or contrast to read text...

    If the issue is just links in forums posts... that is certainly a much easier thing to deal with. Not the least of which is because it won't impact the overall look of the site to the same degree. And while I don't think there are currently separate style notes for the color of links in the forums CSS, adding them to what is there isn't too much of an issue.
    Fate guard you and grant you a Light to brighten your Way.
    8 years 1 month ago #12 by Arcanist Lupus
    • Arcanist Lupus
    • Arcanist Lupus's Avatar Topic Author


  • Posts: 1820

  • Gender: Male
  • Birthdate: Unknown
    • Yeah. The "issue" (if you can even call it that) is that I, and I think a few others as well, are fond of hiding the hyperlinks in our posts so that they don't break up reading flow. (Also, I find urls to be aesthetically unpleasing). But with the text the color it is now, if the reader isn't expecting a hyperlink they can miss it entirely and not know that it existed. Which a forum poster can correct by modifying their text colors, but I thought that if the change could be easily made to the CSS then that might be simpler then spot-fixing (especially as the color tags have to go inside the hyperlink tags, or it doesn't work, which could trip up unsuspecting posters).

    Sorry for being less clear at the beginning.
    "Shared pain is lessened; shared joy, increased — thus do we refute entropy." - Spider Robinson
    8 years 1 month ago #13 by Kristin Darken
    • Kristin Darken
    • Kristin Darken's Avatar


  • Posts: 3898

  • Gender: Unknown
  • Birthdate: Unknown
    • Well, I've put some things in that should be limited to within the context of the forums... though there HAVE already been some visible unplanned side effects that I'll either have to live with or add in exclusions for... ie it changed the breadcrumbs color, it changed the color in the forums gray menu buttons. It also affected the buttons following posts (for moderation/reply/quick reply/thankyous ... but I added a quick exclusion for those. I don't mind the breadcrumbs, much... the menu.... may have to change.
    Fate guard you and grant you a Light to brighten your Way.
    8 years 1 month ago - 8 years 1 month ago #14 by GrimGrendel
    • GrimGrendel
    • GrimGrendel's Avatar


  • Posts: 243

  • Gender: Female
  • Birthdate: Unknown
    • What selector are you using? Because there shouldn't be an overlap with the breadcrumbs and grey menu. Neither have the bbcode_url class

    EDIT : Just saw the change. How about instead of "#kunena.layout a" using "a[class=bbcode_url]"? Or if you want the whole package, "#kunena.layout a[class=bbcode_url]".
    Up for review: Magpies 1 - Flock (Part 1)
    Last Edit: 8 years 1 month ago by GrimGrendel. Reason: Coding CSS
    8 years 1 month ago #15 by Kristin Darken
    • Kristin Darken
    • Kristin Darken's Avatar


  • Posts: 3898

  • Gender: Unknown
  • Birthdate: Unknown
    • Ya... I can do that, now that I know that is possible. :P
    Fate guard you and grant you a Light to brighten your Way.
    Moderators: WhateleyAdmin, Kristin Darken, E. E. Nalley, elrodw, Nagrij, MageOhki, Astrodragon, NeoMagus, Warren, Morpheus, Wasamon, sleethr, OtherEric, Bek D Corbin, MaLAguA, Souffle Girl, Phoenix Spiritus, Starwolf, DanZilla, Katie_Lyn, Maggie Finson, DrBender
    Powered by Kunena Forum