Chapter 1 - click here for coding!

<center>

<style>
hey guys! dolce here. i coded this template, and i'm here to show you how to use it!
</style>

<div id=links>
<style>
#links
{width:690px; 
height:40px; 
overflow:hidden; 
border: 1px solid #83AF9B;
border-radius:25px;
padding:5px; 
background:#FC9D9A;
-webkit-transition:2s;
-moz-transition:2s;
-o-transition:2s;}
#links:hover
{width:690px;
height:75px;}
</style>
<center><h1>links:
<p><a href=/cattery.php>cattery</a>
<a href=/chat.php>chat</a>
<a href=/explore.php>explore</a>
<a href=/searchtopics.php?subject=&author=43641&mweor=&board=0&search=Search>my posts</a> <a href=/report.php?loc=1&other=43641>report</a>
<a class="compose" cid="43641">message</a>
<span class="tip" tip="coding credits: #43641 <br>background: colourlovers <br>layout: #99105" class="trans">☆</span> 
</div>

<style>
okay. right above me is the links box. if you want to add/replace a link, simply put it in the list. make sure to keep it universal!
</style>

<br><br>
<div style=
"width:500px; 
height:300px; 
overflow:hidden; 
float:right;
border: 1px solid #83AF9B;
border-radius:25px; 
background:#FC9D9A;">

<style>
here come the main boxes.
type in the header in the spot where it says "header here."
to add text, delete all that weird latin stuff and get typing!>
</style>

<div style=
"width:500px; 
height:330px; 
overflow:hidden;
float:right; 
border: 1px solid #83AF9B;
border-radius:25px;
background:#FC9D9A;">
<a name="box1"></a>
<font color=#83AF9B><h1>header here</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit quam, luctus at ultricies quis, sollicitudin in augue. Nullam nec velit arcu. Maecenas vel seImper mauris. Donec rutrum turpis quis urna tempor vehicula. Ut massa justo, faucibus at congue et, consequat at lorem. Phasellus cursus magna id risus fringilla id malesuada leo facilisis. Mauris faucibus augue nisi, eget auctor sapien. Aliquam erat volutpat. Nulla vitae tellus est, ac consectetur erat. Curabitur id sapien orci, ut fermentum metus. Fusce eleifend elementum tincidunt. Donec vestibulum viverra ornare. Sed mattis magna sit amet sem ullamcorper sagittis. Integer condimentum, augue id euismod eleifend, ligula tellus posuere neque, condimentum malesuada dolor mi sed lectus. Morbi ultrices ipsum sagittis sapien aliquam ornare.

<br>Integer sed nisl eros. Nulla eget nisl vel tortor eleifend ultrices. Ut id lorem lectus. Morbi in tempus purus. Nullam non mi quis nibh tempus ultricies. In adipiscing rhoncus purus, ac egestas sapien molestie vitae. Nam scelerisque, sapien et adipiscing dapibus, nibh nisi egestas ligula, vulputate sodales diam mauris sollicitudin lorem. Nunc ac sodales magna. Praesent ornare lectus sit amet orci egestas facilisis.
</div><div style=
"width:500px; 
height:315px; 
overflow:auto;
float:right;
border: 1px solid #83AF9B;
border-radius:25px; 
background:#FC9D9A;">
<a name="box2"></a>
<font color=#83AF9B><h1>header here</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit quam, luctus at ultricies quis, sollicitudin in augue. Nullam nec velit arcu. Maecenas vel seImper mauris. Donec rutrum turpis quis urna tempor vehicula. Ut massa justo, faucibus at congue et, consequat at lorem. Phasellus cursus magna id risus fringilla id malesuada leo facilisis. Mauris faucibus augue nisi, eget auctor sapien. Aliquam erat volutpat. Nulla vitae tellus est, ac consectetur erat. Curabitur id sapien orci, ut fermentum metus. Fusce eleifend elementum tincidunt. Donec vestibulum viverra ornare. Sed mattis magna sit amet sem ullamcorper sagittis. Integer condimentum, augue id euismod eleifend, ligula tellus posuere neque, condimentum malesuada dolor mi sed lectus. Morbi ultrices ipsum sagittis sapien aliquam ornare.

<br>Integer sed nisl eros. Nulla eget nisl vel tortor eleifend ultrices. Ut id lorem lectus. Morbi in tempus purus. Nullam non mi quis nibh tempus ultricies. In adipiscing rhoncus purus, ac egestas sapien molestie vitae. Nam scelerisque, sapien et adipiscing dapibus, nibh nisi egestas ligula, vulputate sodales diam mauris sollicitudin lorem. Nunc ac sodales magna. Praesent ornare lectus sit amet orci egestas facilisis.
</div><div style=
"width:500px; 
height:300px; 
overflow:hidden;
float:right; 
border: 1px solid #83AF9B;
border-radius:25px;
background:#FC9D9A;">
<a name="box3"></a>
<font color=#83AF9B><h1>header here</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit quam, luctus at ultricies quis, sollicitudin in augue. Nullam nec velit arcu. Maecenas vel seImper mauris. Donec rutrum turpis quis urna tempor vehicula. Ut massa justo, faucibus at congue et, consequat at lorem. Phasellus cursus magna id risus fringilla id malesuada leo facilisis. Mauris faucibus augue nisi, eget auctor sapien. Aliquam erat volutpat. Nulla vitae tellus est, ac consectetur erat. Curabitur id sapien orci, ut fermentum metus. Fusce eleifend elementum tincidunt. Donec vestibulum viverra ornare. Sed mattis magna sit amet sem ullamcorper sagittis. Integer condimentum, augue id euismod eleifend, ligula tellus posuere neque, condimentum malesuada dolor mi sed lectus. Morbi ultrices ipsum sagittis sapien aliquam ornare.

<br>Integer sed nisl eros. Nulla eget nisl vel tortor eleifend ultrices. Ut id lorem lectus. Morbi in tempus purus. Nullam non mi quis nibh tempus ultricies. In adipiscing rhoncus purus, ac egestas sapien molestie vitae. Nam scelerisque, sapien et adipiscing dapibus, nibh nisi egestas ligula, vulputate sodales diam mauris sollicitudin lorem. Nunc ac sodales magna. Praesent ornare lectus sit amet orci egestas facilisis.
</div></div>

<style>
alright, next are the boxes that contain the tab links. simply replace the boring "tab 1/2/3" headers with the actual headers! the numbers correspond with the numbers above, so you know which box you're on.
</style>

<br><br>
<div style=
"width:100px; 
height:50px; 
overflow:hidden; 
border: 1px solid #83AF9B;
border-radius:25px;
padding:5px;
float:left; 
background:#FC9D9A;">
<a name="boxlink1"></a>
<center><h1><b><a href=/cattery.php?id=43641#box1>tab 1</a></b></h1>
</div>
<br><br><br><br><br><br><br><br>
<div style=
"width:100px; 
height:50px; 
overflow:hidden; 
border: 1px solid #83AF9B;
border-radius:25px;
padding:5px;
float:left; 
background:#FC9D9A;">
<a name="boxlink2"></a>
<center><h1><b><a href=/cattery.php?id=43641#box2>tab 2</a></b></h1>
</div>
<br><br><br><br><br><br><br><br>
<div style=
"width:100px; 
height:50px; 
overflow:hidden; 
border: 1px solid #83AF9B;
border-radius:25px;
padding:5px;
float:left; 
background:#FC9D9A;">
<a name="boxlink3"></a>
<center><h1><b><a href=/cattery.php?id=43641#box3>tab 3</a></b></h1>
</div>

<style>
alright, that's it. if you have any questions, message me at #43641. 
enjoy your layout!
</style>

<style>
/////////////////////////////////////////////DO NOT TOUCH CODING BEYOND THIS POINT///////////////////////////////////////////////
</style>


<font color=#83AF9B>

<style>
#topbanner,
#bottombanner,
#titlebar,
#bodyi, .titlebar, ul, 
#footer{display:none;}
#titleimg { display:none; }
#titletxt { display:none; }
.titlebar { display:none; height:0px}
#topbanner { display:none; }
#bottombanner img { display:none; }
#menu_holder { display:none; }
#cattery_infobox { display:none; }
</style>

<style>
#cattery_descbox
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/306/306013.png);
background-repeat:repeat;
width:700px;
background-attachment:fixed;
background-position:center;}
body
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/306/306013.png);
background-repeat:repeat;
background-attachment:fixed;
background-position:center;}
#content 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/306/306013.png);
background-repeat:repeat;
width:700px;
background-attachment:fixed;
background-position:center;}
</style>

<style>
okay. so the urls in the coding above and below me is for the background. plug the background in all four spots. viola!
</style>

<style>
.popup 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/306/306013.png);
color:83AF9B; 
border: 1px solid #83AF9B;
font-family:verdana;}
#tooltip
{background: #FC9D9A;
color:#83AF9B; 
border: 1px solid #83AF9B;
font-family:verdana;
border-radius:25px}
#notice
{background: #FC9D9A;
font-family:verdana;
color:83AF9B; 
border: 1px solid #83AF9B;
border-radius: 25px;}
.theader
{property: value;
background: #FC9D9A;
font-family:verdana;
color:83AF9B; 
border: 1px solid #83AF9B;}
#eventtxt
{background:#FC9D9A;
border-radius: 25px;
font-family:verdana;} 
.mweorbox
{color:#83AF9B;
background:#FC9D9A;
font-family:verdana;
border: 1px solid #83AF9B;
border-radius: 25px;}
.trow1, .trow1 tr, .trow1 td, .trow2, .trow2 tr, .trow2 td, .trow3, .trow3 tr, .trow3 td, .trow1 table, .trow2 table, .trow3 table
{color: #83AF9B;
font-family:verdana;
background:#FC9D9A;}
</style>

<style>
font
{color:#83AF9B;
font-family:verdana;}
a 
{color:#FE4365;
font-family:verdana;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;}
a:hover
{color:#F9CDAD;
font-family:verdana;}
i
{color:#C8C8A9;
font-family:verdana;}
h1
{color:#FE4365;
font-family:verdana;
text-shadow: #EBA0BF 0px 0px 10px;}
b
{color:#C8C8A9;
font-family:verdana;}
</style>

<style>
okay. so. what i'll do is i'll give you the hex codes for the colors and tell you where they are. then, when you have new colors to plug in, you can pick what the replacement hex is, scroll through, and paste it in place of every of the previous colors.
#FC9D9A: background of all the boxes
#83AF9B: borders and text
#FE4365: headers and links
#C8C8A9: bold and italic text
#F9CDAD: hovered over links
make sure you always have the same color combinations. remember that you'll need five colors to do that. kapeesh? kapeesh.
ALSO. one last thing. in the "links" box, make sure you switch my id with the owner's id in all the links EXCEPT for the credit box.
if you have any questions, message me!
</style> 

You are not authorized to comment here. Your must be registered and logged in to comment