Change footer colour or image in Natural Theme?

• 

  canadiantrailseekers · Member · Dec 2, 2016 at 5:59 pm

  • Copy link
  • Add topic to favorites

  I am looking to change my footer background to either a colour or image within my Natural Theme. Please help! :)

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

• 

  dianakcury · Member · Dec 2, 2016 at 7:58 pm

  • Copy link

  Hi there,

  You can add a background color with this CSS code:

  .footer.radius-top.shadow {
      background-color: #ccc;
  }

  If you want to use an image, you can use:

  .footer.radius-top.shadow {
      background-image: url(https://canadiantrailseekers.files.wordpress.com/2016/11/homeheader6.jpg)
  }

• 

  canadiantrailseekers · Member · Dec 2, 2016 at 8:31 pm

  • Copy link

  Thank you for the quick response! :)

• 

  canadiantrailseekers · Member · Dec 2, 2016 at 9:00 pm

  • Copy link

  is there a way to change the font colour and size in the footer once an image is applied? also I’d like to change the colour of the social media icons in the footer as well. :)

• 

  dianakcury · Member · Dec 2, 2016 at 9:11 pm

  • Copy link

  Hi again!

  Oh I see! The text is also on dark color, well, we can change that:

  .footer.radius-top.shadow {
      background-image: url(https://canadiantrailseekers.files.wordpress.com/2016/12/homefooter.jpg);
      color: #fff;
  }
  
  .footer.radius-top.shadow .widget-title {
      color: #fff;
      font-size: 1.5em;
  }
  
  .footer a:hover, .footer a:active, .footer a:focus { color:#fff }

  The social icons will be on white color, but you can change every icon color this way:

  #menu-item-186 a {color:red}
  #menu-item-185 a {color:green}
  #menu-item-570 a {color:pink}
  #menu-item-187 a {color:orange}

• 

  canadiantrailseekers · Member · Dec 2, 2016 at 9:19 pm

  • Copy link

  awesome! that changed the title “Canadian Trail Seekers” but it didn’t change the widget font colours… is this possible?

• 

  dianakcury · Member · Dec 3, 2016 at 4:17 am

  • Copy link

  Hi again,

  Please add the CSS:

  .footer-widgets {color:#fff}

• 

  canadiantrailseekers · Member · Dec 4, 2016 at 5:09 pm

  • Copy link

  is there also a way to change the hyperlink colours, as it’s showing up too dark? (sorry my css/html skill are poor.. :) )

• 

  canadiantrailseekers · Member · Dec 4, 2016 at 5:09 pm

  • Copy link

  is there also a way to change the hyperlink colours, as it’s showing up too dark? (sorry my css/html skill are poor.. :) )

• 

  dianakcury · Member · Dec 4, 2016 at 10:50 pm

  • Copy link

  Hi!

  You can change link color within widgets with this CSS code:

  .footer-widgets a {color:#fff}