I have been working lately on giving my blog a new look. One of the reasons I started thinking about this was that a number of the blogs I frequent have made upgrade changes lately. As I evaluated these new blog looks and compared them to my blog it was evident why they had made the changes they made.
Cleaner – Brighter – Less Cluttered
All of the blog sites had made changes to help them look cleaner, brighter and less cluttered. One of the biggest sites to have made this recent switch is msn.com. Have you noticed how much brighter and cleaner the site looks. I am still not sure I prefer it to the old look yet but the changes they made to it were in direct correlation to the other sites I had been evaluating.
When I started thinking about what I would do to make this site I started searching out possibilities. Certainly the blogs that had made the changes I mentioned were part of the equation but I wanted something more. Since I am using The Thesis Theme for WordPress for this site I wanted to find something that would be compatible within the structure of Thesis.
What About Thesis
I can’t tell you how satisfied I am with Thesis and its vast ability to be styled and customized. On top of all that is the fact that any updates and improvements that are made to Thesis are instantly available to you as an owner of Thesis – for FREE.
Check Out Thesis Benefits Here
The Old Look
This is a screen shot of how this blog looked before the upgrade. I had made some changes to the header from the way it looked before which was full-width. Here is a tutorial I did on how to get that look.
When I originally created this look I really liked it and I still do but it does have a dark, closed in feel to it.
The New Look
As I evaluated what I wanted to do with my site one thing I really wanted was some the feeling of freshness and variety. One way that I have seen this accomplished is with the built in rotating pictures feature of Thesis. There is also a plug-in that will give you the ability to rotate pictures and their captions called featured content gallery. This cool plug-in will give you some action on your site as the pictures will rotate actively on the page as you watch. The Thesis feature will give you a fresh picture with each page you visit, rotating them as you move through the site.
I have some sites that I use the featured content gallery plug-in and although it works great for those sites I did not want the constant action on this site.
What I really wanted was a way to make my header look fresh so when I found a theme that had a rotating header option I was curious. The beauty of it was it was a theme that was designed with Thesis in mind. The theme is neoclassical+thesis. You will need to download the theme to work through the rest of this tutorial. The problem was when I tried to make it work “as is” with my site it was a mess so I went to work on dissecting it to make the feature work for me.
With a little customization of my custom.css file and utilizing the rotating_header.php file that comes with the theme I was able to make the Thesis rotating header feature work like a charm. It was actually pretty easy and I think it has given me exactly what I was trying to accomplish. There are a few more changes I am going to make to this site but this is a huge step in the right direction.
The Code
Here is the code I added to my custom.css file for the header.
/* Rotating Header Images */
.custom #header {padding:0; background:#fff; text-align:left; border: none;}
.custom #header p#logo {color: #ff0000;}
.custom #header h1 {font-size: 32px; color: #ff0000; #margin-left: 5px;}
.custom #tagline {margin-bottom: 10px; margin-left: 5px;} /* font-family: Verdana,serif; color: #999999; }*/
.custom #header img {border:10px solid #EEEEEE; position: relative; bottom: 0; top: 5px; width: 1035px; height: 120px;}
I have adjusted my header size to accommodate the width of three column layout and then so that it did not take a lot of room at the top of page and only wanted it to be 120px in height. You can adjust the size to fit your particular needs.
If you leave the code “as is” then you will have the logo and the tag line displayed above the header picture. I wanted to turn this off since I was going to create header pictures with the blog name in them as you can see.
To do this you add this code to the custom.css file
.custom #header #logo {display:none;}
.custom #header #tagline {display:none;}
The next thing to do is to upload the rotating_header.php file to your custom folder. You will find this in the custom folder from the neoclassical+thesis download.
The last thing to do is to upload the images folder from the neoclassical+thesis theme to your site. The headers folder is found inside of the images folder and this is where you will load your own header pictures. I use a fantastic free photo editing software called photoscape.
Follow the instructions included with the download page for the neoclassical+thesis theme and you should be up and running in no time.
Let me know how it works for you. Good Luck.
{ 2 comments… read them below or add one }
Dear Sage. You probably already know this, but when I clicked on the Avatar to the right of my comment, it took me to my website. Question: is there any way for me to add one of my pictures to the Avatar so that my comment can be even more personalized?
Fro
Yes there is my Fronk, in fact I have written a tutorial about just that – very sagey don’t you think. http://www.sagaciousnews.com/how-to-activate-gravatar-in-wordpress/. This tutorial not only tells you how to activate a gravatar in wordpress but also provides links to set your internet wide Gravatar up, which is a necessity prior to the wordpress activation of Gravatar — If you want your personal picture to show up that is.