Tori's Haven - Sharing: BoF Layouts

Basically, I am a TV addict, a bookworm, an anime fan, a KPop lover, a Korean Wave fanaticus, a fan, a writer wannabe, a friend, a rival, a daughter [rebellious and ingrate sometimes], a dreamer, a drama queen.

CSS codes credit to

minty_peach

Resources

Page Content

November 2009

Customize

Previous Raves | Memories | Tell a Friend | Next Raves

viktorialouise

27 February 2009 @ 01:08 pm

Sharing: BoF Layouts

Because I am totally hooked in this drama, I decided to create a layout design that features the five lead actors. And now I am sharing them to you...

Preview:

Live preview @

tori_praclayout

Style: S2 Flexible Squares
Account Type: Basic, Plus, Paid
Browser(s) Compatible: Firefox and IE
Work with Ads?: Yes - Vertical (recommended)

Rules:
01. Please leave a comment first (because comments are ♥).
02. Please credit properly when using. (You may place credits at your profile page or at the sidebar blurb.
03. Spread BoF love.

How to install:
01. Select Style >> search for 'Flexible Squares' >> select any Flexible Squares theme
02. Under 'Choose a Page Setup', choose '2 Column (sidebar on left)' >> Customize Selected Theme
03. Custom CSS >> Set all 3 options to No. (This is very important!)
04. Copy-paste codes in the Custom Stylesheet box.
05. Upload the header of your choice to your own server (no hotlinking please). Copy-paste background image URL in this part:

.headerimage {
background-image: url('URL HERE');

CSS code:

/*-- CSS code by: minty_peach@livejournal.com
Design layout by: viktorialouise@livejournal.com
no stealing. no reposting css as yours. don't remove this section.
PLEASE NOTE: journal-style comment pages are for paid/sponsored only --*/

/*-- main page --*/

BODY { 
			margin: 50px 0px 50px 0px; 
			background-color: #fff;
			background-image: url('http://i43.tinypic.com/10rln2a.jpg');
			background-repeat: repeat; 
			font-family: "verdana", "lucida sans", arial, sans-serif;
			color: #888; 
			font-size: 10px; 
			text-align: left;
			line-height: 15px;
			}

#content {
			width: 860px;
			margin-left: auto;
			margin-right: auto;
			background-color: #fff;
			}

#maincontent {
			text-align: left;
			margin: 30px 230px 0px 0px;
			background-color: #fff;
			}

.headerimage {
			position: relative;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 0px; 
			width: 860px;
			height: 400px;
			background-image: url('URL'); 
			background-repeat: no-repeat;
			}

/*-- special fonts, links, etc. --*/

b, strong {
			color: #88AD00;
			font-family: "georgia"; 
			}

i, em { 
			color: #4BA2B8; 
			}

u { 
			color: #4BA2B8; 
			}

s {
			color: #4BA2B8;
			}

a, a:link, a:visited { 
			color: #88AD00;
			text-decoration: none;
			text-transform: lowercase;
			}

a:hover, b:hover, i:hover, u:hover, #sidebar a:hover {
			color: #444;
			cursor: hand;
			}

code, kbd, pre, tt, p, td {
			font-family: "verdana", "lucida sans", verdana, arial, sans-serif;
			}

/*-- sidebar content --*/

#sidebar {
			width: 170px;
			float: right;
			text-align: justify;
			color: #999;
			border-left: 1px dashed #ddd;
			background-color: #fff; 
			padding: 10px 20px 10px 20px;
 			margin-top: 30px;
			}

#sidebar a, #sidebar a:link, #sidebar a:visited {  
			color: #88AD00; 
			}

.defaultuserpic {
			text-align: center;
			}

.sbarheader, .sbarbody, .sbarbody2 {
			padding-top: 15px;
			}

table.calendar {
			margin-right: auto;
			margin-left: auto;
			}

.sbarcalendar {
			padding: 3px;
			border: 1px solid #ddd;
			text-align: center;
			background-color: #eee;
			color: #666;
			}

.sbarcalendarposts {
			padding: 3px;
			border: 1px solid #eee;
			text-align: center;
			}

ul.sbarlist {
			margin: 0px; 
			list-style: none; 
			padding: 0px; 
			}

li.sbaritem {
			padding: 1px 5px 1px 5px; 
			margin: 3px; 
			text-transform: none; 
			border-bottom: 1px dotted #ddd; 
			text-align: center;
			font-weight: normal;
			list-style: none;
			}

li.sbaritem:hover {
			border-bottom: 1px dotted #888; 
			}

li.sbartitle {
			padding-bottom: 5px;
			padding-top: 15px;
			color: #B6CC60;
			text-transform: none;
			text-align: center;
			font-size: 20px;
			font-family: "georgia";
			}

ul.ljtaglist li{
			padding: 5px;
			margin: 0px;
			list-style: decimal-leading-zero;
			list-style-position: outside;
			}

/*-- header navigation links --*/

#header {
			width: auto;
			margin-left: auto;
			margin-right: auto;
			text-align: center; 
			background-color: #EDFCB9; 
			padding: 15px;
			font-size: 18pt;
			font-family: "cambria", georgia;
			}

div#header a, div#header a:link, div#header a:visited div#header li.view { 
			padding: 15px;
			color: #88AD00;
			font-size: 18pt;
			font-family: "cambria", georgia;
			text-transform: lowercase;
			backgound-color: #EDFCB9;
			}

div#header a:hover{ 
			padding: 15px;
			color: #88AD00;
			text-transform: lowercase;
			background-color: #EDFCB9;
			border-top: 5px solid #B6CC60;
			border-bottom: 5px dashed #B6CC60;
			background-image: url('');
			background-repeat: no-repeat;
			background-position: right;
			}

/*-- footer navigation links --*/

#footer {
			width: auto;
			margin-left: auto;
			margin-right: auto;
			text-align: center; 
			padding: 15px;
			clear: both;
			color: #ddd;
			text-transform: none;
			font-size: 20px;
			font-family: "georgia";
			}

div#footer a, div#footer a:link, div#footer a:visited { 
			color: #B6CC60;
			}

div#footer a:hover {
			color: #888;
			}

div#footer li.viewing { 
			display: none;
			}

.clearfoot {
			clear: both;
			}

ul.navheader, ul.navfooter { 
			list-style: none; 
			}

ul.navheader li, ul.navfooter li {
			display: inline; 
			list-style: none;
			}

/*-- title & subtitle --*/

.title {
			display: none;
			}

.subtitle {
			display: none;
			}

/*-- subcontent and entry content --*/

.subcontent {
			padding: 20px;
			border: 0px solid #ddd;
			background-color: #fff;
			}

.entry {
			padding: 10px 0px 20px 0px;
			color: #999;
			text-align: justify;
			}

.entry ul li {
			padding-left: 0px;
			margin-left: 0px;
			list-style: decimal-leading-zero;
			list-style-position: outside;
			}

.entry ol li {
			padding-left: 0px;
			margin-left: 0px;
			list-style: decimal-leading-zero;
			list-style-position: outside;
			}

.date {
			text-align: left;
			color: #ccc;
			text-transform: none;
			font-size: 9pt;
			font-family: "tahoma";
			}

.subject {
			text-align: left;
			font-weight: bold;
			letter-spacing: 2px;
			text-transform: none;
			color: #88AD00;
			font-size: 12pt;
			font-family: "cambria", georgia;
			}

div.subject a, div.subject a:link, div.subject a:visited {
			color: #88AD00;
			text-transform: none;
			font-size: 12pt;
			padding-left: 10px;
			letter-spacing: 2px;
			font-weight: bold;
			}

.datesubject {
			padding-bottom: 20px;
			margin-right: 100px;
			}

blockquote {
			border-top: 5px solid #B9D068;
			border-bottom: 5px solid #ddd;
			background-color: #efefef;
			color: #999;
			text-align: justify;
			padding: 7pt;
			font-family: "verdana";
			font-color: #777; 
			margin: 0px 15px 0px 15px; 
			}

.separator {
			height: 20px;
			}

/*-- currents, comment links, and tags in entry --*/

.currents {
			background-color: transparent;
			}

.currents strong{
			font-weight: normal;
			color: #aaa;
			}

.currentlocation, .currentmood, .currentmusic, .currentgroup {
			text-align: left;
			color: #88AD00;
			}
						
			.ljtags { 
			margin-top: 15px; 
			text-align: left;
			text-transform: lowercase;
			color: #aaa;
			}

.comments {
			font-weight: none;
			text-align: center;
			font-size: 18px;
			color: #ddd;
			margin-top: 15px;
			font-family: "georgia";
			}

div.comments a, div.comments a:link, div.comments a:visited {
			color: #ccc;
			text-transform: none;
			font-size: 20px;
			}

div.comments a:hover {
			color: #B6CC60;
			}

/*-- userpics, friends userpics --*/

.userpic, .userpicfriends {
			position: relative;
			float: right;
			margin: 0px 0px 10px 10px;
			background-color: #fff !important;
			z-index: 15;
			}

.userpicfriends font {
			color: #888 !important;
			text-transform: lowercase;
			text-align: center;
			}

.userpicfriends br {
			display: block;
			height: 0;
			}

/*-- delete this section or change the #s to change userpics size --*/

.userpic img, .userpicfriends img {
			background-color: #fff !important;
			border: 5px solid #eee;
			width: 100px;
			height: 100px;
			}

/*-- tags page --*/

.ljtaglist { 
			list-style-type: none; 
			margin: -1px 20px 0px 20px; 
			width: 60%; 
			text-transform: lowercase;
			text-align: left; 
			}

.ljtaglist li {
			border-bottom: 1px solid #eee; 
			padding: 6px 3px 6px 20px; 
			color: #ccc; 
			}

H2 { 
			text-align: center;
			padding: 30px; margin: 0px;
			line-height: 12px; 
			font-weight: normal; 
			font-size: 12pt; 
			color: #ddd; 
			}

ul.ljtaglist {
			color: #ccc;
			padding: 8px 8px 8px 12px;
			text-align: left;
			margin-right: auto;
			margin-left: auto; 
			padding: 25px;
			}

ul.ljtaglist li{
			padding: 3px;
			margin: 2px;
			list-style: decimal-leading-zero;
			list-style-position: inside;
			}

/* archive page */

ul.year {
			text-align: center;
			padding: 30px; margin: 0px;
			}

ul.year li {
			color: #aaa;
			display: inline;
			}

table.yeartable {
			margin-left: auto;
			margin-right: auto;
			width: 60%;
			}

td.yeardate {
			color: #999;
			background-color: #fff;
			border: 1px solid #ddd;
			text-align: center;
			}

table.yeartable td.yearday {
			background-color: #88AD00;
			border: 1px solid #749400;
			text-align: center;
			text-transform: uppercase;
			color: #fff;
			}

td.yearmonth {
			color: #999;
			border-style: none;
			}

/*-- comment page (for sponsored and paid users only) --*/

.clear {
			display: none;
			}

.skiplinks {
			text-transform: lowercase;
			text-align: center;
			padding: 10px;
			color: #999;
			}

.datesubjectcomment {
			background-color: #fff;
			color: #aaa;
			padding: 5px;
			margin-bottom: 5px;
			}

.userpiccomment {
			position: relative;
			max-width: 50px;
			max-height: 50px;
			top: -10px;
			left: 0px;
			margin: 15px;
			z-index: 15;
			float: left;
			padding: 0px;
			border: 5px solid #eee;
			}

.box {
			padding: 20px;
			border: 0px solid #ddd;
			background-color: #fff;
			width: auto;
			clear: left;
			padding: 25px;
			font-size: 8pt;
			}

input, textarea {
			background-color: #eee;
			font-size: 12px;
			font-family: "Georgia", sans-serif;
			color: #666;
			}

textarea.textbox{
			border: 0px solid #fff;
			font-family: "Georgia", sans-serif;
			font-size: 12px;
			width: 95% !important;
			}

.reply{
			position: relative;
			margin: 5px 5px 5px 5px;
			padding: 5px 5px 5px 5px;
			text-align: left;
			line-height: 125%;
			color: #777;
			}

.replytosubject {
			font-weight: bold;
			}

.commentreply {
			position: relative;
			padding: 10px 10px 20px 70px;
			color: #777;
			}

.commentbox {
			padding: 15px 0px 15px 0px;
			margin: 5px;
			border-top: 1px solid #ddd;
			}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
			color: #9E9E7B;
			}

.datesubjectcomment a:hover {
			color: #bbb;
			}

.commentboxpartial {
			background-color: #fff;
			padding: 5px;
			margin: 12px;
			}

.commentinfo {
			margin-top: 10px;
			width: 100%;
			}

/*----------- TINY USER PICS - PASTE CODES BELOW HERE -----------*/
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
		width: 0;
		height: 0;
		padding: px px 0px 0px;
		background: url();
		}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
		width: 0;
		height: 0;
		padding: px px 0px 0px;
		background: url();
		}

.ljuser img { 
  		width: 0;
  		height: 0;
  		background-repeat: no-repeat;
  		background-color:transparent;
  		/* so that IE users will still see an image */
  		background-image: url(http://i42.tinypic.com/2r61etw.gif); 
  		padding: 10px 10px 0 2px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
		background-color:transparent;
  		background-image: url(http://i42.tinypic.com/2r61etw.gif);
  		padding: 10px 10px 0 2px !important;
		}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
		background-color:transparent;
 		background-image: url(http://i42.tinypic.com/2r61etw.gif);
 		padding: px px 0 2px;
		}

Credits:
01. CSS codes are originally made by

minty_peach. I tinkered it and created this BoF design.
02. Layout background came somewhere from the net. Just use google.
03. Pictures in the banner came from milkteazoo except those of HyeSun and HyunJoong. Those two came from members of

hydkorea.

Tags: korean wave: boys over flowers, lj: banner, lj: layout

Whereabouts: in YiJung's pottery shop

Emo at the Moment:

accomplished

Ear Candy: Stand By Me Shinee

10 spoke to me | Speak to me

( 10 spoke to me — Post a new comment )

chibi_rei on February 27th, 2009 05:52 am (UTC)

Nice! I didn't grab a banner, but I did use the code. Credited of course. Hope it's OK I just tweaked the background color. I'll probably put your tile back in tho ^^;;

(Reply) (Thread) (Link)

viktorialouise on February 27th, 2009 06:00 am (UTC)

it's okay... enjoy

(Reply) (Parent) (Thread) (Link)