Support » Theme: Fifteen » How to Make Gray Text Box Backgrounds TRANSPARENT??

  • Hi, I really like your FIFTEEN template, but I have spent literally 20 hours of time trying to figure out how to render the grey backgrounds of the TEXT BOXES (not the site background image) either opaque or transparent. Here is my site:

    Please Please Please Please HELP!!! I have run out of ideas for how to make it work after reading WP and CSS forums all over the web.

    I have been able to adjust opacity for ALL objects on the site by using this simple code:

    body {
    opacity: .80

    The problem is that renders the top layer of text, photos, and objects also opaque. I just want the GREY parts on which the text lies to be either opaque or even fully transparent.

    Please tell me what code to use and where to put it. I am running out of time to finish this project, and so wanted to make your template work for us. But we are really looking for a template style where the text, photos, and objects almost seem to be floating on top of our subway tile background image without all the grey coloring in the way.

    Thank you so much!!
    Best regards,

Viewing 8 replies - 1 through 8 (of 8 total)
  • background: rgba(195, 195, 195, 0.8);

    That is the code for a gray background with a opacity of 80%.

    This will only effect the background color and NOT the text or other items inside the div.

    The color has to be in rgba to use the opacity setting.

    Thank you so much Janet, but that is not working.

    Do I simply cut and paste exactly what you typed above into the custom CSS section of the template settings? If so, it has no effect at all on the grey background. Stays exactly the same.

    I am so confused and frustrated, I just still don’t understand how to apply that to the grey boxes behind the text on all the pages of our site. Are there additional commands needed to specify exactly where to apply that background color? I have done so much customizing of other aspects of this template and it is driving me crazy not to be able to either REMOVE or make opaque those dangity-danged grey boxes!!!

    Thanks so much for any help anyone can offer!!!

    Moderator stephencottontail


    In your theme’s custom CSS option, try this:

    .single #content,
    .page #content {
    background: rgba(195, 195, 195, 0.4) !important;
    #secondary {
    background: rgba(195, 195, 195, 0.2) !important;
    .widget {
    background: rgba(195, 195, 195, 0.2) !important;

    This way, the background on all the elements is mostly transparent, but there’s still enough subtle gray so that you can still read the text.


    You are my absolute HERO Stephen!!! Thank you SO much for taking the time to post this response. It totally worked!! Bless you my friend!

    Now that these elements are transparent, I can see there is a thin black frame/border around that page box. Do you happen to know how to eliminate that border. If you look now, I have rendered the elements you named above completely transparent for now just so you can clearly see the frame I am talking about. I wonder how to get rid of it so that box is seamless against the tiled background image?

    Thank you so much!

    Moderator stephencottontail



    #content {
    border: none;


    You are too beautiful for words. You have totally made my day, MANY MANY MANY thanks for your help and for sharing you expertise.


    I will mark this resolved. All the best!

    Can someone tell me if I can apply this strategy to accomplish the following for my site. I’m using WordPress 4.2.2 running Divi theme.

    A perfect example of this is on the Home Page, which is open to the public. It’s difficult to read the text, but would benefit from above approach if it can be applied in my case.

    One important difference I can see is that I only want to use it selectively, not over the entire site.

    Also, I’m using the latest DIVI update.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to Make Gray Text Box Backgrounds TRANSPARENT??’ is closed to new replies.