Change link format in blog

• 

  helengorman · Member · Jul 25, 2020 at 2:27 pm

  • Copy link
  • Add topic to favorites

  I am using the Balasana theme and have managed to add custom CSS to change the colour of links throughout the site, except for the blog. I would like to change the link colours on the blog to match the rest of the site (orange for links and light blue on hover), as well as removing the underline on the links on the blog.

  So far I have tried:

  .entry-content a:link {
  color: #F74C08;
  }

  .entry-content a:hover {
  color: #08B3F7;
  }

  Which seems to work for some links but not others on the main Blog page.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  slantedplanet · Member · Jul 25, 2020 at 8:38 pm

  • Copy link

  Hello!

  I see four post on your main blog page at:
  https://resoluteriding.net/blog/

  On that page, it seems to be the post titles and author links that are not styled with your new colors. For the post titles, I used this:

  .entry-title a {
  	color: #F74C08;
  }
  
  .entry-title a:hover {
  	color: #08B3F7;
  }

  For the author links, I used this:

  a.url.fn.n {
  	color: #F74C08;
  }
  
  a.url.fn.n:hover {
  	color: #08B3F7;
  }

• 

  helengorman · Member · Jul 26, 2020 at 9:54 am

  • Copy link

  Thanks! The author links one worked, but the post titles didn’t make a difference.

  I would also like to remove the underlining of the links on the blog page, but I can’t figure out how to do that.

• 

  slantedplanet · Member · Jul 26, 2020 at 3:48 pm

  • Copy link

  Hello again! Let’s see if I can do another lap without crashing.
  :-)

  For styling the post title links on your main blog page:

  /* post title links and Continue Reading links */
  
  .has-background a:not(.wp-block-button__link):not(.wp-block-file__button) {
  	color: #F74C08;
  }
  
  .has-background a:not(.wp-block-button__link):not(.wp-block-file__button):hover {
  	color: #08B3F7;
  }
  

  Notice that this CSS also styles the Continue Reading links.You may also notice that I added a CSS comment about this.

  Comments are how you write notes to your future self (or others) who will eventually edit your site CSS to make other styling changes. You can change the wording to whatever is most helpful to you. Comments are optional, so you can also delete the comment, and the rest of the CSS still works.

• 

  slantedplanet · Member · Jul 26, 2020 at 4:04 pm

  • Copy link

  I would also like to remove the underlining of the links on the blog page, but I can’t figure out how to do that.

  For the links where you don’t want to see the underline, add this code to the CSS you use to style the color of the links:

  text-decoration-line: none;

  This is an example, using the code from the my prior post:

  
  /* post title links and Continue Reading links */
  
  .has-background a:not(.wp-block-button__link):not(.wp-block-file__button) {
  	color: #F74C08;
  	text-decoration-line: none;
  }
  
  .has-background a:not(.wp-block-button__link):not(.wp-block-file__button):hover {
  	color: #08B3F7;
  	text-decoration-line: none;
  }

  You would remove the underlines from the author links in a similar way.

• 

  helengorman · Member · Jul 27, 2020 at 8:21 am

  • Copy link

  That’s really helpful, thank you so much. That code worked on the post title and Continue Reading links. I’ve just stopped the post author from showing up via the Editor as they’re all by me anyway!

  Thanks also for showing me how to put notes to myself in with the CSS – that will definitely be really useful when I don’t look at it for months and then need to remember what I did!