If Only I Had Been Listening

Designer's Comments

Look carefully for specific instructions

Gotta love Sara Bareilles lyrics. She's inspired me, hahaha. I really like the way this one came out. Hope you do, too.

Replace all that writing with your own content. The links in the navigation can be removed or replaced, and the extra section for content on the bottom can be left blank and it'll still look cute.

Credit owed to Lemonend for the stock photograph of the microphone.

Please don't remove the credit.
Enjoy!

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>If Only I Had Been Listening</title>

body {
background-color:#FFFFFF;
background-image:url("http://cbimg6.com/layouts/09/01/33324ab.png");
background-atatchment:fixed;
background-position:center center;
background-repeat:repeat;
margin: 0px;
padding: 0px;
}

a img{border:none; filter:none;}
a img:hover{border:none; filter:Alpha(Opacity=50)}

a, a:link, a:active, a:visited {
color:#444444;
font-family:palatino linotype;
font-size:13px;
font-weight:normal;
line-height:12px;
letter-spacing:0px;
text-transform:none;
text-decoration:none;
}

a:hover {
color:#666666;
font-family:palatino linotype;
font-size:13px;
font-weight:normal;
line-height:12px;
letter-spacing:0px;
text-transform:none;
text-decoration:none;
}

b {
color:#111111 !important;
font-family:palatino linotype;
font-size:13px;
font-weight:bold;
line-height:12px;
letter-spacing:0px;
text-transform:none;
}

i {
color:#222222 !important;
font-family:georgia;
font-size:13px;
font-weight:normal;
line-height:12px;
letter-spacing:0px;
text-transform:none;
}

u {
color:#222222 !important;
font-family:palatino linotype;
font-size:13px;
font-weight:normal;
line-height:12px;
letter-spacing:0px;
text-transform:none;
}

small {
color:#222222 !important;
font-family:palatino linotype;
font-size:10px;
font-weight:normal;
line-height:12px;
letter-spacing:0px;
text-transform:none;
}

big {
color:#222222 !important;
font-family:palatino linotype;
font-size:15px;
font-weight:normal;
line-height:12px;
letter-spacing:0px;
text-transform:none;
}

</style>

.text {
color:#222222;
font-family:palatino linotype;
font-size:13px !important;
font-weight:normal !important;
line-height:12px !important;
letter-spacing: 0px;
text-transform:none !important;
text-decoration:none;
border:none !important;
display:block;
}

.navtext:link, .navtext:active, .navtext:visited  {
color:#666666;
font-family:georgia !important;
font-size:17px;
font-weight:normal;
font-style:italic;
line-height:17px;
letter-spacing: 0px;
text-transform:none;
text-decoration:none;
border:none;
margin:0px;
display:block;
}

.navtext:hover {
color:#999999;
font-family:georgia !important;
font-size:17px;
font-weight:normal;
font-style:italic;
line-height:17px;
letter-spacing: 0px;
text-transform:none;
text-decoration:none;
border:none;
margin:0px;
display:block;
}

.opttext {
color:#eeeeee;
font-family:palatino linotype;
font-size:15px !important;
font-weight:normal !important;
line-height:15px !important;
letter-spacing: 0px;
text-transform:none !important;
text-decoration:none;
border:none !important;
}

</style>

#main {
  position:absolute;
  width:1000px; 
  height: 600px;
  background: url("http://cbimg6.com/layouts/09/01/33324ac.png");
  background-repeat:no-repeat;
  left:50%;
  margin-left:-450px;
  top:-50px;
}

#about {
width:521px;
height:134px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
overflow:auto;
left:50%;
top:265px;
margin-left:-318px;
visibility:visible;
}

#navigation {
width:90px;
height:120px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
overflow:hidden;
left:50%;
top:280px;
margin-left:213px;
visibility:visible;
text-align:left;
}

#optionalspace {
width:395px;
height:48px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
overflow:auto;
left:50%;
top:418px;
margin-left:-65px;
visibility:visible;
text-align:center;
}
</style>
</head>

<body>

This is where you'd write all your stuff, and post all your pictures... You know... The usual. Please don't steal this... Blah blah blah. I

hope you like it. I've been listening to a lot of Sara Bareilles lately... Hmmm, here's some stuff you might want to know:<br><br>

<a href="" />This is a link.</a><br>
<b>Bold</b><br>
<i>Italics</i><br>
<u>Underline</u><br>
<del>Strikeout</del><br>
<small>Small Text</small><br>
<big>Big Text</big><br><br>

Enjoy the layout everyone!<br>
<img src="http://cbimg6.com/layouts/09/01/33324aa.png" alt="Music Notes"></img>

</span> 
</div>

You're quite welcome to leave this section blank, but if you want to add something else in this section, be my guest.
Enjoy the layout, everyone! (This will overflow.)

</span>
</div>

</body>
</html>

.creditlink:hover {
  font-family:small fonts !important;
  font-size:8px !important; color:ffffff !important;
  font-weight:normal;
  background-color:transparent !important;
  border:none; text-decoration:none;
  text-transform:uppercase !important;
 }
</style>

<div id="creditlink" style="position:absolute; border:none; width:130px; height:20px; z-index:2;
left: 6px !important; top: 0px;"><a href="http://crotchettheleper.createblog.com/" class="creditlink">Crotchet The Leper</a></div>

Layout Comments

Showing latest 9 of 9 comments

It's hard to read the text in the lower right box (coz of the texture). The layout might look better if it were a bit taller (the height) too. ;D But there's a nice vintage touch to it. It's a unique layout. And I like Sara Bareilles's songs/lyrics too. ^^

By dreamgurl36 on Jan 8, 2009 10:12 am