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.

page builder row or widget background opacitiy

Resolved 7 replies customizationpluginplugin-page-builder
dbjdbj
10 years ago · Last reply by Hammeroz 9 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. dbjdbj 10 years, 1 month ago

    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. dbjdbj 10 years, 1 month ago

    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. dbjdbj 10 years, 1 month ago

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

  4. Support Assistants 10 years, 1 month ago

    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. dbjdbj 10 years, 1 month ago

    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. Support Assistants 10 years, 1 month ago

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

  7. Hammeroz 9 years, 8 months ago

    +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.

Have a different question or issue?

Start New Thread