CSS – Changing Background of Gallery Box on Homepage

• 

  clairebriggsflorals · Member · Aug 5, 2015 at 7:48 pm

  • Copy link
  • Add topic to favorites

  Hello,

  On my home page, I have a gallery that changes throughout my pictures. There is a black box around the pictures along with a white box around that. I want to replace the background of the slideshow along with the white background with the wood grain image design that is on the rest of my website and the backdrop. How do I go about this?

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

• 

  thesacredpath · Member · Aug 5, 2015 at 10:04 pm

  • Copy link

  Hi there, the following CSS will do what you want, but your line of text above the slideshow becomes almost invisible. I’ve included a CSS rule to make that text black so it is a bit more readable.

  .home .container {
      background: none;
      box-shadow: none;
  }
  .home .slideshow-window {
      border: none;
      background: none;
  }
  .home .postarea.full p {
      color: #000;
  }

  I also notice the menu items are nearly unreadable also. You may wish to make those black and possibly just a bit bigger for those with visual problems. If you wish to try that, add the following as well.

  .menu > li > a, .menu > li > a:link, .menu > li > a:visited {
      color: #000 !important;
      font-size: 120%;
  }

  Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS.

• 

  clairebriggsflorals · Member · Aug 5, 2015 at 10:10 pm

  • Copy link

  [redacted by thesacredpath]

• 

  thesacredpath · Member · Aug 5, 2015 at 10:23 pm

  • Copy link

  @clairebriggsflorals, if we could keep the forums for technical support, it would be appreciated. Thanks in advance.

• 

  clairebriggsflorals · Member · Aug 5, 2015 at 10:40 pm

  • Copy link

  This is great! I would also like to basically do the same in removing the white box on all the other tabs – about – kind words – pretty pictures weddings – pretty pictures special events – contact.

  Please let me know what i can do here and also make the font a darker black in those word sections to stand out on the wood! Those are my only questions for now!

  Thanks so much!

• 

  thesacredpath · Member · Aug 5, 2015 at 10:54 pm

  • Copy link

  Change the first two rules I gave to the following.

  .container {
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
      box-shadow: none;
  }
  .slideshow-window {
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
      border: medium none;
  }

  Looking at your about page, I can’t read most of the text due to how close in value the text is with your background. Even turning it to black with the below CSS I can’t read much of it.

  body {
      color: #000;
  }

  How about making the .container background translucent white with the following instead.

  .container {
      background: rgba(255, 255, 255, 0.7);
      box-shadow: none;
  }