Template Makeover – Procedure 1 with Design Plan

This post gives the plan for touching up our blog’s design. As you recall from the first article of the Blogging Design Tips Series, we used one of the basic templates offered by Blogger. The original “Sand Dollar” template has two columns taking up the full width of the screen, using flexible column widths. At this point we want to change the basic look and feel —layout, spacing and backdrop colors. We want the thumbnail in BlogCatalog or other social media to be more inviting than the “before version” on July 7. We want first time visitors to feel the design has a bit more thought, not just great content! In other words, cosmetic and general readability changes first.

Our challenge is to do this without installing a different template. Along the way, you will get a live tutorial on template structure and learn common tweaks that anyone can do with a little courage and determination!

THE NIP & TUCK APPROACH TO TEMPLATE UPDATES

The plan is to take one step at a time. The first set of procedures will address only the style sheets (CSS), without using background images. Font sizes and colors will come later, since they are easier to make using Blogger’s ‘Fonts and Colors’ tool. At that point we’ll incorporate more of what we’ve learned about designing for visitors with disabilities — how to assist them in reading our content. Lastly we’ll look at adding a menu bar and a third column, which mean cutting into the ‘bone’ a bit more. How much additional work will depend on the results of the first cosmetic surgery!

Each surgical procedure is part of the plan to reach the ‘after’ snapshot. You don’t want your friends to notice anything too drastic at first! And you don’t want to overwhelm yourself when learning template changes! I arrived at our design mock up by looking at the photos of perfect or famous blog thumbnails, taking the look of a nose from here and shape of an eye from there.

*** press to open photo book ***


USING THE TEST BLOG FOR MOCK UPS

Following my own advice, I set up a test blog to plan the procedures that take us to the final design makeover. The test blog has just a few simple, made up posts — no copies of existing posts from the real blog. If copy a real post with links to other blogs, then you may get a backtrack to the very test blog you’re hiding from search engines and your Blogger profile!

I then laid out the surgery schedule to be in the operating room for a limited amount of time, taking snapshots and letting you following from the observation galley. The tutorials with the template changes serve as your notes. You can try them out on your test blog. Just understand that it you’re not using the ‘Sand Dollar’ template, the structure names may be slightly different. Always backup your template, even the test blog, and preview each change to see if the effect on the structure or element you’re operating on. Often if it looks weird, you mistyped something and you have a chance to correct before closing up the patient.

PROCEDURE #1

Our first template surgery affects the post background color and width of text across the post column. Our goals for this procedure center on readibility and some color contrast in the layout.

  1. Use a white background with the black font for more contrast in reading the post.
  2. Limit the length of text across the line to the standard of 65 characters.
  3. Breakup the plain-ness of a monochrome blue for both the posts and sidebar.

The code to do this is simple and is shown in the following box. Always use the find feature (Ctrl + F) to position the template code to the correct section. The ‘find’ text is highlighted in blue. Then carefully add the appropriate line or change values highlighted in red.

@media all {
div#main {
background:#ffffff;

.post {
width:85%;

*** press to show notes ***

RESULTS
The results are subtle but move us in the right direction! Stay tuned for the next procedure — sign up to receive the next post in your email box! Let me know what you think and where you’d like to see the next improvement. We have an overall plan primarily for tutorial purposes but it’s flexible!

RELATED ARTICLES– Thanks to these experts for their pre-surgery consultations over the blogosphere:
CSS Portal has an excellent guide on CSS which explained borders.
BloggingBasics 101 for its use of the scrollable bar to hold template changes and not obscure post text. It uses a style box with a width of 624px but I changed to 85% due to this template’s flexible columns. But you can do the same for fixed columns.
Easy Calculations for its color converters, RGB to hex and vice-versa
Html code converter to display html as characters in a tutorial post — not necessary for CSS code, but we’ll use in later procedures.
Shrink the web and Web shots pro– easy software for creating thumbnails of webpages online.


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.