0
Answered

make transparent background in widgets

rob 2 weeks ago updated 2 days ago 11

I have one widget in the main section of my page (under the header). In the editor there is a translucent white box as the background for the text, but on the published display the bos is transparent UNTIl is appears on a cell phone where the white box reappears making the text hard to see.

IN my CSS editor, I have this

.boldgrid-css{ background: white; }
.wpforms-field-label {
color: #FFFFFF !important;
}

Anyway to make it 100% transparent?  Thanks in advance

Answer

Answer

Hi Rob, sorry that box is still there.  Instead of none in that rule, try using unset or transparent instead.  The new code should look something like this:

.palette-primary .widget .call-to-action-wrapper {
background-color: transparent;
}

Hopefully that one works for you and if you have any additional questions please do not hesitate to ask!

Any ideas to code in shadow on my text to make it easier to see?

Hi Rob, you can add shadows to the text in your Page Content using the Text Shadow option in your Text Settings and these controls are provided by our Post and Page Builder plugin.

You can use the sliders to change the positioning and blur of your shadows as well as the color of your text shadows.

Please let us know if there is anything else that we can do to help!

On the normal grids, yet I love that feature.  But on my site's home page "edit CSS", in the visual editor for Widgets, I can't find that option  

Hi Rob-

Thank you for the feedback. Right now, the BoldGrid Post and Page Builder only adds those options for Posts and Pages, not Widgets. 

This would make a valuable feature, so I've created a feedback request for our developers to investigate adding more controls to the Widget visual editor.

That got it!  Thanks!

This is what I have and the box is still there

.boldgrid-css{ background: none; }
.wpforms-field-label {
color: #FFFFFF !important;
}


.palette-primary .widget .call-to-action-wrapper {
background-color: none;
}

Answer

Hi Rob, sorry that box is still there.  Instead of none in that rule, try using unset or transparent instead.  The new code should look something like this:

.palette-primary .widget .call-to-action-wrapper {
background-color: transparent;
}

Hopefully that one works for you and if you have any additional questions please do not hesitate to ask!

I can add it anywhere in the CSS area?

Hi Rob,


I recommend adding additional rules on a new line in the Custom CSS area, that way it won't interfere with any code already entered there.  Please let us know if there is anything else that we can do to help!

Answered

I am happy to help Rob!

The white box you are seeing around the Call to Action widget is part of the default styling for the Wedge theme and there is a media query contained in the theme stylesheet that removes the background color for desktop screen sizes.

You can remove that background by adding this code to the Custom CSS area in your Customizer:

.palette-primary .widget .call-to-action-wrapper {
    background-color: none;
}

I hope that helps you achieve the design you want and please let us know if you have any additional questions!