MAKE YOUR OWN LAYOUTS!

<img src="BANNER URL HERE"> <style type="text/css"> /* USERNAME HERE Stylesheet */ /* by YOUR NAME (xanga.com/USERNAME HERE) */ /* http://BlogRing.Net */ body { background-color: #FFFFFF; background-image: url(BACKGROUND IMG URL HERE); background-repeat: all-directions; background-attachment: fixed; background-position: bottom right background-color: #FFFFFF; scrollbar-arrow-color: #000000; scrollbar-track-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-3dlight-color: #000000; } .left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p { /* edits main text */ font:normal 11px arial; line-height:11px; color:#000000; 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:arial; text-transform:lowercase; font-size:14px; line-height:15px; font-weight:bold; color:#000000; letter-spacing:0px; background-color: #FFFFFF; border: 1px solid #000000; text-align: left; } a:link, .footernav.link, a.footernav:link, a.footernav:active { /* edits all links */ color:#000000; font:normal 11px arial; text-decoration: none; } a:visited, a.footernav:visited, { /* edits the links that the user has visited */ color:#000000; font:normal 11px arial; text-decoration: none; } a:hover { /* edits when user mouseovers the links */ color:#000000; font:normal 11px arial; border-top: 1px solid #000000; border-BOTTOM: 1px solid #000000; cursor: ne-resize; text-decoration: none; } input, select, textarea, .textfield, .button { /* this edits the buttons, dropdowns, etc. */ border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000; font:normal 11px arial; background-color: #FFFFFF; letter-spacing:0px; color: #000000; } table.left { /* this edits the menu module */ border: 1px solid #000000; width:160px; background-color: #FFFFFF; } table.blogbody { /* this edits the other the place where the blog is */ border: 1px solid #000000; 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(IMG URL FOR HEADER HERE); background-color: #FFFFFF; font: bold 11px arial; text-transform: lowercase; color: #000000; border: none; } table.left TD { /* on your menu module, this edits the body part of it */ background-image: url(IMG URL FOR MODULE HERE); background-color: #FFFFFF; font: 11px arial; color: #000000; border: none; } table.search TD, table.search, table.announcements { /* border of search bar (if you have it) */ background-color: #FFFFFF; border: 1px solid #000000; } table.search TD, table.announcements TH { /* this should be left alone */ /* unless you know what to do */ border: 0px solid #FFFFFF; } table.navigation, table.main, table.footer { /* the width of your blog with modules */ width: 500px; } hr { /* horizontal divider */ border: 1px solid #000000; } </style> <script language=JavaScript> <!-- //blink boxes - xanga.com/add_ons //by sean f http://www.xanga.com/seanmeister //fixed to work with new security measures by //hotaru_01 http://www.xanga.com/hotaru_01 // customize by changing the values below // these are the various colors, in quotes, seperated by commas var blinkColors = new Array("#000000","#FFFFFF"); // the border color var blinkBorderColor = "#000000" // the border width, in pixels var blinkBorderWidth = 1; // the # of rows var blinkRows = 1; // the # of columns var blinkCols = 30; // the width of the entire box, in pixels or % var blinkWidth = 500; // the height of each row, in pixels var blinkRowHeight = 10; // speed of blinking, in milliseconds var blinkRate = 8; // do not edit below this line st=setTimeout; document.write("<table id='blinkbox' width='" + blinkWidth +"' border = 0 cellspacing='" + blinkBorderWidth + "' cellpadding=0 bgcolor='" + blinkBorderColor +"'>"); for (r = 0; r < blinkRows; r++){ document.write("<TR>"); for (c = 0; c < blinkCols; c++){ document.write("<TD height='" + blinkRowHeight + "'></TD>"); } document.write("</TR>"); } document.write("</table>"); // ... and this makes it blink function blinkIt() { changecell = Math.floor(Math.random() * (blinkCols * blinkRows)); changecolor = Math.floor(Math.random() * blinkColors.length); bb = document.getElementById("blinkbox"); bbtd = bb.getElementsByTagName("td"); bbtd[changecell].style.backgroundColor = blinkColors[changecolor]; st('blinkIt()', blinkRate); } blinkIt(); //--> </script> <BODY style="border-bottom: #000000 30t solid; border-top: #000000 30t solid; border-left: #000000 30t solid; border-right: #000000 30t solid"></TBODY>

i'm being generous and giving you all the stylesheet that i use for my layouts! please don't forget to change the "USERNAME HERE" to your username and the "YOUR NAME" to your own name. when you're done put the code in custom header. 

the above layout is a simple black and white layout [see below]

change the hex codes to your liking. we'll take the scrollbar and use it as an example: 

scrollbar-arrow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-3dlight-color: #000000;

right now the scrollbar is all black. the hex code #000000 is black. the hex code #FFFFFF is white. the background is set to white, so leave the white hex codes alone unless you want a different color background. let's say you want a pink scrollbar. you would simply change all the #000000 hex codes to #FF99CC.

here are all the hex codes that i use for my layouts:

click on the thumbnails to go to the full-size image. right click the image and go to "save picture as..." and save the image to your computer. now you'll always have the hex codes!

in the entire code the only things you need to change are the hex codes and the banner URL. here's how to do the banner:

<img src="BANNER URL HERE">

just change the bolded "BANNER URL HERE" to the URL of ur banner! it's that simple! for help on making and uploading banners go to tutorial2.

if you have any questions comment here and i'll try to help you out!