Rounded corners for header and sidebars

Thanks to Beta Blogger for Dummies, I've discovered an easy way to create rounded headers and sidebar enclosures: Cornershop!

Using CSS and HTML code, you can create rounded corners for your header or sidebars in a variety of colours to blend seamlessly with your colour scheme. Simply visit the Cornershop website, specify the colours of the box and background and the roundness of the corners you require. Cornershop will then generate four corners and the CSS/HTML code to paste into your blog template.

Here's how to do it:

1. Head over to the Cornershop website. Choose the colours of your background and foreground in the boxes provided. If you need the HEX values for your chosen colours, try Cedges Colour Calculator which will generate the values for you.


2. Choose the roundness of your corners: as a guide I'd say that 10 is neatly rounded, while 20 is very rounded.


3. If either your foreground or background is patterned or transparent, choose transparency for this element of your design.


4. Click on "create graphics" to generate the corners and HTML/CSS code you will need to round your corners.


5. Now, you will need to save the corner image files to your hard drive, then transfer then to an image hosting account as you will need to link to these images in order for them to appear in your blog template. Imageshack and Photobucket both offer free image hosting if you do not already have an account elsewhere. Make a note of the full web address of these images as you will need to use these soon.


6. Copy both pieces of code (CSS and HTML) provided by Cornershop and paste these into a simple text editor (such as Notepad) for ease of use.


7. In the CSS section, insert the full web address for all of the image files. For example, for the NE.gif file, the address would be something like: "http://www.imagehosting.com/images/ne.gif" .


8. Copy and paste this section of modified code just before the closing </b:skin> tag in your template

If you want to round the corners of your header, you should follow these steps:

• Log into your Blogger dashboard and go to Template>Edit HTML.


• Now find this line in your template:

  <div id="header-wrapper>



• Immedietly after this line, paste the following code:

  <div class='box'>
  <div class='boxtop'><div></div></div>
  <div class='boxcontent'>



• Next, find these lines:

  </div>
  <div id='main-wrapper'>

  Immedietly before these lines, paste this section of code from the HTML provided by Cornershop:

  </div>
  <div class='boxbottom'><div></div></div>
  </div>



• You can preview your blog first to ensure it looks the way you would like, then press save and enjoy the new look of your blog header!

To round the edges of your sidebar, use these steps instead:

• Find this section in your HTML template:

  <div id='sidebar-wrapper'>

  Immedietly after this line, paste the following code:

  <div class='box'>
  <div class='boxtop'><div></div></div>
  <div class='boxcontent'>



• Now find the closing </div> tag for the sidebar wrapper. Immedietly before this tag, paste the following code:

  </div>
  <div class='boxbottom'><div></div></div>
  </div>



• Preview your template, and if all looks as you would like, save your template and enjoy your rounded corners!

You can use more than one set of corners in your template if you like (for example, one for the header and another for the sidebar). However, if you want to use different colours for these, you must make the image files, the CSS and the DIV elements unique. For example:

• the image file, ne.gif when used for the sidebar could be renamed sidebar-ne.gif
• In the CSS code, the elements named .box and .boxtop could be renamed as .sidebar-box and .sidebar-boxtop
• In the HTML code in your template, you should write <div class="sidebar-box"> rather than the header's <div class="box">

Of course, you could create rounded corners by creating your own transparent gif's in Photoshop or something, but I find the cornershop method to be much simpler and easier! Just be sure to input the correct colours you would like to use when creating your corners as the code you are given for the CSS style will override any colours you use within Bloggers "fonts and colours" section in the dashboard.

Please feel free to leave your comments and suggestions below.

Technorati Tags: rounded+corners | rounded+header | blogger+hack | template | blog+design