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 12 comments

It didn't work for me. ):

By LittleKidd on Jun 14, 2010 8:17 pm

Using.

By LittleKidd on Jun 14, 2010 8:01 pm

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

Cool layout ^_^ *Fav

By Medi on Mar 16, 2009 6:53 pm

amazing :]
i'm totally using.

By peypey2011 on Feb 12, 2009 6:00 pm

View all »

Layout Details

Designer	technicolor-rainbow
Submitted on	Feb 4, 2009
Page views	8,067
Favorites	64
Comments	12
Reviewer	Relentless
Approved on	Feb 4, 2009

BangBoom - for CB

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates