Home>Support>page builder row or widget background opacitiy

page builder row or widget background opacitiy

By dbjdbj, 9 years ago. Last reply by Hammeroz, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Let’s asume I am using https://pippinsplugins.com/simple-fullscreen-background-image/

I would need to have PB rows and/or widgets backgrounds opaque on that page so that fixed bg image is visible through.

Adding class to a row is available but makes everything transparent not just a widget/row background.

/*this has no effect on Chrome or Edge*/
	background-color: rgba(255,255,255,0.5);
/*this works on both*/
	opacity: .5;
}

It seems the question is not how but which

element.class
to use to make rows or widgets backgrounds opaque?

Please advise …

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

  1. 9 years, 6 months ago dbjdbj

    Ok, hack solution is this:

    body.page-id-102 #content .container.content-wrapper {
	background-color: rgba(255,255,255,0.0);
}

    Check HERE

    Real solution would be to have a widget/plugin that will also provide a control per page. Instead of css hacking.
    page background, SO elements background opacity per page and SO elements color per page.

  2. 9 years, 6 months ago dbjdbj

    A bit better than a hack is this :

    Aim is to have a simple and quick solution based only on CSS. Not combined with using SO PB features.

    First I just used lighter (“glowing”) background image, on a almost transparent content background, so that default text color is visible.

    /* 
----------------------------------------------------------------------------------
	front page
*/
body.page-id-19 {
	background-image: url("http://vma.dbjdbj.org/wp-content/uploads/2016/01/dvoriste-osvetljeno.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-attachment: fixed;
}

body.page-id-19 #content .container.content-wrapper {
	background-color: rgba(255,255,255,0.1);
}

    Result is HERE.
    And for THIS page :

    /* 
----------------------------------------------------------------------------------
some other page
*/
body.page-id-102 {
	background-image: url("http://vma.dbjdbj.org/wp-content/uploads/2016/01/dvoriste-zatamnjeno.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-attachment: fixed;
}

/* */
body.page-id-102 #content .container.content-wrapper {
	background-color: rgba(255,255,255,0.5);
}

    here I have used darker background image and kept content background transparency to 0.5 so that default text color is visible.

    With this kind of a solution one can still use the “customizer” and not worry (too much) about other part of the site.

    Still some kind of SO Page Control present on edit screens (wherever PB is used) would be the ultimate solution.

  3. 9 years, 6 months ago dbjdbj

    second page has been changed in the mean time … due to other design issues on this site in development …

  4. 9 years, 5 months ago Support Assistants

    Hi Dusan

    Thanks for the long wait. Your second solution is a good way to handle this challenge. Hopefully, I’ve understood your position correctly. Do you still need help?

  5. 9 years, 5 months ago dbjdbj

    Well, I would like to pass the message to Greg about my wish for “Page Widget” where this kind of issues will be solvable per page and in an easy GUI driven, non CSS way :)

    Thank you all …

  6. 9 years, 5 months ago Support Assistants

    Definitely. Thanks for your feedback. I’ll log this now and also pass onto Greg.

  7. 9 years, 1 month ago Hammeroz

    +1 on opacity for colours

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