Adding Background Behind Text and Title

smcust

Searching for the CSS got me close, but ended up changing all text in my site (including site's logo).

I'm trying to put a white, rounded corner, with box shadow background behind all of my pages with text, including the page's title.

Desired effect (looking at the background of the text against a colored site background): http://tinyurl.com/mn6kreq

Example pages (I'd like this to be site-wide wherever there is text added to a page like this, and maybe on html pages I'll be creating):
http://tinyurl.com/lhbzfss
http://tinyurl.com/muaruxj

Allen

smcust wrote: »

Searching for the CSS got me close, but ended up changing all text in my site (including site's logo).

I'm trying to put a white, rounded corner, with box shadow background behind all of my pages with text, including the page's title.

Desired effect (looking at the background of the text against a colored site background): http://tinyurl.com/mn6kreq

Example pages (I'd like this to be site-wide wherever there is text added to a page like this, and maybe on html pages I'll be creating):
http://tinyurl.com/lhbzfss
http://tinyurl.com/muaruxj

Those borders are actually images. They were added using CSS though.

You have multiple widgets stacked so each would have to be done, perhaps with hiding the adjacent
borders so it looks like one continuous box. The top & bottom widget margins can be adjusted to bring
the boxes together.

Here's a quick example for this page. http://smu.gs/1pdbtVI

.sm-page-node-jL9Sh .sm-page-widget-7280084, 
.sm-page-node-jL9Sh .sm-page-widget-7280194 {
border: 6px ridge #7FB1B3;
background:rgba(127,177,179, .20);
}

.sm-page-node-jL9Sh .sm-page-widget-7280084 {
border-width: 6px 6px 0;
}

.sm-page-node-jL9Sh .sm-page-widget-7280194 {
border-width: 0 6px 6px;
}

Each page will have to be independently addressed.

Allen

Because those CSS rules carry a specific page class name the CSS can be put in the "entire site" CSS.

smcust

Thanks Allen!!! This worked PERFECTLY! I ended up removing the "title" widget, and just added the page's title to the text widet. I hope this doesn't affect my SEO?

For others finding this thread, here is the CSS I ended up with:

.sm-page-node-jL9Sh .sm-page-widget-7280194 {
  -webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 14px -2px #9C9C9C;
  box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 14px -2px #9C9C9C;
  -moz-box-shadow: inset 0px 0x 10px 0px #ABABAB,5px 5px 14px -2px #9C9C9C;
  -o-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 14px -2px #9C9C9C;  
  border-radius: 18px;
  background: #ffffff;
}