background for all content with padding

Asked on October 30, 2015 in Customization.

I’m having an issue adding a semi-transparent background to the content.  I do not want the background to be full width, just behind the content.  I’ve tried several css options and none seem to work.

I want to have all page content, sliders, and widgets to have the same background

background-color:rgba(255,255,255,0.4);
padding:20px;

Is there an option for this?

mac8mypc Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on November 2, 2015.

    Hi there,

    The content area of all widgets and page content does not have a common class, so you need to isolate the container class for the content area you want to make opaque, then target it with the background change. For this to show up, you would also need the underlying elements to be transparent fully or to have a patterned background fill that the semi-transparent content is overlaying.

    For example, the slider uses copy-container specifically for the text, but the entire content area is content-overlay. The conent widget uses excerpt for the text, but media-body for the entire content block.

    Under the Developer menu you can find a link to your Child Theming guide which contains an article on CSS and Font customization with tips on using the browser inspector to locate element classes and how to ensure your selectors will override the original theme.

    Reply