Adding Background Behind Text and Title

Comments

• Options

  Allen Registered Users Posts: 10,011 Major grins

  August 29, 2014 edited August 29, 2014

  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.

  Al - Just a volunteer here having fun
  My Website index | My Blog

  0
• Options

  Allen Registered Users Posts: 10,011 Major grins

  August 29, 2014 edited August 29, 2014

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

  Al - Just a volunteer here having fun
  My Website index | My Blog

  0
• Options

  smcust Registered Users Posts: 17 Big grins

  August 29, 2014 edited August 29, 2014

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

  0