Blogger Template Overhaul – Part 3 of 8
Coding, Geeky, Web May 16th, 2006Design Process
It’s important for me to retain an overall look to my blog design. So many blogs out there have lots of different fonts with different colors and sizes. This just confuses the reader as they scan over the page. You will need to retain some “conformity” to the blog design to make it look good.
This is where the CSS code in Zone 2 comes into play. By defining the font settings for the post text in Zone 2, you can ensure that it will look the same on every post. Before the days of CSS code, each setting had to be hand coded. But now you can change one thing in Zone 2 to make it apply to the whole blog.
At present, current web design features the following themes and styles
- Rounded shapes/boxes
- Large fonts
- Pastel colors
- Lots of Whitespace
- One contrasting color to highlight a feature
You can read more about current web design trends at the Naked IT blog and a good list of examples can be seen at the Webdesignfromscratch site. I am going to try and follow these current design themes when we get into re-doing the template a little later in the series.
I am not intending to change the layout of the blog too much. I am happy with the blog having one large column for the posts and one sidebar to the right hand side. The sidebar position can be changed to the left quite easily by swapping the float: items from left to right and vice versa in Zone 2:
#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}
You can also increase the width of the 2 columns to give you more space, but remember to keep the sum of the values within the width specified in the #content section of Zone 2:
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
The #content is the overall page width and the #main (posts) and #sidebar (sidebar) have to fit within this value plus a bit more to allow for padding. You can of course ammend the width of the #content section if you need to if you drasticly change your widths.
Images
You can use images to add style to your design, but there is no need to go over the top. Remember that you might want to be adding images to your posts (which I try to do in each post) and that might make it all look a little messy.
You can use the “add image” facility provided by Blogger to upload images to your posts but I prefer to use Flickr to host images that I use in my template. If you really don’t want to use Flickr, you can create a draft post in blogger with images in that you have added and view the HTML code of the post to get the image URL to use in the template. But if the post is lost for any reason, so are the images and your template design.
Space
Remember not to let your design get too crowded on the screen. Less is more when it comes to good web design and having a page with flashing animated images all over it will just put people off. As will having too many javascript add-ons like chatboxes, calendars and falling snowflakes all over the screen. I have also seen that some Javascript add-ons also produce popup windows with links to Spyware – so use them sparingly!
In the next part of the series we can begin editing the template code and make our first changes.
This is part of the Blogger Template Overhaul series.
Part 1 – Introduction
Part 2 – Template Code
Part 3 – Design
Part 4 – Headers
Part 5 – Posts
Part 6 – Comments
Part 7 – The Sidebar
Part 8 – The Footer
Entries
May 18th, 2006 at 1:17 pm
Nice article for the beginning bloggers.
May 22nd, 2006 at 1:45 am
Right on! Good stuff, keep it goin dude
May 30th, 2006 at 3:51 pm
[...] Part 1 – Introduction Part 2 – Template Code Part 3 – Design Part 4 – Headers Part 5 – Posts Part 6 – Comments Part 7 – The Sidebar Part 8 – The Footer [...]
July 14th, 2006 at 10:33 am
Excellent article! Is there a way to change the color of the main posting/comments area, while leaving the background the same?
July 15th, 2006 at 1:37 am
Yes, you can!
In the CSS code, under the #body section you can define the background color as say white (#FFFFFF) an then define the background color differently in the #main section to achieve a different colour.
This will leave the background white and make the main section a different colour. Don’t forget to change the #sidebar section too otherwise that will still be white.
July 18th, 2006 at 3:59 pm
OK, I changed the my #main section to a different color…thanks for the help, Taoski!! I now have it set up with a blue background and white #main section. Now that brings me to another question – I’d like to make the #main section appear a little more stylized by making the corners rounded. I know this is probably done by creating images for the corners, but I don’t know where to put them in the code. Any thoughts?
July 19th, 2006 at 1:28 am
The rounded corners are probably too complicated to go into here.
I suggest searching google and check out the methods there.
You can do it with, or without images.
August 24th, 2006 at 2:19 am
[...] Part 1 – Introduction Part 2 – Template Code Part 3 – Design Part 4 – Headers Part 5 – Posts Part 6 – Comments Part 7 – The Sidebar Part 8 – The Footer [...]
August 9th, 2007 at 1:43 am
Hi, I’m trying to set up my blogger template to not resize my images so small. Default seems to be 400px wide, but I made room for about 620px and would love to have my pictures sized larger. Any help on how to do that? Thanks so much!
August 9th, 2007 at 4:57 am
CW: you can add a width and height to the image tag like this:
August 9th, 2007 at 4:57 am
img height=100 width=100 url=”jsjsj.jpg”
August 9th, 2007 at 12:00 pm
Taoski: yes, that works, but it’s pixilated when going larger than 400px. I’d like to have my images upload larger than 400px so they still look sharp at 690px wide.
August 9th, 2007 at 2:45 pm
Then you will need to upload them at a larger resolution I guess. When uploading the images, can’t you ask for them not to be resized and then reduce the size after?
Alternatively, if you post the imags to Flickr first, they automatically generate different size ones for you!