Archived topic

Link Styling

3 replies · Started by Matt Stern on May 23, 2021

Viewing posts 1–4 of 4

May 23, 2021 at 8:20 pm #1795387

Hi guys,

I'm using the following css to style links:

.inside-article a {
  color: #0c6272;  
  text-decoration:underline;
  text-decoration-style:none;
  text-decoration-color: #0c6272!important;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

.inside-article a:hover {
  text-decoration:underline;
  text-decoration-style: none;
  text-decoration-color: #0c6272;
  text-decoration-thickness: .25em;
  text-underline-offset: 1.5px;
}

My question is: how do I exclude this styling on archive pages? So that links on archive pages have no underline. For example, on this page https://sternstaging.com/blog/ the titles and meta have underlines, but I'd like to remove the underlines.

Same goes for the tag archive pages such as https://sternstaging.com/tag/design/

Thanks kindly,

Matt

May 23, 2021 at 10:48 pm #1795458

Hi there,

If you only want to apply this CSS to only the archive pages we can modify the selectors.

Here's an example:

body.archive .inside-article a {
  color: #0c6272;  
  text-decoration:underline;
  text-decoration-style:none;
  text-decoration-color: #0c6272!important;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

body.archive .inside-article a:hover {
  text-decoration:underline;
  text-decoration-style: none;
  text-decoration-color: #0c6272;
  text-decoration-thickness: .25em;
  text-underline-offset: 1.5px;
}

Or if you want to be more specific with the taxonomy, you can try this:

body.archive.tag .inside-article a {
  color: #0c6272;  
  text-decoration:underline;
  text-decoration-style:none;
  text-decoration-color: #0c6272!important;
  text-decoration-thickness: .125em;
  text-underline-offset: 1.5px;
}

body.archive.tag .inside-article a:hover {
  text-decoration:underline;
  text-decoration-style: none;
  text-decoration-color: #0c6272;
  text-decoration-thickness: .25em;
  text-underline-offset: 1.5px;
}

May 24, 2021 at 5:30 am #1795865

Thanks Elvin,

I added the following code to remove the underline on archive pages:

body.archive .inside-article a {
  color: #0c6272;  
  text-decoration:none!important;
  text-decoration-style:none;
  text-decoration-color: #0c6272!important;
  text-decoration-thickness: 0em;
  text-underline-offset: 0px;
}

body.archive .inside-article a:hover {
  text-decoration:none;
  text-decoration-style: none;
  text-decoration-color: #0c6272;
  text-decoration-thickness: .0em;
  text-underline-offset: 0px;
}

Looking good now. :)

May 24, 2021 at 5:05 pm #1796659

Nice one. Glad you got it sorted. No problem. :)

This archived topic is closed to new replies.

Start building better websites today.