Ok, this is for anyone who would like to make their own layouts and is a tad confused. Don't worry, it's not as hard as it looks. You just need to be willing to read through each code and make your changes.
This is the basic layout code (basically this layout's code without all the extra stuff and pics):
<img src="URL_OF_IMAGE_HERE">
<style type="text/css">
/* <span class='searchlite'>phantom</span> Stylesheet */
/* by your name(you xange site) */
/* <a href='http://BlogRing.Net' target='_blank'>http://BlogRing.Net</a> */
body {
background-color: #FFFFFF;
background-image: url(url of image hear);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
background-color: #FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-shadow-color: #000000;
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 13px times;
line-height:16px;
color:#000000;
letter-spacing:0px;
text-align:justify;
}
.left B, { font: bold 11px times; color: "#000000"; line-height: 16px;}
.blogbody b, .standard b, p b, strong {
/* edits bolded text in your entry */
font-weight: bold;
color: #00000;
}
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: helvetica;
text-transform:uppercase;
font-size:11px;
line-height:16px;
font-weight:bold;
height: 1px;
color: #FFFFFF;
letter-spacing:1px;
text-align: center;
background-color: none;
border: 1px solid none;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#000000;
text-decoration: none;
font:normal 11px arial;
line-height:16px;
}
a:visited, a.footernav:visited,{
/* edits the links that the user has visited */
color: #000000;
text-decoration: none;
font:normal 11px arial;
line-height:16px;
}
a:hover {
/* edits when user mouseovers the links */
color:#000000;
text-decoration: none;
font:bold 11px arial;
line-height:16px;
background-image: url();
border: 1px solid #000000;
}
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #ffffff;
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;
font:normal 11px helvetica;
line-height:16px;
}
table.blogbody {
/* this edits the other the place where theblog is */
border: 1px solid #000000;
background-color: #FFFFFF;
(You can place the transparansy code here if you want, but make sure you delte the paranthesis)
width:400px;
font:normal 11px arial;
line-height:16px;
color: #bbbbbb;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-color: #FFFFFF;
font: bold 11px arial;
color: #000000;
border: none;
BORDER-BOTTOM: #000000 1px solid;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-image: none;
background-color: #FFFFFF;
border: none;
font:normal 11px arial;
line-height:16px;
color: #000000;
}
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
background-color: #FFFFFF;
border: 2px solid #000000;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 1px solid #000000;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 500px;
}
hr {
/* horizontal divider */
border: 1px solid #000000;
}
</style>
----------------------------------------------------------------------------
If you want blinkies, this is the code (these are black & white, so you can change the colors and sizes and stuff):
<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 = 3;
// the # of rows
var blinkRows = 1;
// the # of columns
var blinkCols = 25;
// the width of the entire box, in pixels or %
var blinkWidth = 500;
// the height of each row, in pixels
var blinkRowHeight = 3;
// 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> <!-- End Script by Blogring.net -->
----------------------------------------------------------------------------
If you start your own layout site, this is what you paste so it links to it:
<a href="YOUR_SITE_URL_HERE" target="_blank">attempted_layouts</a><br />
<!-- End Script by Blogring.net -->
----------------------------------------------------------------------------
Boreders around the outside of the page:
----------------------------------------------------------------------------
This blurs links when you hover over them:
<!-- begin code provided by createblog.com -->
<style type="text/css">
/*
Blurred Hyperlinks - xanga.com/add_ons
- use only 45, 90, 135, 180, 225, 270, 315, or 360 for DIRECTION
- STRENGTH means the blur power
- do not change or remove HEIGHT:0 and add="0"
*/
a:hover
{
filter:blur(add="0",direction="90",strength="7"); height:0;
}
</style>
<!-- end code provided by createblog.com -->
<!-- begin code provided by createblog.com -->
<style>
a:hover
{
border: 1px solid #99CCCC;
}
</style>
<!-- end code provided by createblog.com -->
----------------------------------------------------------------------------
Makes blog transparent (place after blogbody background color, or wherever, pretty much, but it is mainly used for the blog):
filter:alpha (opacity=80,style=0)
----------------------------------------------------------------------------
All you need to know about making banners *HERE*
Hex codes for layouts, you use these numbers in the layout code. So, for example, if you type in #FFFFFF in a spot that needa a color hex in the code, it will show up white in the layout.
|
Hex Code |
Color |
|
|
|
|
#FFFFFF |
|
|
#FFFFCC |
|
|
#FFFF99 |
|
|
#FFFF66 |
|
|
#FFFF33 |
|
|
#FFFF00 |
|
|
#FFCCFF |
|
|
#FFCCCC |
|
|
#FFCC99 |
|
|
#FFCC66 |
|
|
#FFCC33 |
|
|
#FFCC00 |
|
|
#FF99FF |
|
|
#FF99CC |
|
|
#FF9999 |
|
|
#FF9966 |
|
|
#FF9933 |
|
|
#FF9900 |
|
|
#FF66FF |
|
|
#FF66CC |
|
|
#FF6699 |
|
|
#FF6666 |
|
|
#FF6633 |
|
|
#FF6600 |
|
|
#FF33FF |
|
|
#FF33CC |
|
|
#FF3399 |
|
|
#FF3366 |
|
|
#FF3333 |
|
|
#FF3300 |
|
|
#FF00FF |
|
|
#FF00CC |
|
|
#FF0099 |
|
|
#FF0066 |
|
|
#FF0033 |
|
|
#FF0000 |
|
|
|
|
|
Hex Code |
Color |
|
#66FFFF |
|
|
#66FFCC |
|
|
#66FF99 |
|
|
#66FF66 |
|
|
#66FF33 |
|
|
#66FF00 |
|
|
#66CCFF |
|
|
#66CCCC |
|
|
#66CC99 |
|
|
#66CC66 |
|
|
#66CC33 |
|
|
#66CC00 |
|
|
#6699FF |
|
|
#6699CC |
|
|
#669999 |
|
|
#669966 |
|
|
#669933 |
|
|
#669900 |
|
|
#6666FF |
|
|
#6666CC |
|
|
#666699 |
|
|
#666666 |
|
|
#666633 |
|
|
#666600 |
|
|
#6633FF |
|
|
#6633CC |
|
|
#663399 |
|
|
#663366 |
|
|
#663333 |
|
|
#663300 |
|
|
#6600FF |
|
|
#6600CC |
|
|
#660099 |
|
|
#660066 |
|
|
#660033 |
|
|
#660000 |
|
|
|
|
Hex Code |
Color |
|
|
|
|
#CCFFFF |
|
|
#CCFFCC |
|
|
#CCFF99 |
|
|
#CCFF66 |
|
|
#CCFF33 |
|
|
#CCFF00 |
|
|
#CCCCFF |
|
|
#CCCCCC |
|
|
#CCCC99 |
|
|
#CCCC66 |
|
|
#CCCC33 |
|
|
#CCCC00 |
|
|
#CC99FF |
|
|
#CC99CC |
|
|
#CC9999 |
|
|
#CC9966 |
|
|
#CC9933 |
|
|
#CC9900 |
|
|
#CC66FF |
|
|
#CC66CC |
|
|
#CC6699 |
|
|
#CC6666 |
|
|
#CC6633 |
|
|
#CC6600 |
|
|
#CC33FF |
|
|
#CC33CC |
|
|
#CC3399 |
|
|
#CC3366 |
|
|
#CC3333 |
|
|
#CC3300 |
|
|
#CC00FF |
|
|
#CC00CC |
|
|
#CC0099 |
|
|
#CC0066 |
|
|
#CC0033 |
|
|
#CC0000 |
|
|
|
|
|
Hex Code |
Color |
|
#33FFFF |
|
|
#33FFCC |
|
|
#33FF99 |
|
|
#33FF66 |
|
|
#33FF33 |
|
|
#33FF00 |
|
|
#33CCFF |
|
|
#33CCCC |
|
|
#33CC99 |
|
|
#33CC66 |
|
|
#33CC33 |
|
|
#33CC00 |
|
|
#3399FF |
|
|
#3399CC |
|
|
#339999 |
|
|
#339966 |
|
|
#339933 |
|
|
#339900 |
|
|
#3366FF |
|
|
#3366CC |
|
|
#336699 |
|
|
#336666 |
|
|
#336633 |
|
|
#336600 |
|
|
#3333FF |
|
|
#3333CC |
|
|
#333399 |
|
|
#333366 |
|
|
#333333 |
|
|
#333300 |
|
|
#3300FF |
|
|
#3300CC |
|
|
#330099 |
|
|
#330066 |
|
|
#330033 |
|
|
#330000 |
|
|
|
|
Hex Code |
Color |
|
|
|
|
#99FFFF |
|
|
#99FFCC |
|
|
#99FF99 |
|
|
#99FF66 |
|
|
#99FF33 |
|
|
#99FF00 |
|
|
#99CCFF |
|
|
#99CCCC |
|
|
#99CC99 |
|
|
#99CC66 |
|
|
#99CC33 |
|
|
#99CC00 |
|
|
#9999FF |
|
|
#9999CC |
|
|
#999999 |
|
|
#999966 |
|
|
#999933 |
|
|
#999900 |
|
|
#9966FF |
|
|
#9966CC |
|
|
#996699 |
|
|
#996666 |
|
|
#996633 |
|
|
#996600 |
|
|
#9933FF |
|
|
#9933CC |
|
|
#993399 |
|
|
#993366 |
|
|
#993333 |
|
|
#993300 |
|
|
#9900FF |
|
|
#9900CC |
|
|
#990099 |
|
|
#990066 |
|
|
#990033 |
|
|
#990000 |
|
|
|
|
|
Hex Code |
Color |
|
#00FFFF |
|
|
#00FFCC |
|
|
#00FF99 |
|
|
#00FF66 |
|
|
#00FF33 |
|
|
#00FF00 |
|
|
#00CCFF |
|
|
#00CCCC |
|
|
#00CC99 |
|
|
#00CC66 |
|
|
#00CC33 |
|
|
#00CC00 |
|
|
#0099FF |
|
|
#0099CC |
|
|
#009999 |
|
|
#009966 |
|
|
#009933 |
|
|
#009900 |
|
|
#0066FF |
|
|
#0066CC |
|
|
#006699 |
|
|
#006666 |
|
|
#006633 |
|
|
#006600 |
|
|
#0033FF |
|
|
#0033CC |
|
|
#003399 |
|
|
#003366 |
|
|
#003333 |
|
|
#003300 |
|
|
#0000FF |
|
|
#0000CC |
|
|
#000099 |
|
|
#000066 |
|
|
#000033 |
|
|
#000000 |
|
| | 
<
