[tutorial] Rotating Headers {resposted}
I once made a tutorial for rotating headers over at my personal lj; but I've changed personal ljs since then and have locked down the lj where the tutorial is located, so um...i'm resposting it here :DDDDD
[tutorial] Rotating Headers
Okay, well, first of all, let's go over what a rotating header is. =P I'm sure some of you can already guess, or already know. A rotating header is basically a header that will change on its own every time you refresh a page (aka when you go to another page on your lj, or just refresh something). If you look up at mine, and you refresh (it might take 2-4 times, because it sometimes will randomize and go back to the same image before switching to another one), you'll see it change. You can have as many headers in rotating as you want; some of you may already know/seen that I normally have a rotating header though not right now XD
First thing you want to do though, is find a file that will make the header rotate. Of course, I'm not really computer-programmer-like, so I didn't create this file on my own. I found this entry, but that simply explains the basics of using a rotating header once you have a website to host it. If you don't, you'll be extremely confused and well, yeah.
1) First download this file: rotate.php file (I did not write this file, and I claim no ownership over it)
Unzip the file and just leave it alone for now. That link should take you to download the .php file, so you don't need to unzip it anymore lol XDDD just leave it alone wherever you downloaded it :)
I'm assuming that if you're doing this, you have a few headers in stock to be used. You have to keep one thing in mind: they should all be the exact same width and height. Because when you set dimensions for the header in the CSS later, you are setting only ONE set of dimensions. Of course, if you don't mind that the header does not align well with the rest of the layout, then do whatever XD
2. Find a website that will host .php files
For this, you can use any one you find really, but for the sake of this tutorial, I'm going to be using freehostia.com. There are many FTP websites out there, but I prefer freehostia, because well, I'm used to it and it does what I need it to do. You honestly don't need a lot of features to use a rotating header, so the simpler it is, the better. Livejournal, photobucket, and other image hosting sites do NOT host .php files, so you have to find a hosting site that will.
***Also, please note that since I first made this tutorial, freehostia has updated their layout a little, so some things may look a little different than what you see in screencaps. However, the concept should still be the same and you should still be able to find where you need to go/what you need to do/what things to click to upload things/create folders :)
3. At the website you've chosen, sign up for an account. The free one is all you need.
I'm basing this off of what I know from using freehostia but most of these sites will offer free accounts, but you just get less features, and since you don't need an insane amout of features for this, simply select the free account.
4. This part is only for those using freehostia; however, you might want to read it anyways. It could be roughly the same for other hosting websites.
First, select the account type they have called 'chocolate'. Screencap here. Then it will take you to another page that details what your account has in terms of features. Click on the 'take a bite' button in the banner. Screencap here. This should take you to a sign up page. As you should have chosen the free account, the only thing you have to do is make sure that the option for account is set on chocolate, and not any of the other accounts, otherwise, you will have to pay to get it. It should look like this screencap here. Make sure to select 'use a subdomain' or once again, you will have to pay money. Then, enter your desired site/domain name in the blank field below. This will be the name your site will have. And the rest of the form should be straightforward.
5. Wait for an email from that site. It will have your password.
I'm not sure about other sites, but for freehostia, your user name is not the same as your site name. You have no choice in your username (which is only for signing in purposes and have no effect on your site name), and they give you your password as well. Once you get it, go back to the main page and you should see a sign in section.
6. Sign in.
I think this part is self-explanatory. This should take you to a place called 'control panel' where there are a multitude of options and confusing things XD
7. Click on 'file manager'.
You don't need anything else for rotating headers, just this. Here, is where you store your files. First, though, there should be a link that says 'your-user-name.freehostia.com' (or whatever hosting site you're using). Click on that, and ignore the upload option at the bottom. Here's a screencap. Don't try to upload anything while on this page, because it won't work properly later and you'll only make yourself frustrated and confused.
8. Create a folder
You need to create a folder here where you can store your header images as well as that rotate file you downloaded earlier. Screencap here. Make sure you've selected 'empty folder' and not 'empty file'. Then click create.
*note: important*: look at this screencap. It explains what some of the things on the page are. Well, the important things. Also, this screencap too. This is the main page you will see when you follow the address of the subdomain you've created. For example, my subdomain name on freehostia is: choco-tsubasa. Thus, my address will be: http://choco-tsubasa.freehostia.com . This will take me to this page where it lists all my files and folders, the main index page. I can access any of my files that I have uploaded this way, but ONLY access; I cannot add or delete files unless I'm in the file manager.
9. Go to the folder you just created.
The folder you created is where you're going to store your headers and that file you downloaded. So...go to your new folder. Screencap here. (it's pretty straightforward, but i had too much fun with screencapping XD) Once you're in your folder, it'll look like this screencap. As the screencap says, you're not in the main index anymore. So, for convenience's sake, if you want to go straight to this folder, your address would be: ' http://your-user-name.freehostia.com/your folder name ' . And you see the pretty arrow at the bottom? That leads us to step 10.
10. Select and upload your files.
This is pretty standard; i mean, it's the same as in an email and you're adding attachments. So just click browse, find the file you want, and then well, select it. Then it'll open up a second (or third, or whatever number's next) little browse button for you. Screencap here. Select your headers, and you MUST also select that .php file you downloaded at the beginning. It won't work without it!! Then, once you have everything (once again, don't forget the .php file), upload the files.
*note: I've found with freehostia that when it's uploading, sometimes it has something that has 'false' on it. like this screencap here as an example. When it says false, don't press okay. Try to wait and let it move onto the real uploading, but if it doesn't, exit and try again. Basically, it should look like this (screencap) when it's actually uploading. Don't press okay or anything until after it says 100%. (if the 'false' thing shows up afterwards, just exit, and log in again. Usually, it'll have uploaded anyways. But if it doesn't, just try again until it works. Basically until it looks like this: screencap.)
11. Make sure you've uploaded the 'rotate.php' file. IT'S EXTREMELY IMPORTANT.
Your file manager for your folder should look like this: screencap. Seriously, like I've stressed many times already, it's IMPORTANT.
12. Go to your main index.
And by that, i mean go to this page: index screencap.
13. Open your folder.
At this point, there should be only two things in the index: the parent directory, and your folder. You should see your files there. It will look something like this: folder index screencap.
14. Click on the 'rotate.php' file.
This will take you to one of your images. That's supposed to happen; the rotate.php is what generates the randomization of the headers in that particular folder. It'll look like this: rotate.php screencap .
15. Copy the link
Copy the link in the address bar. It should say something like the one in the last screencap. Or, if you want an example: http://your-user-name.freehostia.com/your-folder-name/rotate.php
16. Go to customize your journal, and paste the link where you would normally put the link for your header image
Go to customize your journal, then go to the custom CSS page, and paste the rotate.php link where you would normally put the link for your header image. Like in this screencap. Just paste it. (and if you don't have html code for your header, then...feel free to copy mine there? XD or if you want, i can include something about that in this post or something XD). Save the changes, and then it should work. Remember to fix your header dimensions (aka the width and the height); it's easier if your headers are all about the same dimensions, or else your image might get cut off a little if it's bigger than the dimensions you specified, or it might make the image not aligned with the rest of the layout. But it's totally up to you in that regard.
17. Go have fun refreshing your header to see what it changes to ♥
And you are done~ congratulations~ ♥
If there are any questions/problems, feel free to contact/pm me. If you feel the need to spread the awesome fun-ness that is a rotating header, um, idk, credit if you pretty much copy the post i guess. I did work a long time on making this post originally, so um...credit would be nice :D but yeah, if there are any questions at all, just contact me; it was my first tutorial ever so lol, who knows if it was any good XDDD
And I totally just copied everything from the old post XDDD shhh~ <3
[tutorial] Rotating Headers
Okay, well, first of all, let's go over what a rotating header is. =P I'm sure some of you can already guess, or already know. A rotating header is basically a header that will change on its own every time you refresh a page (aka when you go to another page on your lj, or just refresh something). If you look up at mine, and you refresh (it might take 2-4 times, because it sometimes will randomize and go back to the same image before switching to another one), you'll see it change. You can have as many headers in rotating as you want; some of you may already know/seen that I normally have a rotating header though not right now XD
First thing you want to do though, is find a file that will make the header rotate. Of course, I'm not really computer-programmer-like, so I didn't create this file on my own. I found this entry, but that simply explains the basics of using a rotating header once you have a website to host it. If you don't, you'll be extremely confused and well, yeah.
1) First download this file: rotate.php file (I did not write this file, and I claim no ownership over it)
Unzip the file and just leave it alone for now. That link should take you to download the .php file, so you don't need to unzip it anymore lol XDDD just leave it alone wherever you downloaded it :)
I'm assuming that if you're doing this, you have a few headers in stock to be used. You have to keep one thing in mind: they should all be the exact same width and height. Because when you set dimensions for the header in the CSS later, you are setting only ONE set of dimensions. Of course, if you don't mind that the header does not align well with the rest of the layout, then do whatever XD
2. Find a website that will host .php files
For this, you can use any one you find really, but for the sake of this tutorial, I'm going to be using freehostia.com. There are many FTP websites out there, but I prefer freehostia, because well, I'm used to it and it does what I need it to do. You honestly don't need a lot of features to use a rotating header, so the simpler it is, the better. Livejournal, photobucket, and other image hosting sites do NOT host .php files, so you have to find a hosting site that will.
***Also, please note that since I first made this tutorial, freehostia has updated their layout a little, so some things may look a little different than what you see in screencaps. However, the concept should still be the same and you should still be able to find where you need to go/what you need to do/what things to click to upload things/create folders :)
3. At the website you've chosen, sign up for an account. The free one is all you need.
I'm basing this off of what I know from using freehostia but most of these sites will offer free accounts, but you just get less features, and since you don't need an insane amout of features for this, simply select the free account.
4. This part is only for those using freehostia; however, you might want to read it anyways. It could be roughly the same for other hosting websites.
First, select the account type they have called 'chocolate'. Screencap here. Then it will take you to another page that details what your account has in terms of features. Click on the 'take a bite' button in the banner. Screencap here. This should take you to a sign up page. As you should have chosen the free account, the only thing you have to do is make sure that the option for account is set on chocolate, and not any of the other accounts, otherwise, you will have to pay to get it. It should look like this screencap here. Make sure to select 'use a subdomain' or once again, you will have to pay money. Then, enter your desired site/domain name in the blank field below. This will be the name your site will have. And the rest of the form should be straightforward.
5. Wait for an email from that site. It will have your password.
I'm not sure about other sites, but for freehostia, your user name is not the same as your site name. You have no choice in your username (which is only for signing in purposes and have no effect on your site name), and they give you your password as well. Once you get it, go back to the main page and you should see a sign in section.
6. Sign in.
I think this part is self-explanatory. This should take you to a place called 'control panel' where there are a multitude of options and confusing things XD
7. Click on 'file manager'.
You don't need anything else for rotating headers, just this. Here, is where you store your files. First, though, there should be a link that says 'your-user-name.freehostia.com' (or whatever hosting site you're using). Click on that, and ignore the upload option at the bottom. Here's a screencap. Don't try to upload anything while on this page, because it won't work properly later and you'll only make yourself frustrated and confused.
8. Create a folder
You need to create a folder here where you can store your header images as well as that rotate file you downloaded earlier. Screencap here. Make sure you've selected 'empty folder' and not 'empty file'. Then click create.
*note: important*: look at this screencap. It explains what some of the things on the page are. Well, the important things. Also, this screencap too. This is the main page you will see when you follow the address of the subdomain you've created. For example, my subdomain name on freehostia is: choco-tsubasa. Thus, my address will be: http://choco-tsubasa.freehostia.com . This will take me to this page where it lists all my files and folders, the main index page. I can access any of my files that I have uploaded this way, but ONLY access; I cannot add or delete files unless I'm in the file manager.
9. Go to the folder you just created.
The folder you created is where you're going to store your headers and that file you downloaded. So...go to your new folder. Screencap here. (it's pretty straightforward, but i had too much fun with screencapping XD) Once you're in your folder, it'll look like this screencap. As the screencap says, you're not in the main index anymore. So, for convenience's sake, if you want to go straight to this folder, your address would be: ' http://your-user-name.freehostia.com/your folder name ' . And you see the pretty arrow at the bottom? That leads us to step 10.
10. Select and upload your files.
This is pretty standard; i mean, it's the same as in an email and you're adding attachments. So just click browse, find the file you want, and then well, select it. Then it'll open up a second (or third, or whatever number's next) little browse button for you. Screencap here. Select your headers, and you MUST also select that .php file you downloaded at the beginning. It won't work without it!! Then, once you have everything (once again, don't forget the .php file), upload the files.
*note: I've found with freehostia that when it's uploading, sometimes it has something that has 'false' on it. like this screencap here as an example. When it says false, don't press okay. Try to wait and let it move onto the real uploading, but if it doesn't, exit and try again. Basically, it should look like this (screencap) when it's actually uploading. Don't press okay or anything until after it says 100%. (if the 'false' thing shows up afterwards, just exit, and log in again. Usually, it'll have uploaded anyways. But if it doesn't, just try again until it works. Basically until it looks like this: screencap.)
11. Make sure you've uploaded the 'rotate.php' file. IT'S EXTREMELY IMPORTANT.
Your file manager for your folder should look like this: screencap. Seriously, like I've stressed many times already, it's IMPORTANT.
12. Go to your main index.
And by that, i mean go to this page: index screencap.
13. Open your folder.
At this point, there should be only two things in the index: the parent directory, and your folder. You should see your files there. It will look something like this: folder index screencap.
14. Click on the 'rotate.php' file.
This will take you to one of your images. That's supposed to happen; the rotate.php is what generates the randomization of the headers in that particular folder. It'll look like this: rotate.php screencap .
15. Copy the link
Copy the link in the address bar. It should say something like the one in the last screencap. Or, if you want an example: http://your-user-name.freehostia.com/your-folder-name/rotate.php
16. Go to customize your journal, and paste the link where you would normally put the link for your header image
Go to customize your journal, then go to the custom CSS page, and paste the rotate.php link where you would normally put the link for your header image. Like in this screencap. Just paste it. (and if you don't have html code for your header, then...feel free to copy mine there? XD or if you want, i can include something about that in this post or something XD). Save the changes, and then it should work. Remember to fix your header dimensions (aka the width and the height); it's easier if your headers are all about the same dimensions, or else your image might get cut off a little if it's bigger than the dimensions you specified, or it might make the image not aligned with the rest of the layout. But it's totally up to you in that regard.
17. Go have fun refreshing your header to see what it changes to ♥
And you are done~ congratulations~ ♥
If there are any questions/problems, feel free to contact/pm me. If you feel the need to spread the awesome fun-ness that is a rotating header, um, idk, credit if you pretty much copy the post i guess. I did work a long time on making this post originally, so um...credit would be nice :D but yeah, if there are any questions at all, just contact me; it was my first tutorial ever so lol, who knows if it was any good XDDD
And I totally just copied everything from the old post XDDD shhh~ <3