Jump to content
chules

Content Background Image

Recommended Posts

chules

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

post-15427-0-63969400-1347813791_thumb.j

post-15427-0-46831700-1347813912_thumb.p

Share this post


Link to post
Share on other sites
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chules

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

Share this post


Link to post
Share on other sites
Danny

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/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
chules

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

Share this post


Link to post
Share on other sites
Jenny

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


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
chules

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

Share this post


Link to post
Share on other sites
Danny

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]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×