Change font colours

• 

  richie6789 · Member · Apr 2, 2018 at 9:15 am

  • Copy link
  • Add topic to favorites

  I had two questions:
  1) how can I change the font colour of the blog (including the date and author)
  2) how can I change the font colour and colour of the social media buttons in the footer?
  Thanks for your help.

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

• 

  ravichahar · Member · Apr 2, 2018 at 11:24 am

  • Copy link

  Hey richie6789,

  You can change the font color only if you’re having a Premium or a Business plan. It requires Custom CSS which can’t be used in a plan below Premium.
  And the same applies to the social media button colors.
  https://en.support.wordpress.com/custom-design/#custom-css

  A free plan let you choose any of the custom fonts from the list. You can also choose the font size.
  Please check this.https://en.support.wordpress.com/custom-fonts/

  Hope this helps.

• 

  richie6789 · Member · Apr 2, 2018 at 11:42 am

  • Copy link

  Thanks – i can change the CSS but wasn’t sure which code to use

• 

  mouli · Staff · Apr 3, 2018 at 7:55 am

  • Copy link

  When you have access to the css for your site you might try the following snippets in the Additional CSS section of the customizer:
  For general font color:

  body {
  	color: #990000;
  }

  For headings:

  .hentry .entry-header .entry-title a {
  	color: #990000;
  }

  Social media icons:

  .social-list li a::before {
  	color: #990000;
  }

  and the footer credit ( I assume that is what you meant):

  #colophon {
  	color: #990000;
  }

  Note I have used a rather strong red to demonstrate so feel free to choose your own color.
  This is a useful online tool to create the hex code for a color:
  https://www.w3schools.com/colors/colors_picker.asp

  I hope that helps

• 

  richie6789 · Member · Apr 4, 2018 at 11:24 am

  • Copy link

  Oh that is great – thank you very much
  Is there a way to change the colour of the footer area?
  and also, can I change the colour of the rollover of the social media icons?
  and finally, a way of changing the colour of the rollover links on the page (currently gold)
  Again, thank you

• 

  thesacredpath · Member · Apr 4, 2018 at 7:25 pm

  • Copy link

  For the background of the footer area, add this and adjust as desired.

  #colophon {
    background-color: #f4f2e6;
  }

  For the social icon hover color, this will do it for you.

  #colophon .footer-social .social-list li:hover a::before {
    background-color: red;
    border-color: red
  }

  And for the hover color on the page/post titles, this.

  .entry-title a:hover {
    color: red !important;
  }

• 

  richie6789 · Member · Apr 4, 2018 at 8:27 pm

  • Copy link

  Again, thank you – with this code…..

  #colophon .footer-social .social-list li:hover a::before {
  background-color: red;
  border-color: red
  }

  could you add something where I can change the color of the actual symbol within the circle of the social media icons. At the moment they are going white and the background I want is white, and so they are vanishing. Again, thanks.

• 

  mouli · Staff · Apr 4, 2018 at 9:11 pm

  • Copy link

  Try this for the base color

  #colophon .footer-social .social-list li a::before {
  	color: #990000;
  }

• 

  mouli · Staff · Apr 4, 2018 at 9:13 pm

  • Copy link

  and maybe this for the hover:

  #page .social-list li a:hover::before {
  	color: #990000;
  }

• 

  richie6789 · Member · Apr 4, 2018 at 10:28 pm

  • Copy link

  perfect – many thanks

• 

  thesacredpath · Member · Apr 4, 2018 at 11:02 pm

  • Copy link

  Hooray!

  For the hover color on the social icons, this will let you change the color.

  #colophon .footer-social .social-list li:hover a::before {
    color: red;
  }

• 

  emilyrickardstylist · Member · Apr 12, 2018 at 7:55 pm

  • Copy link

  How do you change the hover colour of text links?

• 

  mouli · Staff · Apr 12, 2018 at 10:37 pm

  • Copy link

  @emilyrickardstylist
  Probably best to start your own thread so the discussion can relate directly to your own site but here’s something to try for a start:

  a:hover{
  color: red;
  }

• 

  staff-zinnia · Staff · Apr 13, 2018 at 1:13 pm

  • Copy link

  Good morning –

  Thanks for grabbing the follow up here, mouli. Much appreciated.

• 

  staff-zinnia · Staff · Apr 13, 2018 at 1:14 pm

  • Copy link

  emilyrickardstylist – Please give the CSS a try which mouli has provided. If you are still needing additional help go ahead and reach out to us via https://wordpress.com/help/contact/

  Thanks :)

• 

  emilyrickardstylist · Member · Apr 16, 2018 at 8:44 pm

  • Copy link

  Yes that worked – many thanks

  Do you know how I would change the text colour for the date on blog posts and also the items in the sidebar?

• 

  mouli · Staff · Apr 16, 2018 at 11:00 pm

  • Copy link

  Hi,
  Do you mean the dates on the comments?
  If so then this might work:

  #comments .comment-metadata, #comments .comment-metadata a, .comment-navigation a, #comments .reply a {
  	color: #383a3b;
  }

  For text in the sidebar try this (adjust color as required):

  #secondary p, .widget .widget-title, #secondary .widget a{
  	color: red;
  }

  Hope that gets you started…

• 

  staff-zinnia · Staff · Apr 17, 2018 at 1:45 pm

  • Copy link

  mouli – great job :)