Finally I found a new design for this blog site!

I looked after a new  theme the during the last weeks on several places and tried also commercial products as a “Woo” theme. Most of themes I found doesn’t met my requirements. Premium wordpress themes are often more unique, but it’s not possible to see if the basic code works for you (a preview version shows often a different situation) and really good free templates are rare ones

Why changing the old theme?

I like the old one very much but the colors doesn’t fit to the subject from this blog (that’s what I think). Next I like to do a little experiment on how to make money with Google Adsense and the old template was not really optimized for Adsense. I wanted a theme where the main page looks different from archive pages, right this is something you decide by yourself…

Finally I found the DeepBlue theme from DailyBlogTips. I used their StudioPress theme already on some other blog and I’m very happy with the coding. The theme files are very complete and the CSS/XHTML code is very structured and clean.

What do you think is the change to a new theme a step forward? I like to hear your opinion, please leave a comment.

What’s next?

Sometime ago we added Google friend connect to this website. Since I like Google services a lot, I think is this service great for us. You’re free to join this blog and get connected to many other “Google friends”.Similar Posts:

• Add a Google Sitemap for your Posterous Blog
• Some nice Google Adsense updates
• Don’t let Google run your site

Marino from TechSymptom is great web-designer and started a series of Fireworks tutorials on web 2.0 styled navigation bars. The last one inspired me to create this small CSS tutorial.

UPDATE: Based on the tutorials from techSyptom we created a new tutorial, check the tutorial via link below,

After we finished the design tutorial we need to create 2 simple images to style our CSS navigation bar: A background image (the light blue bar) and a transparent button that indicate the active state, all other elements are created with CSS.

Like in most CSS horizontal navigation bars an unordered list is used to hold the menu items:

With the next CSS code it’s possible to style the horizontal navigation bar:

#container {
width:800px;
height:600px;
padding:20px;
}
ul#navbar {
background:url(/tutorials/web20_css_bar/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
ul#navbar li a:hover {
color:#98CB00;
}
ul#navbar li a#current {
background:url(/tutorials/web20_css_bar/current.gif) no-repeat center bottom;
color:#98CB00;
}

We placed the background image behind “ul” element and added the two borders to the top and bottom. The li element is defined as a floated block element and got some padding to create a bigger button. The last definition is for the current state, which will show up the tri-angle. You need some server-side code (php) to get a dynamic position every time a different page is loaded.

That’s all, download the example files here.Similar Posts:

• Your e-mail address hidden with jQuery?
• Image manipulations with Imagemagick
• jQuery Contact form for your website