Chapter 1 - codes here

<style>hello there!! welcome to this layout template. i'll be here to guide you and show you around. you might want to look at some coding guides for reference though - you'll want to know what you're doing a bit.</style>

<style>below me are the google fonts codes. these instruct the cattery's fonts.</style>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=VT323'; rel='stylesheet' type='text/css'>

<style>here is the url for the side image that floats alongside you.</style>
<img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png"; id="pic"></img>

<style>this is the nav box.</style>
<div style=
"width:660px; 
height:35px; 
overflow:hidden;
border: 0px solid #ffffff;
border-left:100px solid transparent;
-webkit-border-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png) 90 90 round; 
-o-border-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png) 90 190 round; 
border-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png) 90 90 round;
box-shadow:0px 0px 10px #EAC0BC;
padding:10px;
margin:10px;
float:right;
background:#DE2E5D;
color:#EAC0BC;
font-family: 'VT323', cursive;">
<center><font size=1><h1><a href=/cattery.php>cattery</a> <a href=/chat.php>chat</a> <a href=/searchtopics.php?subject=&author=134870&mweor=&board=0&search=Search>my posts</a> <a href=/explore.php>explore</a> <a href=/news.php>news</a> <a href=/help.php>help</a> <a href=/logout.php>logout</a> <a href=/report.php?loc=1&other=134870>report</a> <a class="compose" cid="16013487055">message</a> <a href=/cattery.php?id=43641>credits</a></h1></font size></center>
</div>

<style>here is the long box to the left of the cattery.</style>
<div style=
"width:130px; 
height:655px; 
overflow:hidden;
border: 0px solid #ffffff;
box-shadow:0px 0px 10px #EAC0BC;
margin:10px;
padding:5px;
float:left;
background:#DE2E5D;
color:#EAC0BC!important;
font-family: 'VT323', cursive;">
bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons 
</div>

<style>below me is the tab coding.</style>
<div style=
"width:620px; 
height:500px; 
overflow:hidden;
border: 0px solid #ffffff;
box-shadow:0px 0px 10px #EAC0BC;
margin:10px;
float:right;
background:#DE2E5D;
color:#EAC0BC!important;
font-family: 'VT323', cursive;">
<div id="tab1"><hr><div align="right"><h1> <a href=/cattery.php?id=134870#tab1>*</a> <a href=/cattery.php?id=134870#tab2>*</a> <a href=/cattery.php?id=134870#tab3>*</a> header here</h1></div>
<br><p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p></div>
<div id="tab2"><hr><div align="right"><h1> <a href=/cattery.php?id=134870#tab1>*</a> <a href=/cattery.php?id=134870#tab2>*</a> <a href=/cattery.php?id=134870#tab3>*</a> header here</h1></div>
<br><p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p></div>
<div id="tab3"><hr><div align="right"><h1> <a href=/cattery.php?id=134870#tab1>*</a> <a href=/cattery.php?id=134870#tab2>*</a> <a href=/cattery.php?id=134870#tab3>*</a> header here</h1></div>
<br><p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p>
<p>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach daysbicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days</p></div></div>

<style>
#tab1
{width:600px; 
height:500px; 
overflow:hidden;
border: 0px solid #ffffff;
box-shadow:0px 0px 10px #EAC0BC;
padding:10px;
background:#DE2E5D;
color:#EAC0BC!important;
font-family: 'VT323', cursive;}
#tab2
{width:600px; 
height:4500px; 
overflow:hidden;
border: 0px solid #ffffff;
box-shadow:0px 0px 10px #EAC0BC;
padding:10px;
background:#DE2E5D;
color:#EAC0BC!important;
font-family: 'VT323', cursive;}
#tab3
{width:600px; 
height:500px;
overflow:hidden;
border: 0px solid #EAC0BC;
box-shadow:0px 0px 10px #96ffff;
padding:10px;
background:#DE2E5D;
color:#EAC0BC!important;
font-family: 'VT323', cursive;}
</style>


<style>here is the avatar box.</style>
<div style=
"width:600px; 
height:125px; 
overflow:hidden;
border: 0px solid #ffffff;
box-shadow:0px 0px 10px #EAC0BC;
padding:10px;
margin:10px;
float:right;
background:#DE2E5D;
color:#EAC0BC;
font-family: 'VT323', cursive;">
<center><br><marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" id="marquee"><img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png";; width="100px" height="100px"></img> <img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png";; width="100px" height="100px"></img> <img src="http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png";; width="100px" height="100px"></img> </marquee></center>
</div>

<font color=#EAC0BC>

<style>this is the coding for the avatar marquee and the floating image.</style>
<style>
#marquee
{-webkit-marquee-style: alternate;
-moz-marquee-style: alternate;
-o-marquee-style: alternate;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
opacity: .85;}
#marquee:hover
{opacity: 1;}
#pic
{position:fixed;
left:840px;
margin-top:100px;
z-index:1;}
</style>

<style>this coding gets rid of all of mweor's touches.</style>
<style>
#topbanner,
#bottombanner,
#titlebar,
#bodyi, .titlebar, .sf-menu {display: none;} 
#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; }
img.trans {display:none;}
.tip.good_label {display:none;}
.tip.neutral_label  {display:none;}
#notice {display:none;}
#eventtxt  {display:none;}
#cattery_infobox {display:none;}
div [style="width: 99px; height: 98px; position: relative; float: left;"] {display:none;}
</style>

<style>this is the coding correlating to mweor's recent updates.</style>
<style>
#mweor_tabs 
{background: #DE2E5D; 
border:0px solid #8575ff!important;
color: #EAC0BC!important;
box-shadow:0px 0px 10px #EAC0BC;
font-family: 'VT323', cursive !important;
border-radius:0px;}
.ui-widget-header 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png);
border:0px solid transparent;
color: #EAC0BC!important; 
font-family: 'VT323', cursive; !important
border: none;
border-radius:0px;}
ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{background: #5543F5;
color: #EAC0BC!important; 
border: 0 px solid #ffffff;
font-family: 'VT323', cursive; !important}
ul#cattery_menu
{background:#DE2E5D;
color:#EAC0BC!important;
font-family: 'VT323', cursive;
border-radius:0px;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus 
{background: #DE2E5D;
color:#EAC0BC!important;
border:0px solid #ffffff;
font-family: 'VT323', cursive;}
.ui-corner-top
{background:#8823CD;
border:0px solid #8823CD!important;
color:#EAC0BC!important;
font-family: 'VT323', cursive;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
border-radius:0px;}
.add_small_margins
{border: 0px solid #ffffff!important;}
th
{color:#EAC0BC!important;
font-family: 'VT323', cursive;}
.ui-tabs-anchor
{color:#EAC0BC!important;
font-family: 'VT323', cursive;}
</style>

<style>this dictates the cattery dimensions/background colors.</style>
<style>
#cattery_descbox
{background:#0395C6;
width:800px;
height:800px;
float: right;
left:60px;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
body
{background:#0395C6;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
#content 
{background:#0395C6;
width:800px;
height:800px;
float:right;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
tbody
{font-family: 'VT323', cursive!important;
color:#5543F5;}
td
{font-family: 'VT323', cursive;!important;
color:#5543F5;}
</style>

<style>below is some scattered coding for the small stuff.</style>
<style>
.button
{color:#EAC0BC;
background:#DE2E5D;
box-shadow:0px 0px 10px #EAC0BC;
border: 0px solid #ffffff;
font-family: 'Lobster Two', cursive;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;}
.button:hover
{color:#5543F5;
box-shadow:0px 0px 10px #EAC0BC;
border: 0px solid #ffffff;}
.theader
{property: value;
background: #DE2E5D;
font-family: 'VT323', cursive;
color:#EAC0BC; 
position:relative;}
.popup 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png);
color:#EAC0BC;
box-shadow:0px 0px 10px #0aaf9e;
border: 0px solid #ffffff;
font-family: 'VT323', cursive;}
.ui-tooltip
{background: #8823CD!important;
color:#EAC0BC!important;
box-shadow:0px 0px 10px #EAC0BC;
border: 0px solid #8823CD;
font-family: 'VT323', cursive; }
.ui-button
{-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;}
</style>

<style>this dictates the colors of the font/links/etc.</style>
<style>
font
{color:#EAC0BC; !important
font-family: 'VT323', cursive;}
a 
{color:#5543F5;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;}
a:hover
{color:#EAC0BC;}
i
{display:none;}
h1
{color:#5543F5;
font-family: 'Lobster Two', cursive;
text-shadow:0px 0px 10px #EAC0BC;}
b
{color:#5543F5;
font-family: 'Lobster Two', cursive;}
hr
{width:430px;
height:20px;
border:0px solid #fff;
float:left;
background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4177/4177906.png);}
</style>

</div>

<style>alright, now you (kind of) know your way around this layout! yay! i'll give you some further instructions.
the pattern is used is http://www.colourlovers.com/pattern/4177906. the following colors do the following things:
DE2E5D - background to boxes and mweor tabs and other messages etcetera
EAC0BC - main text color
8823CD - tooltip background and some other small details
5543F5 - header and bold color
0395C6 - box glow color
they also might have a few other details, but those are their main purposes. if you choose to sell custom layouts, simply ask for a five-color pattern and switch out the pattern url and the above hex codes. that's all i would let them dictate for themselves. whether you want to play with fonts or color correlations is personal preference. please don't make any major changes - keep it recognizable, you know? play around, but play with small stuff.
overall, have fun!!</style>

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