Content Background Image

[chules+ 4]

I am working on a site at http://heislerind.pingandreply.com trying to replicate the look of the attached mockup. I am getting very close to achieving this look but having some difficulty with the content background. You can see on the content background that along the two edges there is a blue faded looking border. I have also attached an image of just the main content box that I am not using on the site.

Right now within Pagelines I have the content background set to #ffffff in the basic layout section. What I am trying to do is figure out the easiest way to add a blue border, whether a graphic or a css blue border along the sides of the content box. This would be used just to give some separation between the background and the content background.

Does anyone know how to achieve this look. As stated if I can somehow use this maincontent box image to get this effect it would be great but a simple CSS blue border on the right and left sides of the content box would also do the trick as well. Thank you - chules

[Rob 547]

If you use Firebug http://www.getfirebug.com with Firefox you'll be able to identify the elements to which you may add the background image.

http://www.w3schools.com/css/css_background.asp will help you with how to add backgrounds by CSS.

You can do your changes either in Dashboard > PageLines > Site Options > Custom Code > CSS Rules or.... in wp-content/plugins/pagelines-customize/style.css (also accessible via Dashboard > Plugins > Editor.

[chules+ 4]

I use Firebug all the time. However, to achieve the look of the content background with the two blue vertical lines that separate the page background from the content background seems to be quite involved. I have been trying to see where I can add this via css using firebug and can not seem to find out where to change this. Thank you - chules

[Danny+ 1,327]

Hi Chules,

Add this to your custom CSS:

#features .content, #content .content, #morefoot .content {

box-shadow:0px 8px 8px blue,0px 10px 12px blue,0px 12px 14px blue;

}

[/CODE]


However, you will need to add both the box-shadow code for Mozilla and Webkit. You can use this to assist you - http://css3generator.com/

[chules+ 4]

Danny, the code you provided worked! However, I'm not sure what the box-shadow code for Mozilla and Webkit is. I went to http://css3generator.com/ but I'm not sure what I need to do with this. I did replace the "blue" in the code provided with #3E73A5 that is the shade of blue I am working with.

#features .content, #content .content, #morefoot .content {

box-shadow:0px 8px 8px blue,0px 10px 12px blue,0px 12px 14px blue;

}

Thank you for your assistance- chules

[Jenny 33]

The CSS generator Danny linked you provides the code you'll need to add for webkit.

[chules+ 4]

I went to http://css3generator.com/. I then selected from the dropdown "Box Shadow". I change shadow color to Hex and enter #3E73A5. I get the following result

-webkit-box-shadow: #3E73A;

box-shadow: #3E73A;

I enter this into my custom css section in Pagelines and my header becomes corrupted displaying a large white box. I have never used webkit or box shadow before so I'm not sure if I'm doing something wrong. Currently on my site here is the only code I have so far

#features .content, #content .content, #morefoot .content {

box-shadow:0px 8px 8px #3E73A5,0px 10px 12px #3E73A5,0px 12px 14px blue;

}

Thank you - chules

[Danny+ 1,327]

Hi Chules,

All you need to do is copy the box-shadow code and replace box-shadow with -webkit and -moz. I have done this for you, replace the code I gave you above with the code below.

#features .content, #content .content, #morefoot .content {

box-shadow:0px 8px 8px #3E73A5,0px 10px 12px #3E73A5,0px 12px 14px blue;

-webkit-box-shadow:0px 8px 8px #3E73A5,0px 10px 12px #3E73A5,0px 12px 14px blue;

-moz-box-shadow:0px 8px 8px #3E73A5,0px 10px 12px #3E73A5,0px 12px 14px blue;

}

[/code]