BangBoom - for CB

CreateBlog Layouts / Div Overlay

Designer's Comments

Look carefully for specific instructions

replace "your-nick" and "your-id-number"

Using This Layout

For specific instructions read designer's comments

This is a Div Overlay layout, HTML knowledge required!
1. Log into createblog.com (customize)
2. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Layout Code

Copy and paste to Header HTML

Help

/***************** BODY *****************/

body{ font:normal 10px tahoma; background-color: #5c493e; background-image: url(''); background-repeat: repeat-y; background-color: #5c493e;}

/***************** HEADER *****************/

#banner { margin-left: 0px; margin-top: 20px; margin-right: 0px; width: 600px; height: 562px; background-image: url('http://cbimg6.com/layouts/09/02/33651ad.png'); border-bottom: 0px solid #000000;}

/***************** MENU *****************/

#menu { list-style: none; width: 380px; position: absolute; top: 0px; margin-top: 38px; left: 646px; z-index: 10; text-align: center;}
#menu li { float: left; color: transparent;}
#menu a, #menu a:link, #menu a:active, #menu a:visited { display: block; height: 14px; width: 90px; background-color: #fff695; background-image: url(http://cbimg6.com/layouts/09/02/33651ae.png); background-repeat: no-repeat; background-position: top-left; color:#dc0064; font-size:12px; font-family:georgia; text-align: center; padding: 7px 1px 1px 1px; margin-right: 3px; cursor: crosshair; -moz-border-radius: 15px 15px 0px 0px;}
#menu a:hover, #menu a:focus { color:#885595; font-size: 15px; background-color: #00f1e3; font-style: italic; border-bottom: 1px dashed; padding: 5px 1px 2px 1px; text-align: center; font-weight: bold; }

/***************** LINKS *****************/

a, a:link, a:active, a:visited { color:#dc0064; font-size:12px; font-family:georgia; line-height:11px; text-align: left; letter-spacing: none; text-decoration: none; color: #fff692; font-style: normal; padding: 0px 1px 1px 1px; }
a:hover, a:focus { color:#885595;
cursor: crosshair; background-color: #00f1e3; text-decoration: none; font-style: none; border-bottom: 1px dashed; padding: 0px 1px 0px 1px; }

.comment_body smaller grey, .comment_body{font:normal 10px tahoma; color: #ffffff; background-color: transparent;}

.innerbox, .entrybox{color: #ffffff; background-color: transparent !important;}

.outerbox{color: #ffffff; background-color: transparent;}

.linkbox {color: #ffffff; background-color: transparent !important;}

.alertbox {color: #ffffff; background-color: transparent !important;}

li, li.top{color: #ffffff; background-color: transparent !important;}

#navi a, #navi a:link, #navi a:active, #navi a:visited { font-size:23px; font-family:georgia; font-style: italic;color: #fff; border-bottom: 0px;}

#navi a:hover, #navi a:focus { font-size:23px; font-family:georgia; font-style: italic;color: #ffe673; background-color: transparent; border-bottom: 0px;}

/***************** H1, H2, H3, H4 *****************/

h2 { color: #DEDCD3; font-family: Georgia; font-size: 18pt; font-style: italic; text-align:right; font-weight: normal; padding-right: 5px; margin-bottom: -4px; border-bottom: 1px dashed #DEDCD3;}

h3 { font-size: 11px; background: transparent; color: #EFDAC2; border-top: 0px; border-bottom: 4px dotted #FFF692; text-align: left; font-family: Courier New, monospace; font-weight: normal; margin: 0px; padding-left: 3px; letter-spacing: 2px; margin-bottom: 10px;}

h1 { font-size: 16px; background: #efffcc; color: #FFDCB3; border-bottom: 3px dotted #946a9c; border-top: 1px dotted #f793ac; text-align: center; font-family: Courier New, monospace; font-weight: normal; margin: 0px; letter-spacing: 2px; }

h4 { font-size: 24px; color: #e4ff8e; font-family: Georgina; font-variant: small-caps; font-style: italic; text-align: right; margin: 0px; letter-spacing: 4px; font-weight: normal; margin-bottom: -4px; padding-right: 10px; border-bottom: 0px;}

h4:first-letter {
color:dad3c0;
padding-bottom: 29px;
font: normal 33px Monotype corsiva;
}

#contenta { position: absolute; left: 540px; top: 520px; z-index: 3 }

b, strong { color: #00F0E2; font-weight: bold; }
m, mark { background:#00f1e3; color:#885595; padding: 0px 2px 0px 2px;}
i, em { color: #ECB3EF; font-style: italic;}
u { color: #FFF962; text-decoration: none; border-bottom: 1px dashed #00F0E2;}
s, stroke {color: #BAF579; text-decoration: line-through; }

#contentb{position: absolute; left:0%; margin-left: 0px; top:0%; margin-top: 754px; width: 586px; height:  px; overflow:auto;font-family:georgia; font-size:13px; color: #dad3c0; background-color: #131112; padding: 10px 10px 10px 10px; text-align: justify;
}

#contentc{position: absolute; left:0%; margin-left: 600px; top:0%; margin-top: 978px; width: 316px; height: px; overflow:auto;font-family:georgia; font-size:11px;text-align: center; color: #ffffff;
 }

#sidebar2 {position:absolute;top: 730px;left:180px;height:40px;text-align:center; color: #b7e44a;}

input, textarea, select, button { font-size:11px; color:#999999; background: #EDE0EF; border-left: 0px; border-top: 0px; border-right: 1px solid; border-bottom: 1px solid; }

input:focus, textarea:focus, label:focus, select:focus, button:focus { color:#999999; background: #fff8db; border-left: 0px; border-top: 0px; border-right: 1px solid; border-bottom: 1px solid; }

#menuhead {
width: 300px;
color: #8c8c8c;
font-family: arial;
font-size: 10px;
text-align: justify;
top: 84px;
left:410px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
float: left;
position: absolute;}

#cbox { position: absolute; left: 404px; top:120px; text-align: center; height: 375px; font-family:georgia; font-size:9px; color: #fff; z-index: 1 }

</style>

<!---- Images ----!>

<!---- Titles ----!>

<div style="z-index: 10; position: absolute; top: 530px;left: 615px;">
<h4>Friends <3</h4>
</div>

<div style="z-index: 10; position: absolute; top: 380px;left: 615px;">
<h4>Profile</h4>
</div>

<h4>Submissions</h4>
</td>
<td STYLE=" width: 50%; border-bottom: 0px;">

</td>
</tr>
</table>
</div>

<!---- Menu ----!>

<div id="menu">
<ul>
<li><a href="http://www.createblog.com/home/">Home</a></li>
<li><a href="">Layouts</a></li>
<li><a href="">Graphics</a></li>

</ul></div>

<!---- Profile ----!>

<!--- Wink, PM, Add ---!>

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
</div>

<!-------------------!>

<!--- Submissions ---!>

<div id="navi"><a href="http://your-nick.createblog.com/layouts">Layouts</a></div><br>
<div id="navi"><a href="http://your-nick.createblog.com/graphics">Graphics</a></div><br>
<div id="navi"><a href="http://your-nick.createblog.com/scripts">Scripts</a></div><br>
<div id="navi"><a href="http://your-nick.createblog.com/tutorials">Tutorials</a></div><br>

</td>
<td STYLE="background-image: url('http://i539.photobucket.com/albums/ff359/technicolor-rainbow/aas.png'); background-position: bottom center; background-repeat: no-repeat;background-color: #7F6757; border-top: 3px dotted #ffa85a; padding: 5px; width: 50%; border-bottom: 0px;" padding-top: 20px;>

<!--- Favs ---!>

<div id="navi"><a href="http://your-fav-page">Layouts</a></div><br>
<div id="navi"><a href="http://your-fav-page">Graphics</a></div><br>
<div id="navi"><a href="http://your-fav-page">Scripts</a></div><br>
<div id="navi"><a href="http://your-fav-page">Tutorials</a></div><br>

</td>
</tr>
</table>

</div>

<!---- Music ----!>

<div id="sidebar2">
<b>::</b> Layout by <a href="http://technicolor-rainbow.createblog.com/">technicolor rainbow</a> <b>::</b><br>

</div>

Layout Comments

Showing latest 10 of 10 comments

Using this :)

By x-thnksfrthmmrs-x on Oct 10, 2009 1:03 pm

This is amazing.

By Samantha-SCREAM on Jun 28, 2009 1:46 am

just copy your link and replace, or the latest numbers on the link and replace in ID number

By technicolor-rainbow on Apr 20, 2009 5:32 pm

I have the same question as the last person. ^_^; I love this, I am currently using it, but it seems to be messed up! :( How can I find my ID number?

By harlot on Apr 20, 2009 3:31 am

yeah...havin' problems with the friends, submissions, favs, & music player showin' up. is there anything else that needs to added into the instructions?

By calilani on Apr 8, 2009 1:51 am

love this layout! i know i asked you b4, but i accidentally deleted the msg. but what is "your-nick" and "your-id-number"?

i was thinkin' "your-nick" is your user id name. what is "your-id-number"?

By calilani on Apr 8, 2009 1:32 am