How to Make a Xanga Layout Options

[NatiMarie]

FOR QUESTIONS, CONCERNS, PLEASE ASK IN XANGA HELP.

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

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

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

Let’s say I plug in:

CODE

<!-- begin 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 -->

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

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

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

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

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.

This post has been edited by mona lisa: Mar 24 2006, 07:55 PM

[sweetxsimplicity]

I noticed that many people often ask, "How do you make a Xanga lout?", so I decided to make a nice, descriptive tutorial about it. I hope you enjoy it!

By the way, this tutorial teaches you how to make a layout that consists of one big image with a blogging space on it.


THE PROGRAMS USED
You can make a Xanga layout with any image editing program (yes, including MS Paint), but if you really would like to make something beautiful, I recommend a program like Jasc Paint Shop Pro or Adobe Photoshop, both of which you can get 30-day-trial versions at http://www.downloads.com (search for it). I recommend Jasc Paint Shop Pro, or PSP for short, for beginners. Adobe Photoshop, or PS for short, is much more complex, but you can make a lot of cool abstract art with it.


MAKING YOUR IMAGE
The graphic image for your Xanga layout should make up of a blogging space and navigation. Make a box for the blogging spot, and you can put a picture beside it, or you can also put a box on top of the picture (the picture should be around 800 x 600).

Here's a neat tutorial that you can use (for PSP or PS) for a blog box:

1. Make a box using the rectangular marquee tool
2. Click the Fill icon and set the opacity to about 30-80 and fill the box with it(white usually works good, but you can use other colors to make it blend in more with the image)
3. There's your blog box! If you want, you can also go to Effects > Drop Shadow, which will make your box have a nice shadowy effect.


SAVING THE SKIN
You can save your skin as several different file types, I have provided a list for you with different file types and the pro's and con's of how they turn out:

.GIF - If you save it as a .GIF, the image's color will be a bit off, but it's quick on the loading, just like .JPG/.JPEG's
.JPG/JPEG - The image gets a bit fuzzy, after you save it, but it's pretty quick on the loading.
.PNG - This particular file type's quality is excellent, but it takes a huge time to load, so I wouldn't recommend it.
.PSP/.PSD - This certain file type isn't for people to view on the web, but if you save it as this, it keeps all your layers, the quality, and everything else the same (recommended if you're going to edit your skin later).

IMAGE MAPPING
If your skin is using a navigation where you already put some text on the image for the links, you can image map it, where if you click a certain place (usually text) on the image, it will bring you to a link. You can image map on PSP by going to File > Export > Image Mapper or you can also image map on ImageReady by clicking the "Image Map" tab. If you don't have any of those programs, don't worry, you can still map your image by simply going to http://www.pcoward.com/imagemapper, everything is explained there.
If you're image mapping on ImageReady, click the "Internet Explorer" icon on the left toolbar for your code. If you're image mapping on Paint Shop Pro click the "eye" icon and then view source that page (right click > view source), that will be your code.

UPLOADING YOUR IMAGE
Find the "Upload Files" link on your image host site and then go to "Browse" and find your file. You can upload your image anywhere, as long as your image host allows you to direct link (also known as hot link) images. A few sites I recommend are Photobucket and ImageShack, but you can look through the Big Book of Resources for more sites.

CODING THE SKIN: GETTING YOUR IMAGE AND MOVING THE BLOG
Once you have uploaded your image, find the image URL for it and insert this code into your Custom Header HTML

CODE

<img src="IMAGE URL GOES HERE">

Now you've got your image ready, how are you going to get your blog on it? You can do so by plugging in this simple code.

CODE

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

Change the "###" to actual numbers, that will represent the number of pixels they are. As for the top and left margins, the less the number is, the more top or left it will go. Usually regular numbers aren't enough, so you can try negative numbers, I think -300 or so is a good number to start with. Just keep fiddling with it until the blog is in the right spot. For the width and height, the line below represents about 100 pixels.
-------------------- <-- about 100 pixels

If you made another box on your image for something else (about me's, different navigation style, etc..) then just plug in that same div code. And put your text under, but don't forget to end the div! An example is supplied below

CODE

<div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"><b>About Me</b><br>Name: John Smith<br>Age: 20<br>Birthday: January 1<br>Hobbies: Farting<Br>Expertise: Computer Programming</div>

Just make sure that your blog div layer is after your div that's for all your other stuff!

Now that you've got your blog and image set, you need to remove those annoying footer and header links. You can do that simply by inserting in this code into your Custom Header HTML.

CODE

<style type="text/css">
table.navigation, table.footer { display:none; }
</style>

You also need to get rid of your left side modules by plugging this code into your Custom Header HTML.

CODE

<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone,
/* 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>

CODING THE SKIN: CHANGING YOUR FONT, COLORS, AND STYLES
Here comes the creative coding part, where you can totally customize your Xanga's fonts, colors, styles, and links to your wants.
Whenever you see the "#COLOR CODE" text, that's where you need to plug in the color code. You can match the exact color of your skin in PSP or PS, but if you don't have those programs, you can also use a really awesome site that has tons of different color codes: http://webmonkey.wired.com/webmonkey/reference/color_codes/.
Where you see "#px/pt" is how big you want the font, line height, or letter spacing to be (the font size should be around 8 px).
Where you see "FONT FAMILY" is what you want the font to be.

By the way, if you don't want one of the codes (e.g. text-transform, cursor, etc..) then just simply erase the part (crosshair, uppercase, etc..) and put "none".

CODE

<style type="text/css">
/* Name of Your Skin - By You*/
body
{background-color: #COLOR CODE;

scrollbar-arrow-color: #COLOR CODE;
scrollbar-track-color: #COLOR CODE;
scrollbar-shadow-color: #COLOR CODE;
scrollbar-face-color: #COLOR CODE;
scrollbar-highlight-color: #COLOR CODE;
scrollbar-darkshadow-color: #COLOR CODE;
scrollbar-3dlight-color: #COLOR CODE;}

/* edits the date */
div.blogheader, .caption
{background-image: url();
background-repeat:no-repeat;
background-position:center;
font-family: FONT FAMILY;
text-transform:none;
font-size:#px;
line-height:#px;
font-weight:normal;
color:#COLOR CODE;
letter-spacing:2px;
background-color:#COLOR CODE;
text-align:center;
border:1px solid #COLOR CODE;}

.blogbody b, .standard b, p b, strong {
/* edits bolded text in your entry */
font-weight: bold;
color: #COLOR CODE;}

input, select, textarea, iframe.htmleditor, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: #px solid #COLOR CODE;
font:normal #px FONT FAMILY;
background-color: #COLOR CODE;
font-color:#COLOR CODE;}

table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;}

table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url();
background-color:none;
color: #COLOR CODE;
font: bold #pt FONT FAMILY;
text-transform: none;
text-align:center;
border: #COLOR CODE #px solid;}

table.left {
/* this edits the menu module */
width:180px;
color:000000;
background-color:#COLOR CODE;
BORDER: #COLOR CODE #px solid;}

font,td,p,xmp
{color:#COLOR CODE;
font-face: FONT FAMILY;
font-weight:normal;
font-size:#pt;
text-align:justify;}

table.blogbody tr td {
/* this edits the left margin of blog */
width:0px;
padding-left: 0px;}

table.blogbody {
/* this edits the other the place where the  blog is */
background-color:transparent;
family-font: FONT FAMILY;
BORDER: #COLOR CODE #px solid;
width:###px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */

a:link
{line-height: #pt;
font-family: FONT FAMILY;
font-weight:normal;
color:#COLOR CODE;
text-transform:none;
font-size:#pt;
cursor:crosshair;}

a:active
{font-family: FONT FAMILY;
color:#COLOR CODE;
text-transform:none;
font-size:#pt;
cursor:crosshair;}

a:visited
{font-family: FONT FAMILY;
color:#COLOR CODE;
text-transform:none;
text-decoration:strikeout;
font-size:#pt;
cursor: crosshair;}

A:hover {font-family:FONT FAMILY;
color:#COLOR CODE;
text-transform: uppercase;
cursor: crosshair;
font-weight:bold;
font-size:#pt}</style>

You're done after you have finished all the CSS codings. Congratulations, you've just made your very first layout!

This post has been edited by mona lisa: Mar 24 2006, 07:58 PM

[sweetxsimplicity]

FREQUENTLY ASKED QUESTIONS

Q: The horizontal scrollbar for my blog is so annoying! How do I get rid of it?
A: Make the width in this part of the CSS stylesheet smaller, this will make your blogging space (not your div layer) smaller, so you won't have to scroll horizontally.

CODE

<!-- begin code provided by createblog.com -->
table.blogbody {
/* this edits the other the place where the  blog is */
background-color:transparent;
family-font: FONT FAMILY;
BORDER: #COLOR CODE #px solid;
width:###px; /*<-- make the number you entered for the width here smaller*/}
<!-- end code provided by createblog.com -->

Q: Why does my image show up as a red "x"?!
A: The place you are hosting your image at probably doesn't allow direct linking, or it could just be down. Usually there are updates on the host site if their server is down.

Q: How do I get another box for navigation, or information about me?
A: You would put in another div layer code, just like the one for your blog, though you will have to end the div layer. An example is supplied below, and don't forget to put this code before your blog code!

CODE

<div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"><b>About Me</b><br>Name: John Smith<br>Age: 20<br>Birthday: January 1<br>Hobbies: Farting<Br>Expertise: Computer Programming</div>

Q: After I have finished my image map for the skin, where do I put the code?
A: Simply insert it into your 'Custom Header HTML'

Q: All this stuff seems so complicated, and I just can't do it! Can you help?
A: I suggest you start smaller, like with banners and avatars and such. Then, you can work your way up. Don't worry, it'll get easier. =]