all posts

Community Server Rotating Header Images for Paperclip Theme

Published to Blog on 29 Dec 2006

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).

Paperclip Source PSD

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.

Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, motorcycles, sports, chickens, watches, food, Nashville, Savannah, Cincinnati and family.
Dan Hounshell on Twitter

  • On 30 Dec 2006 "Dave Burke"" said:
    blog bits Dan Hounshell with a very nifty Rotating Header for the Paperclip Theme. James Shaw started
  • On 30 Dec 2006 "Daily News List Blog"" said:
    Dan Hounshell with a very nifty Rotating Header for the Paperclip Theme. James Shaw started the header
  • On 11 Mar 2007 "Community Server Bits"" said:
    Dan Hounshell with a very nifty Rotating Header for the Paperclip Theme. James Shaw started the header
  • On 12 Aug 2008 "/gradster(1)/"" said:
    Hey. I'm having some trouble setting something similar to this up. Is there any way I can make it a random image from a certain set on reload of the page? I have no knowledge of javascript and little of CSS (but getting better and better daily by necessity). Please and thank you, /gradster(1)/