Jump to content
Sign in to follow this  
yemoonyah

Part of content background different color? + round corners?

Recommended Posts

yemoonyah

Hi, I'm trying to get the top 100px of my content area (including the title) to have a different color (blue) than the rest (grey). And if possible I'd like to add rounded corners. I want it to look like this: http://www.affordablebusinesslaw.com/packages.html I used the following code to get the content background to be grey with a white border but now I don't know how to proceed: div#pagelines_content {background-color: #cccccc; margin-top: 0px; border: 2px solid #ffffff } Any suggestions? Thanks!

Share this post


Link to post
Share on other sites
catrina

If you want the top 100px to be a different color from the bottom area, I think the easiest way to accomplish that would be with background image (a vertical strip with the top 100px in blue and the bottom part in grey) set to repeat horizontally so that it covers that content area space. CSS can be used to do this. The rounded corners is a separate issue. They'd also need to be generated with custom CSS. Which one would you like to tackle first?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
yemoonyah

The blue strip on top of the content area is more important for now. But how do I set a background image for just the content area (and not the nav bar and header)? Thanks for the help!

Share this post


Link to post
Share on other sites
Rob

Yemoonyah, I tried this: You'll need to replace my image and correct the padding:

.hentry h1, .hentry h2 {
	    background-image: url("http://www.epicurus.com/members/wp-content/uploads/2012/09/backTile.gif");
	    margin: 0 0;
	    padding: 32px;
	}

You'll have to find the right code for rounded corners, or just include them in your image. May also need to set the repeat, depending on your image. Mine is tiled all over the available space.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah

Thanks for the help! Unfortunately this isn't working. The background image doesn't show up at all.

Share this post


Link to post
Share on other sites
Rob

Your image link is missing single quotes and a closing parenthesis. url('http and Background.png') !important See the instructions here for additional guidance: http://www.w3schools.com/css/css_background.asp


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
yemoonyah

phew, it took me hours and hours of tinkering with the code and the bg image itself but I finally made it work :) div#pagelines_content { background-image: url("image url"); margin: 0 0; padding: 0px; } Now I have one more question. How do I get the main text (below title) to display a little lower?

Share this post


Link to post
Share on other sites
batman

Hi yemoonyah You can try with

 .mcolumn-pad > :first-child, .copy-pad > :first-child, .scolumn-pad > :first-child, .sidebar_widgets > :first-child {margin-top: 50px;}

modify #px as you like.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob
.widget-pad {
	    margin-top: 32px;
	    padding: 10px;
	}


Former PageLines Moderator, Food Expert and Raconteur

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

Sign in to follow this  

×