[Corporate Theme] Main Page Slideer CSS

• 

  mcgillhospitality · Member · Apr 14, 2016 at 7:31 pm

  • Copy link
  • Add topic to favorites

  On my main page slider, the photos are sheer, when I want them to be full color, and the header for each slide is bold black, when I want that to be a sheer overlay. How to?

  Thank you!!

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

• 

  thesacredpath · Member · Apr 14, 2016 at 8:52 pm

  • Copy link

  Hi there, I’m not seeing a slider on your main page. Are you talking about the grid section below the Exciting News header image with Villeroy & Boch, Broggi, etc?

  If so, add the following CSS to take away the translucent white overlay.

  #featured-content article .article-liner {
      background-color: rgba(0, 0, 0, 0);
  }

  Can you explain further what you mean on the titles being “sheer overlay”.

• 

  mcgillhospitality · Member · Apr 14, 2016 at 11:11 pm

  • Copy link

  Hi. That’s b/c I went back to the grid temporarily until I can perfect the slider. I’m working on it behind the scenes. Can you send me the CSS to take away the translucent overlay of the slider? For the page name of each image sliding across main page, I want a translucent strip on the bottom with the text not so black/bold forward. Does that make sense? I’ve seen it on other sites, where there is a faded strip with the wording over the image. Thx for help.

• 

  mcgillhospitality · Member · Apr 14, 2016 at 11:47 pm

  • Copy link

  And one more question – where do I insert the above CSS if I want to give that a try before going back to slider?

• 

  thesacredpath · Member · Apr 15, 2016 at 1:33 am

  • Copy link

  It’s the same code I gave. That is used both for the grid featured section and the featured slider area.

  #featured-content article .article-liner {
      background-color: rgba(0, 0, 0, 0);
  }

• 

  mcgillhospitality · Member · Apr 16, 2016 at 5:07 am

  • Copy link

  Thank you but please do tell me on what page or in what area do I insert the code and where exactly? I’m at beginner level. Thanks.

• 

  thesacredpath · Member · Apr 16, 2016 at 6:02 pm

  • Copy link

  Sorry, go to the customizer and in the CSS tab, delete all the informational text in that window, and paste in the above custom CSS.

• 

  mcgillhospitality · Member · Apr 16, 2016 at 8:10 pm

  • Copy link

  Thank you and done. Were you able to decipher my request to create a transparent strip over bottom part of each slider image that would include the title of that page? That’s my last ‘ask’…thanks!!

• 

  thesacredpath · Member · Apr 17, 2016 at 5:58 pm

  • Copy link

  You can give this a try and see what you think. The first rule adds a translucent white background and sets a little padding to make the text look better within that background, and the second rule spaces things a little more evenly left and right since the background was slightly over the left arrow block.

• 

  mcgillhospitality · Member · Apr 18, 2016 at 4:07 pm

  • Copy link

  Did you mean to insert CSS? Please let me know how I go about trying what you are describing. thank you.

• 

  thesacredpath · Member · Apr 18, 2016 at 8:35 pm

  • Copy link

  Oops, so sorry for forgetting to post the CSS. Here it is.

  #featured-content .twelve .entry-title {
      background-color: rgba(255, 255, 255, 0.5);
      padding-right: 0;
  }
  #featured-content .twelve {
      padding-left: 20px;
  }

• 

  mcgillhospitality · Member · Apr 18, 2016 at 11:16 pm

  • Copy link

  Thanks so much. I appreciate your help.

• 

  thesacredpath · Member · Apr 19, 2016 at 1:30 am

  • Copy link

  You are welcome.