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 mo![]()
d 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:
<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
="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.