Template MakeOver – Procedure 3


Considering my last post in this ‘series’ was published almost a year ago, an update is in order! My plans to present a ‘reality’ show the bland Sand Dollar template makeover went awry. There were several reasons:

  • the readership was not there to find a following to tune into this ‘show’
  • those visiting the ‘ugly’ version were turned off or not interested in the nitty- gritty details
  • my attention was not focused on growing this blog (ironic since the tag line is about ‘growth’)

So I made changes periodically behind the scenes. Now what you see is what you get. It was a good experience in learning CSS (Cascade Style Sheet) . The process helped me understand how you can make dramatic effects with a quick template change.


Dramatic Column Swap with a few keystrokes

Most blogs display posts on the left side, so visitor’s eyes become trained. Until today, my blog may have disoriented them a bit. Here’s the quick fix I just made, so now you have no excuses for not leaving a comment.

Like many starter templates this one has variables defined for “$startSide” and ‘$endSide’. In Blogger language it’s the left and right sides of a blog. So I was able to just switch the start/end names in the styling code. [If your template does not have these variables, just substitute ‘left’ for ‘$startSide’, ‘right’ for ‘$endSide’ in the instructions.]

Why change the margins? Regardless of which column touches down on the left side, it needs to have the custom distance you set from the left border.

1. find the main (post) section of the html, change float and margin only.

div#main {
float: $startSide;
margin-$startSide:15px;

2. find the sidebar (post) section of the html, change float and margin only.

div#sidebar {
float: $endSide;
margin-$endSide:15px;

Note: If you have “text-align: $startSide; ” or “text-align: left;” do not change it. Your content must continue to align left, not right.

The only thing remaining on the previous makeover list is to divide the sidebar, for a three column design. Stay tuned for that magic act…

You may also be interested in other posts in this series.
Template Makeover – Procedure 1
Template MakeOver – Procedure 2
and Quick Tip: A Word About Blog Margins and Such


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


3 Comments

  1. It is a quick tips for blogger to align their site with CSS,
    I think it'd be better if you can illustrate how it works in CSS…
     
    and the start and end, you can just replace with right and left…
     
    so the container can either float left or right… =), CSS is fun and really flexible…

  2. Hi Sayz! 🙂 Good point, I'll update the CSS code to show 'left/right' values. I'll leave $startside, etc because the Sand Dollar template has that variable alredy. Not sure what you mean by 'illustrate' — a picture? If you have a post with more details just leave the url.

Comments are closed.