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:

<script language="javascript">
//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com
//Specify interval between slide (in miliseconds)
var speed=8000;
var processed=new Array();
for (i=0;i<=20;i++){
    processed[i]="url(/Themes/Blogs/Paperclip/Images/dsh-title-" + i + ".jpg)";
}
var inc=0;
function slideback(){
    if (inc<20) inc++;
    else inc=0;
    //alert(processed[inc]);
    document.getElementById("masthead").style.backgroundImage=processed[inc];
}
if (document.all||document.getElementById) {
    window.onload=new Function('setInterval("slideback()",speed)');
}
</script>

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, mobile, motorcycles, watches, food, Nashville, Savannah, Cincinnati and family. Dislikes: mean people
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)/