Theme test: ‘dots2′
You might just have started a blog on Blogsome. Perhaps you are using the WYSIWYG editor to write your posts quickly and easily. You probably think HTML and CSS code doesn’t matter and it’s irrelevant to you. But with some themes, that just means you’ll be making a mess of things even sooner. Take a hint from this:
Just checking out one of the Blogsome default themes, ‘dots2′. It was created by Wordpress maven, Alex King. But how well does it work with Blogsome?
Invalid code
I always run a new theme through the W3C validator before making any other changes. ‘Dots2′ throws up 14 errors. Let’s see if I can fix them.
Firstly, I changed some of the coding in the Search form. Where it said method="POST", I changed it to method="get". Result? Now only 13 errors.
Google ad code
Next, I deleted this bit of code from just before the Google ad section:
<ul><li id="google"><ul><center>
and this from just after the ad section:
</center></ul></li></ul>
Then I revalidated the page. Wow. It’s now down to only seven errors!
Image code errors
The next thing that caused validation errors was the Blogsome promotion image in the left side column. The error is caused by this code, which sits just below the Google ad section:
{$advertisement_image_block}
This outputs the following image code:
<img src="http://www.blogsome.com/site-specific/images/ad.png" border="0">
To be properly valid, border=”0″ should be replaced by style=”border:0;”, followed by a single space and then a forward slash. Or you could, alternatively, copy the image and replace the original code. Depends how bothered you are about it.
For testing purposes I chose to delete the {$advertisement_image_block} code. Result? At last, I had a valid page to work with.
HOW TO AVOID MISTAKES IF YOU CHOOSE THIS THEME
If you don’t have much experience with HTML or CSS it’s easy to make a mess of this theme. I changed some of the background colours to make it easier to see how this theme is laid out. Looks complicated, doesn’t it?
It’s simple really. There’s one div called ‘content’, which is where your blog posts go. That’s in the middle.
And there’s one menu.
But it looks as if there are two menus!
This is because this theme uses a technique called CSS-P, a combination of absolute and relative positioning for each element.
IF YOU DO NOT UNDERSTAND CSS POSITIONING, DO YOUR HOMEWORK NOW!
If you do understand it, you’ll see it makes sense to put a few HTML comments in the page code, to make it easier to see where each section is if you want to make alterations.
The main area where people go wrong with this theme is if they try to include images that are too large for the menu sidebars. Read the template carefully and soon it will all make sense.
On the other hand, you could just choose an easier theme to start with!
)