41 How to add CSS Rounded Corners to your Blogger Template March 21, 2008 /

Rounded corners can add a great deal of style to an otherwise simple Blogger template. Luckily, you don't need to create complicated images and CSS code to achieve this: Spiffy Corners is a free service which generates code that you can simply add to your Blogger template, and no externally hosted images are required!

Since I originally wrote about Spiffy Corners, many people have asked me where they should paste the generated code in order to make those rounded corners appear. So in this article, I will offer a full explanation of how to use Spiffy Corners to create rounded corners in the main and sidebar sections of your Blogger template.

What is Spiffy Corners and How Does It Work?

Spiffy Corners is an online generator which creates CSS and HTML code to create anti-aliased rounded corners for your web/blog design. The code generated by Spiffy Corners does not require any images or JavaScript; using this method to create rounded corners for elements of your blogger template will not slow down page loading time at all, and can add a truly distinguished look for your theme.

The way this method works when added to your Blogger template is simple and yet truly effective! Spiffy Corners generates purely HTML tags which are styled using CSS; when you add the HTML section to your Blogger template, the area it creates appears to have rounded corners because of CSS styling.

The HTML tags are contained within a DIV element.As DIVs expand to the complete width of their containing element, it is important that this code is placed inside another element, or the color will seem to bleed across the whole template and spoil the effect.

How to use Spiffy Corners in your Blogger template

To explain how to use Spiffy Corners in your own Blogger template, I will use the default Minima template as an example. The same principles will apply no matter which template you are using, and I will outline possible differences in template code where appropriate.

Currently, my Minima template appears like this:

I would like to add a pale blue background with rounded corners to the main posts column. Note that the main background color of my blog is white.

First of all, I need to visit the Spiffy Corners website to generate the correct code and color scheme to create the rounded corners for my main section.

Here is what the initial screen looks like:

Here I need to choose the background and foreground colors to generate the correct code for my design.

As my background color is white (hex value #FFFFFF), I choose this for the background color. The hex value #C3CCEE is a nice shade of pale blue which I choose for the foreground color.

There are three degrees of "roundness" defined beneath the color choices: 3px, 5px and 9px, but unfortunately only the 5px radius currently works!

When I click on the 5px button, this displays an example of what my rounded corners will look like, and generates the correct code for me to use in my blog template:

How to use the code provided

This is generally considered the most problematic part of using Spiffy Corners (especially when used for Blogger template designs!).

I'm going to break this down into three sections of code which should help explain exactly where to copy and paste the code.

The CSS Section

The CSS code which I generated for my pale blue rounded boxes appears like this:

<style type="text/css">

.spiffy{display:block}

.spiffy *{

  display:block;

  height:1px;

  overflow:hidden;

  font-size:.01em;

  background:#C3CCEE}

[more code here]

.spiffy5{

  border-left:1px solid #d2d8f2;

  border-right:1px solid #d2d8f2}

.spiffyfg{

  background:#C3CCEE}

</style>

In this example, notice that I've highlighted the <style> tags in bold red. When using this code in your Blogger template, these style tags are unnecessary!

To add this style code to my template, I will copy the CSS code (excluding the unnecessary style tags) to my clipboard.

Then in a different tab/browser window, I need to go to Layout>Edit HTML in my Blogger dashboard without clicking the "expand widget templates" box. The style code I have copied needs to be pasted just before the closing <b:skin> tag in my template:

.spiffy{display:block}

.spiffy *{

  display:block;

  height:1px;

  overflow:hidden;

  font-size:.01em;

  background:#C3CCEE}

[more code here]

.spiffy5{

  border-left:1px solid #d2d8f2;

  border-right:1px solid #d2d8f2}

.spiffyfg{

  background:#C3CCEE}

]]></b:skin>

Now for the HTML code!

I now need to add the HTML code which creates the rounded corners to the main posts area of my blog template.

The HTML code generated by Spiffy Corners should clearly shows where to put my content (IE: the widget used to display my blog posts). But to work with this effectively, the code should be split into two sections, like this:

Splitting the HTML code into these two sections will make it much easier to work with!

To start with, I will copy "Part 1" of this code to my clipboard. I need to add this just after the opening DIV tag for the main posts section.

Next I will copy "Part 2" of the HTML code, and paste this just before the closing DIV tag for the main posts section.

Here is the code in my Blogger template which shows exactly where I should paste these different sections of code:

      <div id='main-wrapper'>; <!-- This is the opening DIV tag >

Paste Part 1 of the HTML Code Here!

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

Paste Part 2 of the HTML Code Here!

      </div> <!-- This is the closing DIV tag -->

Note: For different templates, the "main-wrapper" DIV may be named something different, such as "main-wrap" or even "main". The best way to find where exactly to paste your code is to look for this section in your blog template:

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

And paste the relevant sections of code above and below this.

Now if all goes to plan, when previewing the template it should appear like this:

In this case, I can save my template for the rounded corners to appear around my main posts section.

But unfortunately, Blogger templates can be quite finicky when trying to use Spiffy corners... Which is where the troubleshooting comes into play!

Troubleshooting Spiffy Corners

The most common problem experienced when using Spiffy Corners in Blogger templates is a gap between the corners and the main content section:

This can be quite infuriating, especially as this doesn't occur in all template styles! But there is a solution: adding negative margin values to the top and bottom of the "spiffyfg" div. This draws the top and bottom margins inwards and reduces the gap.

The easiest way to draw the margins in is to add margin properties in the style section of your Blogger template.

In my example template, the style for "spiffyfg" is defined like this:

.spiffyfg{
  background:#C3CCEE;
  margin: -15px 0 -20px 0;}

The code highlighted in bold red is additional margin properties which I have added to draw those margins inwards. In your own template, you may need to adjust the values of these negative margins slightly to prevent any of your content being clipped by the margins.

This technique has worked for me each time there was a gap between the top and bottom sections of my rounded corners. I hope it will work for you too!

Using Spiffy Corners in Sidebar Sections

To round the corners of your sidebar(s), the same principles apply.

Here is the template code for the sidebar in my example template which shows where you will need to add the Spiffy Corners code:

      <div id='sidebar-wrapper'>

<!-- Paste Part 1 here --> 

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

</b:section>

<!-- Paste Part 2 here --> 

      </div>

In different templates, the <div id='sidebar'> may be named differently. If you are able to locate this section of code (or similar) you should paste the HTML code for your Spiffy Corners directly above and below as appropriate:

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<!-- widget codes here -->

</b:section>

Using different color schemes for different elements

One of the great things about Spiffy Corners is that you can create many different color schemes and name each one differently.

For example, if you wanted a red foreground for your main posts section, and a blue foreground for your sidebar, you can generate two different sets of code named "Red" and "Blue" respectively.

You can then add the CSS code for both "Red" and "Blue" to the <b:skin> section of your Blogger template, and paste the corresponding HTML code in the main and sidebar sections.