Community Server Rotating Header Images for Paperclip Theme

Last week after adding Eric Duncan’s PostIcon mod, I decided to do some other UI mods to my site. Most of the changes were done to give it a cleaner look: changing the home page to show excerpts only, removing some of the left side content, adding some background color to the post footers to create a little more contrast, etc.

The Edit CSS tool in Firefox’s Web Developer Toolbar extension was supremely useful in planning/testing those updates. 

I also decided that I wanted to use a custom image in my header. I remembered reading a post from James Shaw several months ago where he described the process of using a custom image and posted the layered PSD source file to make the mod easier (you can find a link to the file in his post).

After downloading the file the first thing I did was to add a white mask (for the white border around the image) and a black mask (for the black border above the image) so I would not have to worry about perfectly sizing any images added later.

Now creating new header images was as easy as pasting them into a new layer and sliding them around until they looked the way I wanted. Then I simply exported them as JPG’s using about 70% compression. This setting seemed to give me a good balance between image size and quality with most images being between 10-20K. Even though 20K seems a little large, in reality it is not that bad since that is really the only major image on the page.

I was faced with a new problem, though. I had 20 new header images that I liked and I couldn’t decide which one I wanted to use. I decided to look into randomly choosing which image to display and ended up choosing to do a slideshow-type presentation, loading a new background image every 8 seconds.

To do so I simply updated the summer.css file to change the background image for the masthead div to be the image I wanted displayed first. I found a script online that would almost do what I wanted - so I just changed it a bit and then added it to the LayoutTemplate.ascx control between the CS:Head and body tags:

That’s all there is to it. Now I have a slideshow for my header image. I chose to modify the Paperclip summer theme, though you may want to make a copy of the theme for your changes if you’d prefer to leave the original alone.