fruitstyle: ❝ Layout 013 : Stylin' BF

Malice the MAN (

wingweaver22) wrote in

fruitstyle,
@ 2008-04-13 21:04:00

Current music:	Trey Songz Ft. Plies - Can't Help But Wait
Entry tags:	# layout

❝ Layout 013 : Stylin' BF
What a failed attempt at taking a break )':! Here's a copy cat of the Boxer!

S2 Flexible Squares
Tested in Firefox, Opera, 1024x768+

Live Preview!

</td></tr>

Layout

S2 Flexible Squares

Firefox, Opera | 1024 x 768 +
I only have IE 6 and this layout doesn't work on it. Not sure about IE 7 and 8.

Free, Plus, Paid

Coded

Archive, Comments Page, Tags Page, Navbar

Leave the little note at the top!
Please leave credit somewhere in your journal, it'd be great if it was in your userinfo!

/* S2 FLEXIBLE SQUARES --- Stylin' BF --- 
Wingweaver22 @ Fruitstyle.livejournal.com 
Do not remove this note. */

.entry_text img { border: 3px solid #ffbb64; }

body {
background-color: #f3f9f9; color: #aaaaaa;
font-family: arial, sans-serif; font-size: 10px;
margin: 0; padding: 0;
background-image: url();
background-attachment: fixed;
}

b { font-family: tahoma;}

a, a:link, a:visited {
color: #ffbb64;
text-decoration: none;
}

a:hover {
color: #888888;
cursor: help;
}

blockquote{
background-color: #fafafa; color: #bbbbbb; 
font-size: 9px;
margin: 0; padding: 5px; 
}

blockquote:hover { background-color: #ffffff; cursor: text; }

input, select {
background-color: #fafafa; color: #bbbbbb;
font-family: tahoma; font-size: 9px; 
border: 1px solid #dddddd; 
margin-top: 5px;
}

input:hover, select:hover {
background-color: #ffffff; color: #bbbbbb;
border: 1px solid #dddddd;
cursor: help;
}

textarea {
width: 200px; padding: 5px;
border: 1px solid #dddddd;
background-color: #fafafa; color: #bbbbbb;
font-size: 9px; font-family: tahoma;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: L A Y O U T */

#content {
padding: 0px; margin: auto; margin-top: 50px;
width: 900px;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: H E A D E R */

#header {display: none;}

ul.navheader li a{
padding: 0px;
}

li.view{ 
background-color: #ffbb64; color: #ffffff; 
padding: 0px;
}

ul.navheader{ padding: 0px; margin: 0px;}

ul.navheader li {
display: inline;
}

.title, .subtitle, .defaultuserpic{ display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: S I D E B A R */

#sidebar {
text-align: left; text-transform: lowercase;
padding: 0; margin: 0;
width: 170px;
float: right;
}

#sidebar a {color: #aab8b8;}
#sidebar a:hover {color: #888888;}

.sbartitle, .sbarheader {
letter-spacing: 1px;
font-size: 16px; 
padding: 5px 0 5px 0;
}

.sbarbody { margin: 0; padding: 0; }

.sbarbody2 { margin: 0; padding: 0; }

#sidebar_summary li.sbaritem { margin: 0; padding: 0;}

table.calendar { margin-left: 0;}

.sbarcalendar { text-align: center; }

.sbarcalendarposts { text-align: center; }

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

li.sbaritem { list-style: decimal-leading-zero; margin-left: 25px;}

.tagcloud {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: E N T R Y */

#maincontent {
margin: 0; padding: 30px 30px 24px 30px;
width: 650px;
border: 6px solid #ffffff;
background-color: #e9f4f4;
}

.subcontent { 
background-color: #ffbb64;
border-bottom: 6px solid #e9f4f4;
}

.date {
font-size: 9px; font-family: tahoma, sans-serif; 
text-transform: lowercase;
padding: 0 0 0 10px; margin: 0;
color: #dddddd;
}

.subject {
font-size: 16px;
padding: 0 0 0 10px; margin: 0;
letter-spacing: 1px;
background-color: #fafafa;
}

.datesubject {
text-align: left; background-color: #ffffff;
padding: 5px 0 0 0; margin-left: auto;
width: 520px;
border-left: 6px solid #e9f4f4;
}

.entry {
background-color: #ffffff;
width: 510px;
margin-left: auto; padding: 5px;
min-height: 100px; overflow: visible;
border-left: 6px solid #e9f4f4;
}

.entry_text {min-height: 100px;}

.entry ul li {padding:0; margin: 0;}

.entry ol li {padding:0; margin: 0;}

.userpic {
float: left; overflow: hidden;
background-color: #ffbb64;
padding: 0px; margin: 0px;
width: 124px;
text-align: center;
}

.userpic img {
border: 1px solid #ffffff;
margin: auto; margin-top: 11px; }

.userpicfriends {
float: left; overflow: hidden;
background-color: #ffbb64 !important;
padding: 0px; margin: 0px;
text-align: center;
color: #ffbb64;
width: 124px;
}

.userpicfriends a font{
color: #ffffff !important;
}

.userpicfriends img{
margin: auto; margin-top: 11px; border: 1px solid #ffffff;
}

.clear, .separator {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: M E T A & C O M M E N T */

.currents, .ljtags {font-size: 9px;}

.currentmood, .currentmusic, .currentlocation, .ljtags {
background-color: #fafafa;
margin: 5px 0 0 0; padding: 1px 0 1px 5px;
width: 215px;
}

.currentmood strong, .currentmusic strong, .currentlocation strong{
font-weight: normal;
}

.comments {
font-size: 9px; font-family: tahoma, sans-serif; 
text-align: center; text-transform: lowercase;
margin: 5px 0 0 0; padding: 0;
color: #dddddd;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: F O O T E R */

#footer {
padding: 5px 0 5px 0; margin-right: 0;
width: 710px;
text-align: center; text-transform: lowercase;
font-size: 16px;
color: #bbbbbb; 
}

#footer a {color: #aab8b8;}
#footer a:hover {color: #888888;}

ul.navfooter { 
padding: 0px; margin: 0px;
}

ul.navfooter li{
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {display: none;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: R E P L Y & C O M M E N T */

.skiplinks { text-align: right; color: #dddddd;}

.skiplinks a {color: #aab8b8;}
.skiplinks a:hover {color: #888888;}

.box {
margin: 0; padding: 0px;
color: #888888;
}

.box a {color: #aab8b8;}
.box a:hover {color: #888888;}

.datesubjectcomment {
margin: 0; padding: 0; 
text-align: left;
}

.userpiccomment {
float: left;
background-color: #ffffff;
padding: 0px; margin: 0 6px 0 0;
border: 11px solid #ffbb64;
}

.commentreply {
margin: 0; padding: 0px;
min-height: 100px;
}

.commentbox {
margin: 0; padding: 0px;
}

label{ font-size: 9px;}

textarea.textbox  {
width: 95% !important;
}

.reply {
margin: 0; padding: 0;
}

.replytosubject {
margin: 0; padding: 0;
}

.commentboxpartial {
margin: 10px 0 10px 0; padding: 0;
}

.commentinfo {
margin: 0; padding: 0;
width: 100%;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: A R C H I V E & T A G*/

ul.year {
text-align: center; text-transform: lowercase;
padding: 0; margin: 0;
background-color: #ffffff; 
}

ul.year li { display: inline; }

table.yeartable { 
margin: auto; padding: 0; 
}

table.yeartable a{ color: #aab8b8;}
table.yeartable a:hover{ color: #888888;}

table.yeartable td.yearday {
background-color: #ffbb64; color: #ffffff;
text-align: center;
border: 0; margin: 0; padding: 0;
}

table.yeartable td.yeardate {background-color: #ffffff;}

table.yeartable td.yeardate a{ color: #ffbb64;}
table.yeartable td.yeardate a:hover{ color: #888888;}

#maincontent h2 { 
font-size: 16px; font-weight: normal;
text-transform: lowercase; text-align: center;
padding: 3px;
}

.ljtaglist { 
list-style: decimal-leading-zero;
margin: 10px; padding: 0;
}

.ljtaglist a{ color: #aab8b8;}
.ljtaglist a:hover{ color: #888888;}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::: O T H E R */

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}

::-moz-selection { background: #bbbbbb; color: #ffffff; }
::selection { background: #bbbbbb; color: #ffffff;  }
code::-moz-selection { background: #bbbbbb; color: #ffffff;  }
code::selection { background: #bbbbbb; color: #ffffff;  }

/*------ Look of contextual Popup ------*/

div.ContextualPopup {
margin: 10px 0 0 0px;
font: normal 10px "tahoma" !important;
}

div.ContextualPopup img {
margin: 0px !important;
}

div.ContextualPopup div.Inner {
background-color: #f3f9f9 !important; color: #aaaaaa !important;
border: 0;
padding: 0px; margin: 0;
width: 220px;
text-align: left;
}

div.ContextualPopup .Content {
padding: 5px 0 0 5px; margin-right: 0px;
}

div.ContextualPopup .Relation, div.ContextualPopup .Content .OnlineStatus {
font-weight: normal !important;
}

div.ContextualPopup .Userpic {
padding: 0; margin: 0 0 0 20px;
border: 5px solid #ffbb64;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #ffbb64 !important;
}

#lj_controlstrip table { margin: 0; padding: 0; background-color: #e9f4f4 !important;}

#lj_controlstrip td {
background-color: #e9f4f4  !important;
font-family: tahoma;
color: #aaaaaa;
border-bottom: 5px solid #ffffff !important;
}

#lj_controlstrip a {
color: #aab8b8 !important;
font-family: tahoma; font-size: 9px;
text-transform: lowercase;
}

#lj_controlstrip a:hover {
color: #888888 !important;
cursor: help; 
border: 0;
text-decoration: none;
}

#lj_controlstrip a img, #lj_controlstrip form {
padding: 0; margin: 0; border: 0;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
font-family: tahoma; font-size: 9px;
background-color: #ffffff; color: #aaaaaa;
padding: 0; margin: 0;
border: 1px solid #eeeeee;
}

#lj_controlstrip_userpic, #lj_controlstrip_userpic img{ width: 50px; height: 50px; }

#lj_controlstrip_statustext {
font-size: 9px;
color: #bbbbbb !important;
font-weight: normal;
letter-spacing: 2px;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border: 0; }

Instructions

Choose Flexible Squares!

Go to Custom CSS
In "Use layout's stylesheet(s)" choose "no".
Copy and paste in the code into the "Custom stylesheet" box!

Now in Layout Setup.

*PLUS ACCOUNTS*
Choose your ads placement. I suggest selecting "Vertical", but any of them are fine.

Customize

Adding a header. Paste this code under base codes.

Replace "urlhere" with your header url. Replace "###" with the header width!

Ending

Contextual Pop-up -

cartonage
Please credit

fruitstyle somewhere in your journal please!

Go ahead and make changes to this layout! Please don't redistribute and claim that you made it though.. thanks. (:

Drop a comment if you have time? (:
Please ask your questions here !
Thank you for looking!

Customize

Page 1 of 3
<<	[1] [2] [3]	>>

(Post a new comment)

	dookiechoo 2008-04-14 01:16 am UTC (link)
	This is beautiful! I really like the colors :) Adding to Memories. (Reply to this)

	starsurfer 2008-04-14 01:18 am UTC (link)
	that's beautiful...! (Reply to this)

	talklikeazombie 2008-04-14 01:39 am UTC (link)
	It's really gorgeous I like it :D (Reply to this)

	stuffedpanda 2008-04-14 01:49 am UTC (link)
	Using this right now. :3 (Reply to this)

	shining 2008-04-14 02:43 am UTC (link)
	A This is a very cute summer layout! Will definitely be using! ♥ (Reply to this)

	fopperies 2008-04-14 03:18 am UTC (link)
	Omg. This is fantastic. Love the colours. If I ever get married, those will be my colours for sure. (this is a fantasy wedding, anything goes. The groom is also Hayden Christensen.) Will use & credit in the immediate vicinity of now. ♥ (Reply to this)(Thread)

(no subject) -

wingweaver22, 2008-04-14 03:27 am UTC

	tobakichan 2008-04-14 04:06 am UTC (link)
	GOREGEOUS! (Reply to this)

	chocolatychip 2008-04-14 05:12 am UTC (link)
	Love the layout ! <3 (Reply to this)

	xenachan 2008-04-14 06:30 am UTC (link)
	I love the color !! :) Mem it, thank you ! (Reply to this)

	ririne 2008-04-14 12:15 pm UTC (link)
	Huh, I hate you xD you always make nice layouts and I always want to change mine after ;_; Anyway, very nice, as usual. (Reply to this)

	kanrinin 2008-04-15 12:18 am UTC (link)
	Whoa, so pretty! +mem'd for future use /o/ (Reply to this)

	soraachi 2008-04-15 12:24 am UTC (link)
	lovely ♥ snagging for later :)! (Reply to this)

	acidickiwi 2008-04-15 03:37 am UTC (link)
	beautiful! will use for later x3~! (Reply to this)

	sukihime 2008-04-15 08:54 pm UTC (link)
	So pretty! Definitely using it :) (Reply to this)

	je_sea_kah 2008-04-15 11:19 pm UTC (link)
	love the layout~ the colors are so ...comforting (that makes no sense...) will be using~!! (Reply to this)

	primera_espada 2008-04-17 03:30 am UTC (link)
	You're like a LJ Hero for me D: 'Cause I love all your works~ And this layout is awesome. Taking, with credit of course! Thank you~ (: (Reply to this)

	trickxstar 2008-04-17 04:03 am UTC (link)
	Beautiful. Definitely snagging! (Reply to this)(Thread)

(no subject) -

wingweaver22, 2008-04-26 10:07 pm UTC

(no subject) -

trickxstar, 2008-04-26 10:54 pm UTC

	luxferi 2008-04-17 09:17 am UTC (link)
	Adding to memories, I might change the font a bit since it's too small for my aging eyes. :D But, very good work. Thanks for sharing! (Reply to this)

	isomethyl 2008-04-17 09:50 am UTC (link)
	cute! thanks =D will be using soon.. (Reply to this)

	airpilot 2008-04-18 12:00 am UTC (link)
	lovely ♥ i love this style :) (Reply to this)

	lemon_shoebox 2008-04-18 07:11 am UTC (link)
	Love the layout. Will be using, and will credit YOU. ^^ Thanks! (Reply to this)

	wednesdaya 2008-04-19 10:42 am UTC (link)
	So pretty. Thank you, will credit :) (Reply to this)

	geniusgirl 2008-04-19 05:59 pm UTC (link)
	I love it :D (Reply to this)

	chilayse 2008-04-20 12:31 pm UTC (link)
	I adore the colors on this, it's a perfect springtime layout without being too girly. I used it and credited it in the sidebar. (Reply to this)

	herinia 2008-04-21 04:31 am UTC (link)
	This is so beautiful! I'm using it at herinia right now. I have a question though: you see how the page summary text is a bit off the column in the sidebar? How can I fix this? Thank you in advance! (Reply to this)(Thread)

(no subject) -

wingweaver22, 2008-04-21 07:51 pm UTC

(no subject) -

herinia, 2008-04-21 11:16 pm UTC

Page 1 of 3
<<	[1] [2] [3]	>>

Username:		Create an Account Forgot your login? Login w/ OpenID
Password:
	Remember Me
	English • Español • Deutsch • Русский…

Advertisement

About

Help

Get Involved

Legal

Store

LJ Labs