Top Navigation

Creating a web 2.0 blog - part 2

January 04, 2007 from

Here we go again, continuing the creation of my brother's blog, Blackbelt. Fixing some design issues and creating the XHTML and CSS template.

Design Changes

My brother had asked for some minor changes on the design of the blog, mainly in the sidebar, where he hadn't liked the round corners tha I had done, although he said he really liked the feeds' box which was black.

Feeds' box, darker and with round corners
Feeds' box, darker and with round corners

The new sidebar was created using the same style of the feeds' box, but lighter.

Feeds' box, darker and with round corners
Using different style for visited links, however IE6 doens't do that.

XHTML and CSS

Using the basic XHTML generated by the Apache Roller, the blog engine that my brother uses, I started creating the CSS.

After a couple of hours everything was pretty much done and working fine, however there were some problems to be fixed with .png images and the box model under Internet Explorer 6.

With everything fixed, the template is done, working fine in all the major browsers: IE 6 &7, Firefox, Safari and Opera. If you want to take a look you can download all files that I have used so far.

http://abduzeedo.com/files/imagecache/img690x320/originals/blackbelt_blog_0.png
AttachmentSize
index.html12.11 KB
screen.css4.13 KB
images.zip46.94 KB

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Sponsored Links:

More articles about:

Comments and Reactions

Sponsored Ads

Featured Tutorial

Easy Space Scene in Pixelmator
 Easy Space Scene in Pixelmator
In this tutorial, I will show you how to create a space scene in Pixelmator without using a stock photo or special brush, just the ones that come with Pixelmator. We will play with some filters and blending as well. The whole effect will not take you more than 20 minutes, and the end result is really impressive, very inspired on the Snow Leopard space theme design of the CD box. This tutorial was originally written for the Pixelmator Learn site, you can see more tutorials I wrote for Pixelmator at http://www.pixelmator.com/learn/

Try this Wallpaper

Wallpaper of the Week #98 - Saad Moosajee
 Wallpaper of the Week #98 - Saad Moosajee
The wallpaper of this week is a image created by Saad Moosajee, a young self-taught freelancer illustrator and Art Director from England but currently living in Denver, CO, United States. His work has been exhibited in multiple galleries and published in a multitude of magazines and books. He has also served as the Creative Director of slashTHREE.com for over 2 years, and is also a member of The Keystone Design Union. For more information visit Saad's website at http://saadart.com/

Book Suggestion

War Posters: Weapons of Mass Communication
 Book Suggestion: War Posters - Weapons of Mass Communication
The book suggestion of this week is for those out that love posters, I believe everyone. The book is calledWar Posters: Weapons of Mass Communication and as the name says it's all about war posters. It is divided by wars and you can get tons of inspiration from it.