WordPress.org

Forums

Fifteen
How to Make Gray Text Box Backgrounds TRANSPARENT?? (9 posts)

  1. TeaCupGinBand
    Member
    Posted 9 months ago #

    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:
    http://www.teacupgin.com/

    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,
    Christy

  2. janet4now
    still awesome :)
    Posted 9 months ago #

    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.

  3. TeaCupGinBand
    Member
    Posted 9 months ago #

    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!!!

  4. stephencottontail
    Member
    Posted 9 months ago #

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

    .single #content,
    .page #content {
    background: rgba(195, 195, 195, 0.4) !important;
    }
    
    #primary,
    #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.

  5. TeaCupGinBand
    Member
    Posted 9 months ago #

    YES YES YES YES YES YES YES YES!!!!!!!!!!

    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?

    SEE: http://www.teacupgin.com/
    Thank you so much!
    CB

  6. stephencottontail
    Member
    Posted 9 months ago #

    Try:

    #content {
    border: none;
    }
  7. TeaCupGinBand
    Member
    Posted 9 months ago #

    WONDERFUL!!!!!

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

    MERCI, DANKE, GRACIAS!

    I will mark this resolved. All the best!

  8. Joseph Dailey
    Member
    Posted 26 minutes ago #

    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.

  9. Joseph Dailey
    Member
    Posted 22 minutes ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic