widget area background color

• 

  echrisconnor · Member · Oct 18, 2016 at 10:51 pm

  • Copy link
  • Add topic to favorites

  The background color in my footer widget area is a very light white — almost white. Is there a way to change this with CSS?

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

• 

  innisfreehomestead · Member · Oct 18, 2016 at 11:08 pm

  • Copy link

  Hey there!

  This should do it:

  #tertiary.widget-area {
  	background-color: #518bbc;
  	border: none;
  }

  Let me know if that doesn’t work,
  Sage

• 

  echrisconnor · Member · Oct 18, 2016 at 11:16 pm

  • Copy link

  That did it! Thanks Sage, you rock.

• 

  innisfreehomestead · Member · Oct 18, 2016 at 11:17 pm

  • Copy link

  Haha glad to hear that did it ^_^

• 

  echrisconnor · Member · Oct 18, 2016 at 11:20 pm

  • Copy link

  OK, now that I’ve changed that gray it looks like overall the background color of my site is a super light gray. I see it more now with the contrast. There an easy way to make that white?

• 

  innisfreehomestead · Member · Oct 18, 2016 at 11:25 pm

  • Copy link

  Is this what you had in mind?

  #content {
  	background-color: #ffffff;
  }

  Let me know,
  Sage

• 

  echrisconnor · Member · Oct 18, 2016 at 11:33 pm

  • Copy link

  Absolutely. That worked great. I hadn’t really noticed it was off white until I looked really closely. Ok one more similar things if that’s OK without starting a new thread.

  On my home page there is a semi transparent screen behind the white type so it’ll show up against images with a lot of white in their backgrounds. I did that with this piece of code:

  #featured-content h1 a, #featured-content article.no-hero h1 a {
  background-color: rgba(0,0,0,.55);
  padding: 5px;
  }

  Is there a way to do the same thing for the headings in other pages?

• 

  innisfreehomestead · Member · Oct 18, 2016 at 11:41 pm

  • Copy link

  Sure is!

  If you’d like the text to still be centered with the box filling the full width:

  .entry-title {
  	background-color: rgba(0,0,0,.55);
  	padding: 5px;
  }

  Or if you’d like the text to be on the left like on your homepage, use this code instead:

  .entry-title {
  	background-color: rgba(0,0,0,.55);
  	padding: 5px;
  	display: inline-block;
  }

  Hope that works,
  Sage

• 

  echrisconnor · Member · Oct 18, 2016 at 11:48 pm

  • Copy link

  I want it centered but with your first piece of code it puts a dark strip across most of the width of the image – not just behind the type like it is on the home page. Any way to control how wide it is?

• 

  innisfreehomestead · Member · Oct 18, 2016 at 11:52 pm

  • Copy link

  Ah, and here I was thinking I was prepared with two different options :)

  This should do it, you can change the code where it says 20px to be any amount and that will change the padding on the left and right of the box, in turn, controlling the width (but still in relation to the amount of text)

  .entry-title {
  	background-color: rgba(0,0,0,.55);
  	padding: 5px 20px;
  	display: inline-block;
  	text-align: center;
  }
  
  header.entry-header {
  	text-align: center;
  }

  Hope that helps,
  Sage

• 

  echrisconnor · Member · Oct 19, 2016 at 12:02 am

  • Copy link

  Brilliant! That’s it. Thanks again!!!

• 

  innisfreehomestead · Member · Oct 19, 2016 at 12:16 am

  • Copy link

  No worries, my pleasure!

• 

  echrisconnor · Member · Oct 19, 2016 at 3:08 am

  • Copy link

  OK Sage, it worked but we have some unintended consequences on the home page. It looks like it doubled up the effect on the home page so the effect is super dark there in the featured image slider. Also, it applied the effect over the page title below on the white background (Connor Wood Bicycles), and it also put the same effect over the rollovers for the featured posts lower down on the home page. So, it’s close and is doing what we wanted on the content pages but the other things are a little screwy now. Any suggestions?

• 

  innisfreehomestead · Member · Oct 19, 2016 at 5:12 pm

  • Copy link

  Ah, sorry about that!

  Replacing the code with this should do it:

  #page-header .entry-title {
  	background-color: rgba(0,0,0,.55);
  	padding: 5px 20px;
  	display: inline-block;
  	text-align: center;
  }
  
  .home #page-header .entry-title {
  	background-color: transparent;
  }

  Let me know if that doesn’t work,
  Sage

• 

  echrisconnor · Member · Oct 19, 2016 at 5:18 pm

  • Copy link

  really close… the titles are just left aligned now. Can we center them?

  c

• 

  echrisconnor · Member · Oct 19, 2016 at 5:19 pm

  • Copy link

  To be clear. I’d like to have them left aligned on the home page, but centered on all the other pages.

• 

  innisfreehomestead · Member · Oct 19, 2016 at 5:22 pm

  • Copy link

  Thanks for clarifying :)

  header.entry-header {
  	text-align: center;
  }
  
  .home header.entry-header {
  	text-align: left;
  }

  Hope that helps,
  Sage

• 

  echrisconnor · Member · Oct 19, 2016 at 5:26 pm

  • Copy link

  Hmm, we lost the gray bar in the back now… :)

• 

  innisfreehomestead · Member · Oct 19, 2016 at 5:27 pm

  • Copy link

  Hm, looks like the code is missing? In total it should look like this:

  #page-header .entry-title {
  	background-color: rgba(0,0,0,.55);
  	padding: 5px 20px;
  	display: inline-block;
  	text-align: center;
  }
  
  .home #page-header .entry-title {
  	background-color: transparent;
  }
  
  header.entry-header {
  	text-align: center;
  }
  
  .home header.entry-header {
  	text-align: left;
  }

  Does that fix it?
  Sage

• 

  echrisconnor · Member · Oct 19, 2016 at 5:28 pm

  • Copy link

  Is there a way to do this with a dark drop shadow on the font rather than the gray bar in the background. That might look better anyways but I’m not sure if you can control drop shadows or how that would look.