This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Origami paper translucent background

Resolved 5 replies premiumthemetheme-origami
Eugeni Macia
11 years ago · Last reply by Andrew Misplon 11 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 11 years, 9 months ago

    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. Eugeni Macia 11 years, 9 months ago

    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. Andrew Misplon Staff 11 years, 9 months ago

    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. Eugeni Macia 11 years, 9 months ago

    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. Andrew Misplon Staff 11 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread