Rounding Up
On March 13, I discussed how you make your site have a fixed width with rounded corners on the main content area. While I demonstrated the technique in class, I did not write up detailed instructions for those of you who may have missed it. The file I used to demonstrate this technique can be downloaded from the site to give you a starting point.
Here are the steps involved…
- Decide how wide you want your page to be in pixels. The example assumes a 760 pixel wide area, but another good size is 980 pixels, which is how the iPhone scales when someone goes to a web page.
- Create an image of a rounded rectangle box, similar to the one in the download called corners.psd, using the rounded rectangle tool. 10 pixels is usually a good radius for the corners and can be set in the options toolbar. We’re going to use a single image to provide the top and bottom rectangles so you do not need to create two images.
- Export the image as either a PNG or GIF graphic so the parts outside the box are transparent using “Save for Web & Devices…” from the File menu. Make sure the transparent setting is checked for whichever file time you are exporting.
- Copy the file you saved to your JB3623 theme in the images folder using Webdav. Putting it there will allow you to use relative addressing from your style sheet. Either copy the name or give it one you can remember.
- First up, add this html to the file footer.php in your theme folder:
<div id="bottomcorners"></div> - Next, add this html to the file header.php in your theme folder:
<div id="topcorners"></div> - Don’t forget to save. Adding that code to those two files creates layout elements that we can assign our rounded corners to as background images.
- Next, you edit your CSS, modifying the #everything ID’s margin, padding and width properties:
#everything {
background-color: #fff;
margin: 0 auto;
padding: 0;
width: 760px;
}The margin property will now have no top or bottom margins and be centered on the page. The width will set the width of the page.
- In order for your corners to show up, you’ll need to add CSS for the IDs you added to your header.php and footer.php files.
#topcorners {
background: url("images/corners.png") top center no-repeat;
height: 25px;
margin: 0 auto;
padding: 0;
}#bottomcorners {
background: url("images/corners.png") bottom center no-repeat;
height: 25px;
margin: 0 auto;
padding: 0;
}Notice that we’re only using one image. By placing it in the top center area of the header and the bottom center of the footer, it ends up being cropped so the part you don’t want displayed is hidden.
- Also, modify the #footer ID so that it contains something like this:
div#footer {
clear: both;
margin: 0;
text-align: center;
} - Finally, in the WordPress admin area, go to Presentation->JB3623 Options and change the left and right margins to 0. That will make everything line up correctly.