How to make a Xanga layout
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
CODE
<!-- begin code provided by createblog.com -->
<img src="PASTE YOUR XANGA SKIN URL HERE">
<!-- end code provided by createblog.com -->
<img src="PASTE YOUR XANGA SKIN URL HERE">
<!-- end code provided by createblog.com -->
(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:
CODE
<!-- begin code provided by createblog.com -->
<div style="
overflow: auto;
width: ###px;
height: ###px;
margin-top: ###px;
margin-left: ###px;">
<!-- end code provided by createblog.com -->
<div style="
overflow: auto;
width: ###px;
height: ###px;
margin-top: ###px;
margin-left: ###px;">
<!-- end code provided by createblog.com -->
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:
CODE
<!-- begin code provided by createblog.com -->
margin-left:###px
<!-- end code provided by createblog.com -->
margin-left:###px
<!-- end code provided by createblog.com -->
Let’s say I plug in:
CODE
<!-- begin code provided by createblog.com -->
margin-left: 400px
<!-- end code provided by createblog.com -->
margin-left: 400px
<!-- end code provided by createblog.com -->
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:
CODE
<!-- begin code provided by createblog.com -->
<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>
<!-- end code provided by createblog.com -->
<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>
<!-- end code provided by createblog.com -->
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.
CODE
<!-- begin code provided by createblog.com -->
<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;
}
div.smalltext{
width: WIDTHpx;
padding: 3px;
text-align: left;
}
.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;
}
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>
<!-- end code provided by createblog.com -->
<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;
}
div.smalltext{
width: WIDTHpx;
padding: 3px;
text-align: left;
}
.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;
}
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>
<!-- end code provided by createblog.com -->
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
CODE
<!-- begin code provided by createblog.com -->
<IMG
SRC='PLACE YOUR IMAGE URL IN HERE'
border=0 width=CHANGE WIDTH height=HEIGHT OF YOUR IMAGE USEMAP='#imgmap'>
<!-- end code provided by createblog.com -->
<IMG
SRC='PLACE YOUR IMAGE URL IN HERE'
border=0 width=CHANGE WIDTH height=HEIGHT OF YOUR IMAGE USEMAP='#imgmap'>
<!-- end code provided by createblog.com -->
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:
CODE
<!-- begin code provided by createblog.com -->
<div style="position:static; margin-left: ###px;margin-top: ###px;border: 0px solid #COLOR CODE; width: ###px; height: ###px;background: none; overflow: auto">
<table border="0" width=100%>
<tr>
<td colspan=2>
<b class=nav>About Me</b>
<tr>
<td colspan=2><br>
Stuff about yourself…here
Stuff about yourself…here
Stuff about yourself…here
Stuff about yourself…here
<tr>
<td colspan=2><br>
<b class="nav">Navigation</b><br>
<a href="http://www.xanga.com/">Xanga</a><br>
<a href="http://www.xanga.com/signin.aspx">Sign In</a><br>
<a href="http://www.xanga.com/logout.aspx">Sign Out</a><br>
<a href="http://www.xanga.com/private">Home</a><br>
<a href="http://www.xanga.com/claf">CLAF</a><br>
<a href="http://www.xanga.com/Private/subs.aspx">Your Subs</a><br>
<a href="http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER">Guestbook</a><br>
<a href="http://www.xanga.com/profile.aspx?user=YOURXANGAUSER">Profile</a> (<a href="http://www.xanga.com/Private/profilebasic.aspx">Edit</a>)<br>
<a href="http://www.xanga.com/private/tracking.aspx">Your Comments</a><br>
<a href="http://www.xanga.com/Private/feedback.aspx">Feedback</a><br>
<a href="http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER" target="blank">Add Me</a><br>
<tr>
<td colspan=2>
<b class="nav">Subscriptions</b>
<tr>
<td>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<td>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
</tr>
</table>
</div>
<div align="center" class="blogspace">
<!-- end code provided by createblog.com -->
<div style="position:static; margin-left: ###px;margin-top: ###px;border: 0px solid #COLOR CODE; width: ###px; height: ###px;background: none; overflow: auto">
<table border="0" width=100%>
<tr>
<td colspan=2>
<b class=nav>About Me</b>
<tr>
<td colspan=2><br>
Stuff about yourself…here
Stuff about yourself…here
Stuff about yourself…here
Stuff about yourself…here
<tr>
<td colspan=2><br>
<b class="nav">Navigation</b><br>
<a href="http://www.xanga.com/">Xanga</a><br>
<a href="http://www.xanga.com/signin.aspx">Sign In</a><br>
<a href="http://www.xanga.com/logout.aspx">Sign Out</a><br>
<a href="http://www.xanga.com/private">Home</a><br>
<a href="http://www.xanga.com/claf">CLAF</a><br>
<a href="http://www.xanga.com/Private/subs.aspx">Your Subs</a><br>
<a href="http://www.xanga.com/guestbook.aspx?user=YOURXANGAUSER">Guestbook</a><br>
<a href="http://www.xanga.com/profile.aspx?user=YOURXANGAUSER">Profile</a> (<a href="http://www.xanga.com/Private/profilebasic.aspx">Edit</a>)<br>
<a href="http://www.xanga.com/private/tracking.aspx">Your Comments</a><br>
<a href="http://www.xanga.com/Private/feedback.aspx">Feedback</a><br>
<a href="http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGAUSER" target="blank">Add Me</a><br>
<tr>
<td colspan=2>
<b class="nav">Subscriptions</b>
<tr>
<td>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<td>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
<a href="http://www.xanga.com">link</a><br>
</tr>
</table>
</div>
<div align="center" class="blogspace">
<!-- end code provided by createblog.com -->
Remember to put that at the end of the code.
11) To put a chatterbox using div layers, use this code:
CODE
<!-- begin code provided by createblog.com -->
<div style="position:static; margin-left: ###px; margin-top: -505px;border: 0px solid #ffffff; width: ###px; height: ###px; background:none;overflow: auto">
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TD>
<P class=nav>
<!-- end code provided by createblog.com -->
<div style="position:static; margin-left: ###px; margin-top: -505px;border: 0px solid #ffffff; width: ###px; height: ###px; background:none;overflow: auto">
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TD>
<P class=nav>
<!-- end code provided by createblog.com -->
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.