h6 link formatting (specifically, underline)

  • Resolved nanoanno

    (@nanoanno)


    9 years, 4 months ago

    Hi guys –

    I realize this is a very specific question, but I’m wondering if someone can help me get the code right for a specific issue.

    On my site, I often give image credits to the original source of the image, since I’m often pulling images from other sites. When doing this, I’m using the h6 font style and putting it in a light grey color so the information is available, yet doesn’t distract from the main content. I would love to use links for the original urls. However, when using the h6 style, it automatically underlines every url. Even if I try to turn off the underline, it still overwrites my formatting.

    Here is a good example: https://nanoanno.com/games/ticket-to-ride/
    ^ Look at the first two Image Credits for comparison.

    Thanks for your help!

    Ann

    PS: I have several other pieces of custom CSS in place, so that would be an ideal solution, if it will work for this type of issue.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Instead of adding the grey colour on every h6 manually, try removing that inline styling and adding this in your custom CSS:

    h6 {
  color: #e0e0e0;
}
h6 a {
  text-decoration: none;
  color: #e0e0e0;
}

    This should make all h6 headings and links light grey and remove the underlining on any links within them as well.

    Let me know how it goes.

    Thread Starter nanoanno

    (@nanoanno)

    Hi Kathryn!

    That worked, except now the link is in a teal color both with and without hovering (probably because I have specified things to be in that color with other custom CSS ??).

    Any thoughts on how to make it grey when you’re not hovering and the color when hovering?

    Ann

    Moderator Kathryn Presner

    (@zoonini)

    To define separate colour for links that are hovered over, try changing this:

    h6 a {
  text-decoration: none;
  color: #e0e0e0;
}

    to:

    h6 a:link {
  text-decoration: none;
  color: #e0e0e0;
}

h6 a:hover {
  text-decoration: none;
  color: #e0e0e0;
}

    Change the second instance of e0e0e0 to whatever hover colour you prefer.

    Thread Starter nanoanno

    (@nanoanno)

    Hmmm. That doesn’t seem to fix it ??

    Could it be because of other custom CSS that is in place?

    Ann

    Thread Starter nanoanno

    (@nanoanno)

    A friend helped me resolve this issue today – looks like it was an issue with the visited link part.

    For future reference for anyone viewing this thread, we put in the following css and it worked great:

    h6 a:link {
	text-decoration: none;
	color: #e0e0e0;
}
h6 a:visited {
	text-decoration: none;
	color: #e0e0e0;
}
h6 a:hover {
	text-decoration: none;
	color: #35D2B3;
}
h6 a:active {
	text-decoration: none;
	color: #35D2B3;
}
    Moderator Kathryn Presner

    (@zoonini)

    Glad you got it sorted!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘h6 link formatting (specifically, underline)’ is closed to new replies.