Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #30563
    rob
    Guest

    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

    #30564
    support
    Guest

    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!

    #30565
    rob
    Guest

    I can add it anywhere in the CSS area?

    #30566
    support
    Guest

    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!

    #30567
    rob
    Guest

    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;
    }

    #30568
    support
    Guest

    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!

    #30569
    rob
    Guest

    That got it!  Thanks!

    #30570
    rob
    Guest

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

    #30571
    support
    Guest

    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.

    Text Shadow option in editor

    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!

    #30573
    rob
    Guest

    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  

    Visual editor for widgets

    #30574
    Jesse Owens
    Guest

    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.

    #30575
    rob
    Guest

    Ok thanks so much!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘make transparent background in widgets’ is closed to new replies.