Top Navigation

Creating a web 2.0 blog - part 2

janeiro 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.br/files/imagecache/img690x320/originals/blackbelt_blog_0.png
AnexoTamanho
index.html12.11 KB
screen.css4.13 KB
images.zip46.94 KB

Sobre o autor

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

Featured Tutorial

Globo 3D no Photoshop
Globo 3D no Photoshop
Algumas semanas atrás um amigo meu perguntou como fazer um globo 3D bacana usando o Photoshop. Eu não sabia como fazer um mas achei a ideia interessante, então decidi tentar. Sabia que o Spherize funcionaria mas não sabia como. Então neste tutorial eu vou mostrar a vocês como criar um globo 3D no Photoshop usando ferramentas básicas e o filtro Spherize. Não vai levar mais de 30 minutos para completar o tutorial e a técnica é bastante útil para ícones e logos, então vamos lá.

Try this Wallpaper

Wallpaper da Semana 181 by Carlos Lerma
Wallpaper da Semana 181 by Carlos Lerma
O wallpaper dessa semana é uma imagem criada por Carlos Lerma, um ilustrador de Mazatlán, México. O nome da imagem é Los Olvidados e foi publicada no Livro do Abduzeedo, que em março estará disponível em português. Para mais informações sobre o artista visite http://www.lerms.daportfolio.com/ Versão Desktop

Book Suggestion

Sugestão de Livro: The Art of the LP: Classic Album Covers 1955-1995
Sugestão de Livro: The Art of the LP: Classic Album Covers 1955-1995
A sugestão de livro dessa semana é realmente inspiradora, especialmente para aqueles que são fãns de LPs. O livro se chama The Art of the LP: Classic Album Covers 1955-1995 e mostra uma bela variedade de estilos designs de capas de punk rock a pop, tudo dividido em capítulos temáticos.