How to Make a Skin

[NaTiMaRiE]

Okay...a lot of people have been wondering [a mod told me to place this here]. It's a tutorial I made that I placed on my skin site, here's a link of it:
[Only registered and activated users can see links. ]

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. 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. [Only registered and activated users can see links. ] or [Only registered and activated users can see links. ] 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

<img src=”THE URL OF YOUR IMAGE/BACKGROUND”>

(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:

<div style="
overflow: auto;
width: ###px;
height: ###px;
margin-top: ###px;
margin-left: ###px;">

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:

margin-left:###px

Let’s say I plug in:

margin-left: 400px

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:

<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops 
/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer 
{display: none;} 
</style>

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: [Only registered and activated users can see links. ]

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.

<style type="text/css">
/*Name of Your Skin*/
/*by YOU*/
body {
background-image:url(PUT URL HERE IF YOU HAVE A BACKGROUND IMAGE, IF NOT, DELETE EVERYTHING INSIDE THE PARENTHESES);
background-repeat: repeat-y-x;
background-color: #COLOR CODE;
scrollbar-face-color: #COLOR CODE;
scrollbar-shadow-color: #COLOR CODE;
scrollbar-highlight-color: #COLOR CODE;
scrollbar-3dlight-color: #COLOR CODE;
scrollbar-darkshadow-color: #COLOR CODE;
scrollbar-track-color: #COLOR CODE;
scrollbar-arrow-color: #COLOR CODE;
}

#rblEprops, #pnlEnabled table, #pnlEprops table { 
width: auto !important; 
}

table.blogbody {
width:WIDTH OF THE BLOGpx;
font-family: Arial;
font-weight: none;
font-size: 12pt;
color: #COLOR;
text-align: justify;
padding: 0px;
margin-top: 2px;
}

.caption, .blogheader {
width: 380px;
padding: 3px;
font-family: CHANGE FONT;
font-size: 16pt;
text-align: center;
color: #COLOR;
background-color: #COLOR;
text-transform: lowercaps;
margin-top: 10px;
}

div.smalltext{
width: WIDTHpx;
padding: 3px;
text-align: left;
}

P, B, I, TD, TH 
{font-family: FONT; color: #COLOR CODE OF FONT; font-size: 8pt; }
A:link, A:visited, A:active
{color:#COLOR CODE OF A LINK; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#COLOR; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: arial;
font-size: 8pt;
color: #000000;
font-weight: bold; 
text-transform: lowercaps;
</style>

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. 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: [Only registered and activated users can see links. ].

(NOTE: The Image Mapper will contain the following, so you must input your Image Link or it will not appear

<IMG
SRC='PLACE YOUR IMAGE URL IN HERE'
border=0 width=CHANGE WIDTH height=HEIGHT OF YOUR IMAGE USEMAP='#imgmap'>

10) The End

[Jessorzluvsu]

um...wrong forum? good thing you made this tutorial tho, thats what i would have done if people started jocking my layouts. im really sorry they did that, those people are so annoying.

[LovablexFarzi]

Originally posted by Jessorzluvsu@Aug 2 2004, 07:22 PM
um...wrong forum? good thing you made this tutorial tho, thats what i would have done if people started jocking my layouts. im really sorry they did that, those people are so annoying.

im very sorry as well. i know how it feels when someone does that :angry: jockers should be burned alive!!!

very nice of you to make a tutorial.

[toxicstar8o8]

i dunno why a mod would tell you to place it here? doesnt it go in the xanga section? oh well.. but this is awesome for people that jock layouts. maybe they can start making there own

[ThEy_CaLl_Me_MaTt]

This is Already on this site its right [Only registered and activated users can see links. ]

[ThEy_CaLl_Me_MaTt]

This is Already on this site its right [Only registered and activated users can see links. ]

[NaTiMaRiE]

This is a more thorough explanation.
=P
I explain a little more on image maps and things. Michael told me to place this here and then he would move it.
=)

Oh and thanks for the support. I don't like jockers...they're meanos
=(

[xLiMeY LeM0NxP]

very useful! i love the explanation that you have given...it is very descriptive and this is what people that are new with making layouts really need...if i have known this before...i wouldn't have been so confused before...haha!

thanks so much!

[lilqtali2006]

this is awesome for people that jock layouts. maybe they can start making there own

i totally agree! thanks for putting this in here! maybe we`ll stop getting requests and layout questions in the submissions forum now.. <_<

[Crueltoyourmind]

thank you much for this...it is very helpful!!