Whimsical

Here is a wonder-lovely layout for you to use! Isn't it great? Yeah, I know. -_- It's so much fun to use, you could be blogging like:

New Layout! Thanks, Kelato!

Tuesday, December 29, 2009 | 8:36 p.m. | Dark Dark Dark - New York Song

Yeah, this layout was created over a year ago. I moved it from my previous site. It might be a little old, but it's still useful!

Sunday, February 3, 2008 | 11:30 p.m. | Cooler Kids - Morning Star

I got this super cool layout! Doesn't it look awesome? I wish I could design hot things like Kelato. *sigh*

...Okay, okay, I know I need some humble pie, but let's get to the codes!

CSS Code

First of all, here's the CSS code, which you should put in a separate file from the main code. For this layout, name your code style.css, or whatever you want, but be sure to change it in the main code.

CSS:

body, td, p { font-family: Tahoma; font-size: 8pt; color: #644331; overflow-x:hidden;y:scroll; scrollbar-face-color : #ceb8ac; scrollbar-highlight-color : #d6c4ba; scrollbar-3dlight-color : #d6c4ba; scrollbar-shadow-color : #c6ab9c; scrollbar-darkshadow-color : #c6ab9c; scrollbar-track-color : #e1e3b1; scrollbar-arrow-color : #a2bd9a; } a:link, a:visited, a:active { text-decoration: none; font-weight: bold; font-size: 8pt; color: #3b423b; } a:hover { text-decoration: none; color: #8bcaae; font-weight: bold; cursor: crosshair; } .textarea, input { font-size:8pt; font-family: Trebuchet MS; color: #644331; } h1 { font-size: 10pt; font-family: Trebuchet MS; font-weight: bold; text-align: left; color: #3f5c19; line-height:8pt; margin: 0; margin-top: 1px; margin-bottom: 1px; padding: 0px; padding-bottom: 0px; border-bottom: 1pt solid #bbc4a3; } h2 { font-size:9pt; font-family: Trebuchet MS; text-align: left; color: #3f5c19; line-height:8pt; margin: 0; margin-top: 1px; margin-bottom: 1px; padding: 0px; padding-bottom: 0px; border-bottom: 0px solid :#f1dcab; } h3 { font-size:8pt; font-family: Trebuchet MS; text-align: left; color: #3f5c19; line-height:8pt; margin: 0; margin-top: 1px; margin-bottom: 1px; padding: 0px; padding-bottom: 0px; border-bottom: 1px dashed #68494f; } .td { font-size:8pt; font-family: Trebuchet MS; color: #3b423b; background-color: #dcd6b9; border-right: 3px solid #dba395; } b {color: #c03f5b; } i {color: #a4caa5; font-weight: bold; } u {color: #bf9c89; font-weight: bold;} s {color: #a6b26a;}

HTML Code

Here's the main enchilada:

<html> <head> <title>WHIMSICAL TEST LAYOUT</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body bgcolor=#e3e3b1> <div style="position: absolute; left: 0pt; top:0; right: 0pt;"> <img border="0" src="http://i190.photobucket.com/albums/z224/chkmic8/magical.jpg"> </div> <TABLE style="LEFT: 0px; POSITION: absolute; TOP: 540px;background-color:#e9e9c1" width=443;> <tr><td valign=top><div align="justify"> <div style="width:443px; padding-left: 3px;"> <h1>Header One</h1> Header One <b>Header One</b> Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One Header One <h2>Header Two</h2> Header Two Header Two <u>Header Two</u> Header Two Header Two Header Two Header Two Header Two Header Two Header Two Header Two Header Two Header Two Header Two Header Two <i>Header Two</i> Header Two Header Two <h3>Header Three</h3> Header Three Header <s>Three Header</s> Three Header Three Header Three Header Three Header Three Header Three Header Three Header Three <a href=http://#>Header Three</a> Header Three Header Three Header Three Header Three <div class="td">Table table table table table table table table table table table table table table table table table table table table table table </div><h2>Monday, March 10, 2008</h2> <h3>11:10 p.m.</h3> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </td></tr></table> <TABLE style="LEFT: 464px; POSITION: absolute; TOP: 540px;background-color:#e9e9c1" width=150;> <tr><td valign=top><div align="justify"> <h1>Navigation</h1> <a href=http://#>Link</a><br> <a href=http://#>Link</a><br> <a href=http://#>Link</a><br> <a href=http://#>Link</a><br> <a href=http://#>Link</a><br> <a href=http://#>Link</a><br> <h1>Credits</h1> <---DO NOT REMOVE THESE LINKS!!!---> <a href="http://foto_decadent.livejournal.com" target="_blank">Foto Decadent</a><br> <a href="http://77words.livejournal.com" target="_blank"> 77words</a><br> <a href="http://masterjinn.deviantart.com/gallery/" target="_blank">masterjinn@deviantart</a> </td></tr></table> </body></html>

Ta Da!

Yay! The technical part is over! Now you can enjoy your lovely layout!

Oh yeah, and remember, credit is appreciated, but not required.