This tutorial is for those
who are making a full skin with an image they have already created. Example:
You
have your image, what do you do? First you have an already made image…so now
you must want it as a background right? I am going to provide a code which you
all can adjust in which you input your own information.
1)
First upload your image. Photobucket or ImageShack are the best way to go. I
recommend Imageshack because in Photobucket, bandwidth gets exceeded way too
easily.
2)
Once you have uploaded your image, place it in this code:
REMEMBER:
ALL THIS GOES IN YOUR LOOK AND FEEL: INPUT HEADER HTML
(NOTE:
If you are planning to Image Map [look at stage 9], there is no need for this
step since it you will have to put the URL code in the image map. NOTE: Also, don't forget...if you do Image Map, put the whole image map code before everything else, or else...it won't work.)
3)
Okay, now that you got your image down, where the heck are you going to
place your blog? This is where this
code comes in:
4)
What
you need to do is adjust the # signs with real numbers and just start playing
around with it. You’ll get the
hang of it. Remember to read what
you’re applying numbers to. In
this code, you’re also determining the width and height of the blog.
Remember to just fiddle with the numbers.
It’s just a bit of logic. Let
me give you an example:
You see up there where it says:
Let’s say I plug in:
Since it’s 400px you
know it’s going to be as far away from the left side of the screen.
I hope that made sense.
5)
In the
above code, notice that in it [near the end], it says:
That
basically means that you want a scrollbar in your blog entries.
If you don’t want a scrollbar, just delete that portion of the text.
6)
Another code you see a lot in these Xanga Skin Codes:
That code above removes
the eprop option, the left module, and all those annoying Xanga links (the
default links you originally get). If
you want to keep any of those links, you just take it out from the code.
REMEMBER: You have all these codes together; they all go in INPUT HEADER
HTML.
7)
This is
the really important code that determines how your Xanga is going to look like.
Here you adjust the color of your scrollbar and everything you need to
make your Xanga outstanding. Maybe
I’m exaggerating on the outstanding part, but you get the idea.
The places where you see that there is a # sign, you must place a Hex
Color Code to change the color of the scrollbar or whatever you want to change
the color of. Here’s a site with
some color codes: http://webmonkey.wired.com/webmonkey/reference/color_codes/
REMEMBER: When you see a color code, don't take out the # sign. So it must look like this (example: #000000 <--black). Oh yeah, don't leave spaces between the # sign and the actual number because then the color won't show.
8)
Just
look through the code, it’s understandable once you actually analyze it and
you’ll see it’s not that hard to make a Xanga skin.
Then you won’t even need to use my skins…and you’ll probably stop
visiting my site…then you’ll forget that a NatiMarie’s Skin site even
existed *tear*. I hope that doesn’t happen…then I’ll really be sad.
Okay, I’m such a dork. I
know there’s something missing…oh yes, the most crucial! IMAGE MAPPING.
9)
Image
mapping…what the heck is that? Well,
if you’re wondering…have you ever noticed that some people have links that
are already in their backgrounds (example: Rocko’s Modern Life skin)? How the hell do they get it there? Well, that’s image mapping my friends. I would explain how to do it the LONG way…but I’m
extremely lazy right now…so here’s the easy way: http://www.pcoward.com/imagemapper/stage1.asp.
(NOTE: The Image Mapper will contain the following, so you must input your Image Link or it will not appear
10)
Hope this helped you all.
I will add more tutorials…and other stuff.
Oh yeah, and remember…keep visiting my site and keep me alive.
I love you visitors and that’s the only way I don’t actually turn
into a werewo—haha…you didn’t hear it from me.
J/k. Vote for me! Thanks!
11) OKAY...WAIT! So you're
not done...you say you also have another place for where to put the Navigation?
Remember to replace the # with a real number.
Use this code:
Remember to put that at the end of the code.