December 29, 2006

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

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.

Comments,

  • Trackbacks,
  • and Pingbacks
  1. 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)/

Comments are closed.

 

Trackbacks and Pingbacks


  1. Dave Burke says:

    blog bits Dan Hounshell with a very nifty Rotating Header for the Paperclip Theme. James Shaw started

  2. Dan Hounshell with a very nifty Rotating Header for the Paperclip Theme. James Shaw started the header

  3. Dan Hounshell with a very nifty Rotating Header for the Paperclip Theme. James Shaw started the header

Shortcuts

Where is Dan?


My Blog
My Blog
Twitter
Twitter
Facebook
Facebook
LinkedIn
LinkedIn
Flickr
Flickr
YouTube
YouTube
Delicious
Delicious
Foursquare
Foursquare
Pinterest
Pinterest
GetGlue
GetGlue
Pintley
Pintley
XBOX Live
XBOX Live
Last.fm
Last.fm
Windows Live
Windows Live
Telligent.com
Telligent
Graffiti CMS on CodePlex
Graffiti CMS
Popular

Recent Posts