Home>Support>Origami paper translucent background

Origami paper translucent background

Hello,
Really new on WordPress and your themes and plugins.
I’m starting a blog and will use the Origami paper to start learning, I got the premium version.
I have set a page container background color and now want to make it (as well as the ones inside) some transparent so the site background is not fully hidden.
Searching on HTML5 tags seems I need to put a “background-color: rgba(255,255,255,0.6);” on the CSS. I know the best way to do that is to add it on the Custom CSS part, but how do I know to what elements must I apply it? I’m trying to get used to the firefox web developer tools but still have problems there so any help will be apreciated.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Eugeni

    Nicely done on making it this far along the customisation process.

    /* Origami set page container opacity */
    
    #page-container {
    background-color: rgba(255,255,255,0.6) !important;
    }

    Give that a shot under Appearance > Custom CSS and let me know how it goes.

  2. 10 years, 3 months ago Eugeni Macia

    Thank you, it worked like a charm. I add a link to a screen cap http://imgur.com/LeOBuot
    I will do tests on the transparency on other elements like the menu. I think now I can find which element it is and hoe to finf it on the firefox utils. Just to be sure on how it applies, if a set the menu background at the same value say 0.4, then the effect is applied twice? one from page-container and another from the menu background? so the menu will be less transparent than the page-container parts?

  3. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad that helped.

    The menu has it’s own background which is currently solid so it won’t be applied twice, once on the menu container and then once on the page container.

    #menu ul {
    background: #F9F9F9;
    }

    Replace the background hex color above with a RGBA value and use !important as we did in the first one.

  4. 10 years, 3 months ago Eugeni Macia

    Thanks again, obviously it worked. :)
    Just for others reading, The transparency is applied once on the menu but over the page-container who is also a transparency over the original background. So, as I expected, if i put the same value 0.4 on both, the menu background is the 40% of the page-container one who is also the 40% of the site background. That was what I mean when I said is applied twice.
    I add the screencap with both backgrounds tranparency set to 0.4.
    http://imgur.com/aK0UZwu

    You can close this one. I will open a new one on how to customize the menu, my next goal. :)

  5. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Super. Glad you got that working. Thanks for sharing.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More