Sunday, August 3, 2008

Instructions: Changing background AND changing header image based on the time of day

Hi Amanda & all! I used your changing background by time of day script and made it work for my header image, it was challenging, here's what I did to make it work:

The absolute FIRST thing I recommend you do is make a test blog, try out any major changes like this on your test blog first, work out the bugs and make sure it will work before you implement this on your real blog. When you are sure you have everything working on your test blog, go to your main blog and MAKE A BACKUP of your blog BEFORE making any changes, this way you if you make a mistake, all is not lost.

You will need to decide what images you want to use, mine represent a sky background and the header graphics are a mountain with a changing sky. I have 7 different backgrounds that change every few hours, it works off the computer time of the viewer's computer. The background images should all be the same size, and the header images have to be all the same size, you will also need to make a transparent gif image the exact same size as your header graphic, I'll explain why you need that and where to put it.

You will need to have somewhere to host these images, I chose http://pages.google.com/, you can use any graphics hosting site, but they generally only accept images, you would still need to upload the javascript code somewhere, so that's why I used http://pages.google.com/, you can upload and store everything there.

Next, I had to make 2 separate javascripts, one for the background images, and one for the header image, I tried combining the javascript code for both, I'm sure there is a way to do it, but I couldn't get it to work, so I just created 2 separate ones.

I had to make a transparent graphic the exact same size as the header graphic to use as a placeholder (if you don't do this, the header area will shrink down and not allow the images you want to use to show, if you use a non-transparent image, it will override your changing graphics and not allow it to show through), I uploaded the transparent image in the "Layout, Page Elements" section, I clicked on edit where you would add the header image, I uploaded the transparent image there then saved it, I chose "instead of title and description".

Next I went to "edit HTML", I added the appropriate lines to call for the background and header images. Here is what I added and where I added it:

Right after I added this, you will need to add < at the beginning and > at the end of EACH line:
script src='http://wretha.googlepages.com/backgroundcolors.js' type='text/javascript'/
script src='http://wretha.googlepages.com/headerbackground.js' type='text/javascript'/

You will need to change this to where your js is located.

script src='LINK TO WHERE YOUR JS SCRIPT IS LOCATED' type='text/javascript'/

`Here is the js code for mine, you will need to change the links (colored in red) to make them call your background and header images, this is for the background:`




This is for the header image:



You will need to change the image links so they call for your images, not mine. You can change the times, add more times, remove times. You will notice it is in military time, 24 hours, not 12 hours, it took me a little tinkering to figure out the exact times for the changes, the "<" means "less than", the "h" means "hour", so "h < 12" means before 12 noon, "h < 14" means before 2 pm.

Here are the times I have set for mine, and the times they correspond to:

< 6 midnight-6am
< 9 6am-9am
< 12 9am-12pm
< 15 noon-3pm
< 18 3-6pm
< 20 6pm-8pm
< 24 8pm-midnight

If you want to just change just the background (not the header), you will not need the transparent graphic and you will only use the backgroundcolors.js, if you only want to change the header (not the background), just omit the backgroundcolors.js and use the headerbackground.js.

To make the js, just copy and paste the code from above into notepad, then save it as a .js instead of a .txt, it will give you a warning, ignore it and do it anyhow.

If you want to see just the header graphic change and not the background, go to this page:

http://w-2-test.blogspot.com/

Change your computer clock and refresh the page to see the different images. These are the times when the images change:
* 6am
* 9am
* 12pm
* 3pm
* 6pm
* 8pm
* 10am

Have fun! Hope this explained it well enough to follow. Thanks to Amanda for getting me started on this customization, it's been most fun!!!

Wretha
read about my adventures living 100% off grid
http://wretha.blogspot.com
.
.
.
.
.
.

3 Comments

Blogger Wretha said...

test 1
`He took me for his housemaid,' she said to herself as she ran. `How surprised he'll be when he finds out who I am! But I'd better take him his fan and gloves--that is, if I can find them.' As she said this, she came upon a neat little house, on the door of which was a bright brass plate with the name `W. RABBIT' engraved upon it. She went in without knocking, and hurried upstairs, in great fear lest she should meet the real Mary Ann, and be turned out of the house before she had found the fan and gloves.

August 3, 2008 11:30 PM

Delete
Blogger Wretha said...

`It was much pleasanter at home,' thought poor Alice, `when one wasn't always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn't gone down that rabbit-hole--and yet--and yet--it's rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought! And when I grow up, I'll write one--but I'm grown up now,' she added in a sorrowful tone: `at least there's no room to grow up any more here.'

August 3, 2008 11:30 PM

Delete
Blogger Wretha said...

It was interesting to see the two of them together, that gave me the opportunity to see the differences between them. Their coloring is a bit different, the whitetails have a reddish coat, the mulies have more buff coloring. The tails are different, the whitetails have, well, fluffy white tails, the top is the normal coat color, the underside is fluffy white, the mulies have a less fluffy tail, and it's mostly black. They are about the same size height wise, the mulies are bulkier, they have bigger heads and much bigger ears, their necks are a bit bigger. The whitetails are much more delecate, they have a slender head, much smaller ears and a more slender neck. Both have just about the same leg size (length and width), the feet/hooves looked similar, and the body size is about the same, if there is any difference there, then the mulies would have a bit more bulk. The mulies seem to be the more aggressive of the two, of course this could be because the mulies were young males, had they all been females, it might have been different.

August 3, 2008 11:31 PM

Delete

5 comments:

Wretha said...

test 1
`He took me for his housemaid,' she said to herself as she ran. `How surprised he'll be when he finds out who I am! But I'd better take him his fan and gloves--that is, if I can find them.' As she said this, she came upon a neat little house, on the door of which was a bright brass plate with the name `W. RABBIT' engraved upon it. She went in without knocking, and hurried upstairs, in great fear lest she should meet the real Mary Ann, and be turned out of the house before she had found the fan and gloves.

Wretha said...

`It was much pleasanter at home,' thought poor Alice, `when one wasn't always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn't gone down that rabbit-hole--and yet--and yet--it's rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book written about me, that there ought! And when I grow up, I'll write one--but I'm grown up now,' she added in a sorrowful tone: `at least there's no room to grow up any more here.'

Wretha said...

It was interesting to see the two of them together, that gave me the opportunity to see the differences between them. Their coloring is a bit different, the whitetails have a reddish coat, the mulies have more buff coloring. The tails are different, the whitetails have, well, fluffy white tails, the top is the normal coat color, the underside is fluffy white, the mulies have a less fluffy tail, and it's mostly black. They are about the same size height wise, the mulies are bulkier, they have bigger heads and much bigger ears, their necks are a bit bigger. The whitetails are much more delecate, they have a slender head, much smaller ears and a more slender neck. Both have just about the same leg size (length and width), the feet/hooves looked similar, and the body size is about the same, if there is any difference there, then the mulies would have a bit more bulk. The mulies seem to be the more aggressive of the two, of course this could be because the mulies were young males, had they all been females, it might have been different.

Wretha said...

testing this thing

मनोज said...

code has a bit of error i guess... at 3 o clock in the morning which if clause will it use???? because it falls under every category. it falls in if(h< 6) and (h < 9) or any of the clause. check that out. these is no boundry clause. check this out.. http://www.yourjavascript.com/0161412136/day.js