Fortune template: Customizing use of dark overlay on Welcome page and other pos

• 

  stbernardscchs · Member · Nov 4, 2016 at 4:31 pm

  • Copy link
  • Add topic to favorites

  I recently received help removing the dark gray overlay that the Fortune template places on the Welcome page hero image (it was making all my imagery too dark and muted for my client). I inserted the CSS code WP provided me but it also removed the dark effect from all featured images on all my other pages. The result now is the page titles (white) are difficult to read against the full unmuted images there.

  I would like to apply the dark overlay to the rest of the site pages but NOT to the Welcome page hero image.

  OR Is it possible to also add a drop shadow to the page title text?

  Help is greatly appreciated! Thanks!

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

• 

  innisfreehomestead · Member · Nov 4, 2016 at 9:33 pm

  • Copy link

  Hi there!

  It looks like this is the code you have in your custom CSS which affects the overlays:

  #hero.has-background .overlay, #primary-header .overlay, .page-header.has-featured-image .overlay {
  	display: none;
  }

  If you replace that with this code, it should specify that it’s for the homepage only:

  .home #hero.has-background .overlay, .home #primary-header .overlay, .home .page-header.has-featured-image .overlay {
  	display: none;
  }

  Let me know if that doesn’t work!
  Sage

• 

  stbernardscchs · Member · Nov 5, 2016 at 4:17 pm

  • Copy link

  That worked! Thank you! I do have one other question on this (it’s the visual designer in me)… it is possible to control the opacity of the overlay to lighten or darken it?

• 

  innisfreehomestead · Member · Nov 7, 2016 at 9:23 pm

  • Copy link

  Hi there,

  Sorry for my delayed response!
  This code should change the darkness, then just play with the .3 number to get the effect you’d like. 0 is no overlay so the lightest, and 1 is complete overlay so you won’t be able to see through it.

  #hero.has-background .overlay, #primary-header .overlay, .page-header.has-featured-image .overlay {
  	opacity: .3;
  }

  Hope that helps!
  Sage

• 

  stbernardscchs · Member · Nov 8, 2016 at 3:15 pm

  • Copy link

  Thank you so much! This is awesome!

• 

  stbernardscchs · Member · Nov 8, 2016 at 4:04 pm

  • Copy link

  Hi Sage,

  I implemented the new CSS but it appears that it added an overlay to the Welcome page image as well. Can the code be modified to exclude the welcome page? thanks!

• 

  innisfreehomestead · Member · Nov 8, 2016 at 10:34 pm

  • Copy link

  Hey there,

  Sorry about that!

  Adding this should do it:

  .home #hero.has-background .overlay, .home #primary-header .overlay, .home .page-header.has-featured-image .overlay {
  	opacity: 0;
  }

  Let me know if that doesn’t work,
  Sage

• 

  timethief · Member · Nov 8, 2016 at 10:44 pm

  • Copy link

  @sagebrownell
  Your volunteer support rocks! See here https://automattic.com/work-with-us/

• 

  innisfreehomestead · Member · Nov 8, 2016 at 10:48 pm

  • Copy link

  @timethief

  Aw, thanks a bunch! I applied on the 19th of September, just waiting for a response now :)

• 

  timethief · Member · Nov 8, 2016 at 10:50 pm

  • Copy link

  @sagebrownell
  Good on you and best wishes re: a response because you have tirelessly produced lots of great work that you be paid for. :)