This is a stylesheet:

body {

background-color: #FFFFFF;

scrollbar-arrow-color: #B991C9;

scrollbar-track-color: #FFFFFF;

scrollbar-shadow-color: #B991C9;

scrollbar-face-color: #B991C9;

scrollbar-highlight-color: #B991C9;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

font:normal 11px arial;

color:black;

}

.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, li, ol, ul {

/* edits main text */

font:normal 11px arial;

line-height:10px;

color:black;

letter-spacing:0px;

text-align:justify;

}

table.footer TD {

/* this makes the footer at the bottom centered */

/* leave it alone unless you know what to do*/

text-align: center;

}

div.blogheader, .caption {

/* edits the dates */

font-family:impact;

text-transform:uppercase;

font-size:16px;

line-height:10px;

font-weight:bold;

color:#C991AE;

letter-spacing:0px;

background-color: #ffffff;

text-align: left;

}

a:link, .footernav.link, a.footernav:link, a.footernav:active {

/* edits all links */

color:#B991C9;

text-decoration: none;

}

a:visited, a.footernav:visited, {

/* edits the links that the user has visited */

color:#B991C9;

text-decoration: none;

}

a:hover {

/* edits when user mouseovers the links */

color:#9D91C9;

cursor: ne-resize;

text-decoration: none;

}

input, select, textarea, .textfield, .button, iframe.htmleditor, .htmleditor {

/* this edits the buttons, dropdowns, etc. */

border: 1px solid #c0c0c0;

font:normal 11px arial;

background-color: #FFFFFF;

letter-spacing:0px;

color: #000000;

}

table.left {

/* this edits the menu module */

border: 1px solid #c0c0c0;

width:160px;

background-color: #FCEBFF;

}

table.blogbody {

/* this edits the other the place where the blog is */

border: 0px solid c0c0c0;

background-color: #ffffff;

width:400px;

}

table.left th {

/* on your menu module, this edits the title part of it */

/* like BLOGRINGS, POSTING CALENDAR, etc */

background-image: url(http://url.com/to/the/site/image.gif);

background-color: #FCEBFF;

font: bold 11px arial;

text-transform: uppercase;

color: #C991AE;

border: none;

}

table.left TD {

/* on your menu module, this edits the body part of it */

background-image: url(http://url.com/to/the/site/image.gif);

background-color: #FFFFFF;

border: none;

}

table.search TD, table.search, table.announcements {

/* border of search bar (if you have it) */

background-color: #FCEBFF;

border: 1px solid #c0c0c0;

}

table.search TD, table.announcements TH {

/* this should be left alone */

/* unless you know what to do */

border: 0px solid #c0c0c0;

}

table.navigation, table.main, table.footer {

/* the width of your blog with modules */

width: 500px;

}

hr {

/* horizontal divider */

border: 1px solid #FCEBFF;

}

</style>

What this does…

It customizes your Xanga so it has custom colors and fonts and things like this. To see an example, check out some of the layouts Ive made.

How to use it…

You first need to know some basic HTML, if you don’t, check out my HTML tutorial. There are notes along the way of the style sheet telling you what the codes below them change. You can change those codes to fit your preferences. There are many styles you can change various things in the style sheet too.

A great CSS tutorial/overview can be viewed here! And www.dorkette.net is another great site to get CSS help and codes from. Oh and don’t forget about www.blogring.net for tons of help.

I would explain more but editing a stylesheet is pretty easy. Just experiment with it and once you get the hang of it you can start using more advanced ways of making layouts. I started out all dumb towards HTML and now look at all my themes. I have one of the most popular themes on Blogring.net, Bored In Math Class. So, don’t get discouraged.

Advanced Layout Creating Techniques Thanks to SquishyPenguin of BR.net for this.

Ok, I thought this would be good for those who would want to make good layouts, and want to know all the tricks, but are a little afraid to ask questions thinking people would think they're dumb and crap.

Firstly, for Xanga

There are many things you can do for Xanga. There is also a lot of options you can choose to do when it comes to making Layouts. These include Div, Normal, Div Layer and Image Map.

The Normal kind of layout you can make is altering the regular Xanga colors by going to the look and feel, adding blinkie boxes, and adding a banner. Most of the time, CSS (Cascading Style Sheets) is required. To see all the hex #'s that will show in a web browser, you can click here or you can go here.

The next hardest type of layout to make for Xanga is Div, aka Divider. This requires using a 'textarea' for your Blog, so you need to know how to position. By positioning, I mean this:

QUOTE

Those numbers in bold are telling your little 'textarea' where it should go. If the number is negative it means the 'textarea' is going to be over toward whatever side more. Negative means the 'textarea' is more on the picture, rather then off of it.

For these positions, you can use one of two things. You can use Percents, or Pixels. The difference between the two is that if you use Percents (I believe they are supposed to add up to 100%, but I am not so sure) is that Percents are supposed to be more accurate in any Screen Resolution. Confused? If someone has percents in their layout for a 800x600 resolution, and someone viewing it has a 1027x900 resolution, Percents make it so the difference between the two resolutions on the layout isn't seen much. With Pizels, it'll change drastically.

Div can also positioned in other ways. You can say

CODE

<DIV style="position: static;>"

and the Div will be in it's normal mode. Meaning, it will be right where you positioned it to be.

You can change the bolded text "Static" to these as well:

Absolute &
Relative

The next hardest type of xanga layout to make is something called the Image Map. This could be easy or hard to you, depending on how easily you understand. For me, it took a while to get.

Image Maps are basically a graphic in which you add text on. Simple? Not quite. That's the easy part, but now you need to understand the X and Y axis on your positioning. If you do not have either Paint Shop Pro, or Photoshop, I reccomend dowloading a free Image Mapper, such as Coffee Cup Image Mapper.

When you're done adding text on whatever graphic you want, you must image map it. This is pretty fun, although a royal pain in the butt. First, when you drag around your first line of text you want to link, you'll get four Coordinates.

These coordinates are important, so write them down! They'll be used in the next step to make an Image Map. Coordinates should look something like this:

CODE

x=43, y=65,
x=34, y=67

Keep note of these, and make sure you write down each number for each of the text words you want linked.

The next step is placing all of your coordinates into a code. Firstly, upload your graphic with the next to an online image hoster. Next, take a look at this code:

QUOTE

See where it says #Map? This is the name of the Image Map. When you write your name, you MUSTake sure it matches the name below. You can name it anything.

CODE

Now, we look back at our little X and Y axis Coordinates and plug them in this, where the Bold spot is:

QUOTE

See. Not so hard. The whole code should look something like this:

CODE

Viola! You have now made an Image Map that you can use to make your own awesome Xanga layout.

The hardest kind of layout to make is Div Layer. Why? Because it requires two Div's and their positioning has to be perfect. The Div Layer makes your own 'Custom Module' you can say, and you can add anything. Even a credit for yourself after you're done completing it so a jocker can't get it.

The first DIV used will be that of your Navigation. You can use the same code as you would for a Div Layout. The only difference is you will have to close this Div with an

CODE

</div>

tag. Why? Because you still have to have another DIV that will hold your blog in place, and having two DIV's open at once isn't going to work.

Basic Div Layer Navigation code:

QUOTE

<DIV style="margin-top: -76%; border: 0px solid #000000;margin-left: -55%; OVERFLOW: auto; HEIGHT: 78%px; width: 100%; background-color:transparent">

YOU WOULD ADD YOUR NAVIGATION LINKS, TEXT - YOU CAN BOLD, ITALICIZE, AND UNDERLINE HERE. WHATEVER YOU WRITE IN THIS, WILL BE THE COLOR OF YOUR NORMAL XANGA TEXT, LINKS WILL TOO. To space things in here, you will use the <br> or </ br> tags.

</div>

After you end that Div, you can add another DIV, which will be your blog positioning:

CODE

<DIV style="margin-top: -76%; border: 0px solid #000000;margin-left: -55%; OVERFLOW: auto; HEIGHT: 78%px; width: 100%; background-color:transparent">

YOU WOULD ADD YOUR NAVIGATION LINKS, TEXT - YOU CAN BOLD, ITALICIZE, AND UNDERLINE HERE. WHATEVER YOU WRITE IN THIS, WILL BE THE COLOR OF YOUR NORMAL XANGA TEXT, LINKS WILL TOO. To space things in here, you will use the <br> or </ br> tags.

</div>

<DIV style="margin-top: -76%; border: 0px solid #000000;margin-left: -55%; OVERFLOW: auto; HEIGHT: 78%px; width: 100%; background-color:transparent">

That's the Basic Div Layer code. Once again, you can use the basic DIV rules to make this layout. Percents and Pixels. But your positioning will have to be perfect. Every mistake you make positioning the Navigation will throw off the Blog DIV as well.

Positioning Tutorial Thanks to Ally on BR.net for this.

This tutorial includes a simple Layout Tutorial based on positioning.

As squishy has already put it in her Layout Tutorial, there are different ways of positioning things. This will be a little different though. You see, squishy used divs for positioning and keeping things in a box. In this tutorial, I used css to position.

Relative positioning is when you look at where the element would appear and move it from there.

Absolute positioning is when you position absolutely; that is, it'll appear in that spot no matter what else is around it.

Simple enough, no? Well just in case, here's an image to help!

user posted image

Here's the code:

CODE

#red {
position: absolute;
top: 30px;
left: 40px;
}

#blue {
position: relative;
top: 30px;
left: 40px;
}

Let me explain. The red box is positioned with absolute, in this case, absolute is top: 30px and left: 40px. So from the top and left, it moves 30px and 40px.
On the other hand, the blue box is positioned relative, meaning the dotted line is where the box would appear if you didn't have top: 30px; left: 40px.

==========

Now that we've learned that, how about we put this to good use and make a basic layout with such coding? I'm so sorry, since I'm only a web designer, I don't code for xangas. But this tutorial is still helpful to get down basics of positioning. (Maybe squishy can convert this to xanga coding? )

Well this is the background I will be using: http://img.photobucket.com/albums/v36/lila...1/classof05.jpg

The goal of this tutorial is to have two divs, one positioned under "Navigation" and another at the top left as a "Blog". We won't bother with the "Links". (I suggest if you want to make something like this, you open up Notebook and start there.)

First things first, you want add <html> and </html> to your coding. Next step is to making a CSS (preferrably, I'd use external, but in this case we'll just a basic CSS code)

QUOTE

Things that are bold are the key elements in this tutorial. #nav and #blog are div ids, which are basically div classes except they can only be used once on a page. Also, another difference is that div classes use periods on CSS while div ids use #. Now for the #blog, I positioned it from the top-right, so the px are measured that way.

Things in red are there for your benefits. To see this code in effect, you'll need this:

CODE

Copy and paste that in Notepad, followed by the CSS. Click "File" then "Save As". Make sure you have these settings =
File name: NAME.html
Save as type: All Files
Save it on your Desktop. Now go to Desktop and click on your file. There is it!

That’s about it for the layout tutorial…Questions? Email me.

-Ace_HTML