[Tutorial] How to rotate your header or... whatever images, even your userpics in your layout.
Hi everyone, I'm pretty sure that many people have known all this, but I still write this for those who didn't know :) Hope this will help.
Everytime you hit the refresh button, or just jump from any random places into your layout, you'll see your image change to another different (sometimes it just don't change, lol, I'll explain that later). Remember, it's not an animated image.
Just like this:
1. Look at this icon, remember it.
2. Now hit refresh (F5).
3. Already understand? *if you don't see it changed, hit refresh again, or just click this* :D
It just take you 4 simple steps with 4 minutes to finish!
PLEASE CREDIT (if you want) clockwisedoom AND PLEASE, COMMENT OR ASKING HERE.
IMPORTANT! This tutorial can be use for ALL SYSTEM (include S1). But if you're using an other system, not S2 Flexible Squares, you'll have to get the code yourself, or just try to ask your layout maker, because I don't know anything about those systems. Sorry! ALSO YOU CAN USE THIS TO ROTATE BANNERS, HEADER, USERPIC, BACKGROUND, TINY ICONS, OR WHATEVER, IF THAT IS AN IMAGE IN YOUR JOURNAL, YOU CAN ROTATE IT. IT'S UP TO YOU! BE CREATIVE AND NICE!
1. Upload your images to whatever image hosting services you want like photobucket or imageshack. Get the dirrect link. You can upload many as you can, no limit. They should have the same size.
2. Go to: http://sig.grumpybumpers.com/index.cgi - I'm using this image-rotator, don't know who has created this, so it maybe a little dangerous. But until now I've no problems with it, so I guess it's OK to use. You're free to choose another image-rotator sever, like image-randomizer, or use yours.
You'll see something like this.
Your username is your image's name. You can use whatever password you want but better remember it.
3. Fill out URLs, and hit Submit Query button. You'll see something like this:
Your image is http://sig.grumpybumpers.com/host/your-username.gif
4. Copy it and replace with your header image's URL in your header section of your layout code (find the .headerimage section). And you are done.
Here's an example with the S2 Flexible Squares system:
.headerimage {
height: 333px;
background-image: url("YOUR URL HERE") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
TIPS: You can change the images in the whenever you want with your username and password, don't have to creat a new account though you can creat many account as you want. Sometimes you don't see your image changes, it's because it random twice times with only an image XD Usually because you just submit 2-3 images.
You can use random-image.net, but it will take you time to register and activate email. So you can have a account, and you can creat custom images just with one account. But that host is click times limited XD. So it's your choice to choose which image-rotator services.
You can rotate your userpics at your COMMUNITY layout (MUST BE S2 FLEXIBLE SQUARES) using this code:
.userpicfriends [src*="your livejournal userpic's URL"]{background:url("your rotated image URL") no-repeat scroll 0 0 transparent !important;
height:0;
padding:100px 100px 0 2px !important;
width:0;}
THIS IS FOR PERSONAL LAYOUT (MUST BE S2 FLEXIBLE SQUARES)
.userpic [src*="your livejournal userpic's URL"]{background:url("your rotated image URL") no-repeat scroll 0 0 transparent !important;
height:0;
padding:100px 100px 0 2px !important;
width:0;}
If you have any problems, feel free to drop me a comment here in my community and I'll try my best to solve it :)
If you decide to credit me for this tutorial, it's very nice of you, so everyone else could have known about this way! Otherwise, it's OK. I don't force you to do something you don't even like XD
Do you find this helpful? Please go here to comment and let me know ^^ This is my first time writing tutorial, so it would have many mistakes. And especially I'm not a CSS coder, lol. If you find out something wrong with my code, I'm really happy you can tell me so I can fix it. Or you know another way to change userpics, images... please tell me! Thank you and Please forgive me if I've said something wrong.
Everytime you hit the refresh button, or just jump from any random places into your layout, you'll see your image change to another different (sometimes it just don't change, lol, I'll explain that later). Remember, it's not an animated image.
Just like this:
1. Look at this icon, remember it.
2. Now hit refresh (F5).
3. Already understand? *if you don't see it changed, hit refresh again, or just click this* :D
It just take you 4 simple steps with 4 minutes to finish!
PLEASE CREDIT (if you want) clockwisedoom AND PLEASE, COMMENT OR ASKING HERE.
IMPORTANT! This tutorial can be use for ALL SYSTEM (include S1). But if you're using an other system, not S2 Flexible Squares, you'll have to get the code yourself, or just try to ask your layout maker, because I don't know anything about those systems. Sorry! ALSO YOU CAN USE THIS TO ROTATE BANNERS, HEADER, USERPIC, BACKGROUND, TINY ICONS, OR WHATEVER, IF THAT IS AN IMAGE IN YOUR JOURNAL, YOU CAN ROTATE IT. IT'S UP TO YOU! BE CREATIVE AND NICE!
1. Upload your images to whatever image hosting services you want like photobucket or imageshack. Get the dirrect link. You can upload many as you can, no limit. They should have the same size.
2. Go to: http://sig.grumpybumpers.com/index.cgi - I'm using this image-rotator, don't know who has created this, so it maybe a little dangerous. But until now I've no problems with it, so I guess it's OK to use. You're free to choose another image-rotator sever, like image-randomizer, or use yours.
You'll see something like this.
Your username is your image's name. You can use whatever password you want but better remember it.
3. Fill out URLs, and hit Submit Query button. You'll see something like this:
Your image is http://sig.grumpybumpers.com/host/your-username.gif
4. Copy it and replace with your header image's URL in your header section of your layout code (find the .headerimage section). And you are done.
Here's an example with the S2 Flexible Squares system:
.headerimage {
height: 333px;
background-image: url("YOUR URL HERE") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
TIPS: You can change the images in the whenever you want with your username and password, don't have to creat a new account though you can creat many account as you want. Sometimes you don't see your image changes, it's because it random twice times with only an image XD Usually because you just submit 2-3 images.
You can use random-image.net, but it will take you time to register and activate email. So you can have a account, and you can creat custom images just with one account. But that host is click times limited XD. So it's your choice to choose which image-rotator services.
You can rotate your userpics at your COMMUNITY layout (MUST BE S2 FLEXIBLE SQUARES) using this code:
.userpicfriends [src*="your livejournal userpic's URL"]{background:url("your rotated image URL") no-repeat scroll 0 0 transparent !important;
height:0;
padding:100px 100px 0 2px !important;
width:0;}
THIS IS FOR PERSONAL LAYOUT (MUST BE S2 FLEXIBLE SQUARES)
.userpic [src*="your livejournal userpic's URL"]{background:url("your rotated image URL") no-repeat scroll 0 0 transparent !important;
height:0;
padding:100px 100px 0 2px !important;
width:0;}
If you have any problems, feel free to drop me a comment here in my community and I'll try my best to solve it :)
If you decide to credit me for this tutorial, it's very nice of you, so everyone else could have known about this way! Otherwise, it's OK. I don't force you to do something you don't even like XD
Do you find this helpful? Please go here to comment and let me know ^^ This is my first time writing tutorial, so it would have many mistakes. And especially I'm not a CSS coder, lol. If you find out something wrong with my code, I'm really happy you can tell me so I can fix it. Or you know another way to change userpics, images... please tell me! Thank you and Please forgive me if I've said something wrong.