Xanga: How to Make a Xanga Skin, by NatiMarie

Okay...a lot of people have been wondering how to make a skin. It's a tutorial I made that I placed on my skin site, here's a link of it:
Clickie
Note: If you have questions or problems, please post in questions.

Here it is (with edited content):

How To Make a Skin
This tutorial is for those who are making a full skin with an image they have already created. For example, like this image [taken from my Maroon 5 skin] Maroon 5 Image 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 ,ImgSpot, or ImageShack are the best way to go. I recommend ImgSpot 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 [try numbers in the 100s area...200 and 300 is a good start]. 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: overflow:
auto;

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 [btw: the div.smalltext edits the links below the blog entry]. 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) 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.

11) To put a chatterbox using div layers, use this code:

Your finished product can look like this: http://www.xanga.com/natskin2


FREQUENTLY ASKED QUESTIONS
1) Why isn't my picture showing in the image map?
Make sure that the last part of the image map where there are quote 'nameofyourdocument'...you actually put the URL of your image in there.
Also make sure the URL is not messed up.

That's really helpful. Thankssss. Too bad I quit xanga haha. But when I did have a xanga, I just mainly used CSS layouts instead of using image maps and all that other stuff that's a different language to me hahaha. ÜÜ

One of the most in-depth tutorials I've seen. Good hob

Wow natalie. I am no longer afraid of codes for xanga skins.

Cool tutorial. But I don't have Xanga, I have Blogger. I wish I knew how to do the same thing for that.

Kenn

very good tutorial

Jeez, Natalie.
That tutorial was awesome!
So easy to understand.
Thank you for posting that. I'm sure it'll help a lot of people!

hi, can you help, this thing isnt working, i think the two profile div, and the blog div collided :X

http://www.xanga.com/liquidplasma

No they didn't collide, you just need to adjust the div width of the blog and that of the profile div.
=P

Post questions in Questions...I sometimes overlook questions in the tutorials section.

alright, thanks, i got it going on!

wow that is really loong and helpful lol. good job nat!

nat I don't think I did my layout right my calculations are a little off....
www.xanga.com/moron4life

Can you post the code in Questions? I'll be able to help...if I see the code.
:]
Thanks.
=D
Nice layout by the way. Skills. ;]

im gonna make a skin thanks to ur tutorial nat =D

i dont know how to make clicky text like i dano how to define the 83748239748293748923749823475 X] how?

:.:EDIT:.:
sorry about the double post i forgot i posted there lol

i cant use the link u gave me when i click stage 2 it is blank .....

:.: EDIT AGAIN :.:
well i had a brilliant idea X]
i used internet explorer for mac and it works
but the pic comes out as an x
and the only windows pc i have is broken now what?

Okay you did GREAT explaining all this and I am used to coding because I used to make layouts for various things but I stopped doing them for almost half a year and I am a little confused. I would be fine if I could get the REAL xanga settings to dissapear. It's like the things I want are on there but if you keep scrolling down there are still the original xanga settings there too...Could you help me or give me a code to make them invisible? Maybe I just forgot to erase something but if you could help that would be great!

I feel dumb...i have no clue how to do it...=( *crys* i need help...somone needs to like walk me through it....if anyone wants to ...my s/n is xNekoxGirlyx


thanks...i hope..

i will help you e-mail me.

q.o.t.a.k.u@gmail.com

it's not hard, in fact it's easyer them you think

It a good Tutorials......but i still have no cue how do it or mading it? ..........i need help....can somebody in here help me plz. u can talk to in AIM my SN is litterteddybear3 or e-mail me at xoxorhscoolgirl06xoxo@yahoo.com
Thank You

im still confused- my picture never shows up and i dont no wut numbers to use of height and stuff! im really confused!!! cud yoo mayb sum1 post an example code so i no wut 2 do or possibly make it easier??

I'm still confused and i dont know if somebody in here can help me?

Thank......I hope

I'll e-mail you about it.

I'm really confused about this, can anyone help?

OOO I GET IT NOW! lol

hey, im trying to make a xanga layout site, and i know how to make the layouts and all, but how do i make it into a link so when ppl view my layout site..they can click the link and it takes them to the layout preview....
-Alyssa-

This post has been edited by Rice_on_my_shoe on Mar 23 2006, 07:34 PM