Replies to This Discussion

Permalink Reply by Reno on March 18, 2008 at 5:40pm

You don't necessarily have to use PHP to obtain the same effect. You could use javascript in the head tag to do this. He's basically (from what i'm gathering by looking at the source code) on the server randomizing the css code generated for the #page style.

I'm at work so I can't help you write a javascript function right now but i did a quick google search for you and found this link (click me). I know it's talking about blogger but it should work the same way.

If you aren't able to work out a solution I can help you later on this evening, but it probably wouldn't be till around 11 pm US Central time...

▶ Reply to This

Permalink Reply by vb on March 18, 2008 at 10:30pm

That looks like exactly what I need. I knew it had to be simpler :) I'll give it a go during lunch tomorrow.

vb

▶ Reply to This

Permalink Reply by Chris on March 18, 2008 at 10:57pm

Thanks for the link Buddy. I'm going to try messing around with random header images on my tumblr.

▶ Reply to This

Permalink Reply by Reno on March 19, 2008 at 12:12am

No problem guys, I'm glad to help!

▶ Reply to This

Permalink Reply by vb on March 21, 2008 at 8:29am

Ok, I tried this out, but I can't figure out the right place to insert the script into my theme/custom css. Can you help? Thanks!

vb

▶ Reply to This

Permalink Reply by Reno on March 21, 2008 at 1:19pm

alright, I read through the tutorial this time and I believe that code would normally work, but I think Tumblr has a few limitations to what you can do with your code on their server.

What I did was I encapsulated the code into a function instead of letting the code run free. Looks like this:

script type="text/javascript"
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
var random=Math.floor(3*Math.random());
document.write("");
document.write("body {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("");
/script

That first position I bolded, remember to change that number to the amount of images you are going to randomize on refresh. The second bold is remember to change the CSS Selector to the place where you want the background to change to. Don't forget to add a generic background color in case your image doesn't appear. And of course, change your images in the url's above to what you want displayed.

Place this code before the tags. Now to actually enable the code, you have to add another script function. I tried to add it to the body tag's "onload" attribute, but Tumblr blocks that functionality. So immediately following the body tag add this code:

script type="text/javascript"
changeBG();
/script

And there you have it! Once you refresh your page, the images will change in and out. Don't forget to add the chevrons (greater than and less than signs) to the script tags.

If you need any other help with stuff, don't hesitate to contact me. Besides gaming, this stuff is my favorite thing to do! I hope this helps you!

▶ Reply to This

Permalink Reply by vb on March 22, 2008 at 9:50am

Ok. I've got the code down that I need to insert. I inserted the code to enable to script just inside my body tag. For the bit that makes the random background URL work, I don't know what you mean by "before the tags." I've tried putting it just about everywhere I can think of and all I get is text at the very top left of my page. I tried changing the "body" in your code to css section names (main, header, headertop, sidebar) etc...

if you refresh my page, you'll see that it does indeed rotate the image code...

um, help?

thanks!!!

▶ Reply to This

Permalink Reply by Reno on March 22, 2008 at 11:34am

oops! I'm sorry about that. Tumblrist filters out anything in chevrons. It's supposed to be immediately before the "head" and "body" tags.

▶ Reply to This

Permalink Reply by Reno on March 22, 2008 at 11:36am

by the way, on the css code bit in the javascript, you'll need to add the "#" sign before the headertop declaration.

▶ Reply to This

Permalink Reply by vb on March 22, 2008 at 2:52pm

Interesting...that's actually how I've got it right now. The only thing that I just changed was to put #main in.

hrm. Also for shits, I tried taking out the part that would go before my head and body tags and put it in the custom css area in the advanced customize settings....same result exactly.

▶ Reply to This