S2 Flexible Squares 'Buddhist Munks' & Profile layout

[leavesofyanara]

A topbar Layout & profile layout created from a buddhist munks header.

Style: Flexible Squares
Subject: Topbar Layout 'Buddhist Munks'
Tested: IE & Firefox
Account: Free, plus & paid

Preview || Live [temporary]



Profile Preview




Rules & info:
- Credit leavesofyanara if you take it;
- Feedback is absolute ♥ as always;
- Uploading the images to your own host (Tiny Pic, Photobucket etc.) is advised
- Tiny icons can be added, the code is in the bottom of the CSS, I suggest tiny icons by FamFamFam.com or Pinvoke.
- You can change anything else you like just as long as you keep the credit on!
- Header image can be changed of course. The code can be found in the bottom of the CSS.
- Any questions? Feel free to ask me, but it may take a while before you get your answer. It's easier & faster to ask at sites such as mintyhelp.

Layout
/*---------------------------------------------------
Layout: '08 - Buddhist Munks' - Style: Flexible squares
By: leaves of yanara
Please do not remove this section & give credit.
-----------------------------------------------------*/

body {
background: #222 url('http://i44.tinypic.com/i5zspi.jpg');
text-align: center;
color: #999;
font-family: Century Gothic;
font-size: 11px;
margin: 10px 0 10px 0;
}

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

a:hover{ color: #952647; text-decoration: none; }

blockquote { font-size: 10px; font-family: verdana, sans-serif; border-left: 3px dotted #fc6a83; text-align: left; margin: 30px; padding: 5px; }

blockquote:hover { font-size: 10px; font-family: verdana, sans-serif; border-left: 3px dotted #952647; text-align: left; margin: 30px; padding: 5px; }

code, kbd, pre, tt{ font-family: monospace; }

/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/

#content{
width: 900px;
margin-left: auto; margin-right: auto;
background-color: #f9f9f9;
margin-top: -3px;
}

#maincontent{
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 11px;
background-color: #f9f9f9;
color: #888;
margin: 0 0 0 0px;
text-align: left;
}

#sidebar {
padding-top: 10px;
font-size: 10px;
font-family: "Verdana", sans-serif;
color: #888;
width: auto;
float: top;
text-align: left;
}

/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/

.defaultuserpic { display: none; }

.defaultuserpic img { }

.sbarheader { padding: 0px 5px 0px 5px; }

.sbarbody { padding: 0px 5px 0px 5px; }

.sbarbody2 { width:670px;padding: 10px 15px 10px 15px;line-height:1.5;margin-left:200px;position:absolute; letter-spacing: -1px; }

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

li.sbaritem{ display:block;padding: 3px 8px; margin: 1px 2px;border-width: 0px 0px 1px 0px;border-style:solid; border-color:#ececec; }

li.sbaritem:hover { border-color:#cccccc;border-width: 0px 0px 1px 0px; }

li.sbartitle{ display:none; }

#sidebar_linklist { margin:0; padding:0 3px 8px 10px;width:200px; font-family: century gothic; font-variant: small-caps; }

#sidebar_summary,#sidebar_tags, #sidebar_calendar { display:none }

/*-----------------------------------------------------------------------------
Header 'n Footer - not for .headerimage
--------------------------------------------------------------------------------*/

#header{
float: center;
width: auto;
padding: 0px ;
text-align: center;
}

#footer {
float: center;
width: auto;
padding: 0px;
text-align: right;
clear: both;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
width: auto;
margin: 0 3px 0 3px;
font-size: 14px;
padding: 0px;
text-transform: none;
}

div#header a:hover, div#footer a:hover, div#header li.view {
width: auto;
margin: 0 3px;
background: #f3f3f3;
font-size: 14px;
color: #FC6A83;
padding: 2px;
text-transform: none;
}

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

ul.navheader, ul.navfooter { padding: 6px; margin: 3px; }

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

.clearfoot { clear: both; }

/*title and subtitle*/
.title { display: none; font-family: Anke Calligraphic FG; font-size: 15px; font-variant: small-caps; color: #FC6A83; }

.subtitle { display: none; font-family: Calibri; font-size: 12px; font-variant: small-caps; color: #FC6A83; }

/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/

.subcontent { margin-top: 40px; }

.entry {
margin: 5px 5px 15px 5px;
padding: 10px;
font-family: Verdana, sans-serif;
font-size: 11px;
text-align: left;
letter-spacing: -1px;
}

.userpic {
position: relative; float: right;
background-color: #f2f2f2;
padding: 15px;
margin: 15px 15px 0 5px;
z-index: 15;
border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
}

.userpicfriends {
position: relative; float: right;
background-color: #f2f2f2 !important;
padding: 15px;
margin: 15px 15px 0 5px;
z-index: 15;
border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
color: #fc6a83; text-align: center;
}

.userpicfriends a font { font-family: Verdana, sans-serif; font-size: 9px; color: #fc6a83;}

.userpicfriends a font:hover {color: #952647;}

.date {
text-transform: uppercase;
color: #dddddd;
font-size: 13pt;
letter-spacing: -2.5px;
position: left;
padding-top: 3px;
}

.subject {
background-color: transparent;
letter-spacing: -3px;
font-size: 22pt;
text-transform: none;
line-height: 100%;
padding: 0px 0 0 5px;
margin-top: -17px;
}

.datesubject {
font-family: century gothic;
margin: 0 10px 0 10px;
padding: 5px 5px 5px 5px;
border-bottom: 1px solid #dddddd;
text-align: left;
height: 40px;
color: #fc6a83;
}

.entry ul li { padding-left: 5px;margin-left: 15px; }
.entry ol li { padding-left: 5px;margin-left: 15px; }

.comments {
font-family: "Century Gothic";
font-size: 11px;
text-align: left;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
text-transform: uppercase;
}

div.comments a, div.comments a:link, div.comments a:visited{ color: #FC6A83; }
div.comments a:hover { color: #FC6A83; background: #f2f2f2; padding: 0 2px; text-decoration: none; }

.separator{ height: 0px; }

/*---------------------------------------------------------------------
Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents {background-color: transparent;}

.currents strong{display: none}

.currentlocation {
text-align: left;
font-size: 8.5px;
color: #999;
background: url(http://i43.tinypic.com/2zhdu8y.jpg) no-repeat left center;
padding: 0 0px 2px 11px;
}

.currentmood {
text-align: left;
font-size: 8.5px;
color: #999;
background: url(http://i42.tinypic.com/5ouybb.jpg) no-repeat left center;
padding: 0 0px 2px 11px;
}

.currentmusic {
text-align: left;
font-size: 8.5px;
color: #999;
background: url(http://i40.tinypic.com/x2vr89.jpg) no-repeat left center;
padding: 0 0px 2px 11px;
}

.ljtags {
margin-top: 60px; margin-bottom: -25px;
text-align: left;
text-transform: lowercase;
font-size: 9.5px;
color: #999;
background: url(http://i44.tinypic.com/ieffpg.jpg) no-repeat left center;
padding: 0 0 0 11px;
}

/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/

ul.year { text-align: center;padding-bottom: 40px; }

ul.year li { display: inline; }

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

table.yeartable td.yeardate, table.yeartable td.yearday { border-bottom: 1px solid #dddddd; }

table.yeartable td.yearday { text-align: center; }

td.yearmonth { border-style: none; }

/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.clear { height: 15px; }

.datesubjectcomment { background-color: transparent; padding: 5px; margin-top: 40px; margin-bottom: 25px; border-bottom: 1px solid #ddd;}

.userpiccomment {
position: relative;
border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;
background-color: #f2f2f2;
padding: 15px;
margin: 0px 5px 50px 0px;
z-index: 15;
float: left;
}

.box { padding: 10px; clear: left; font-family: century gothic; }

input, textarea { font-family: century gothic; font-size: 9px;}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 125%;
}

.replytosubject { font-weight: bold; }

.commentreply { position: relative; margin: 10px; font-size: 10px; font-family: "Verdana", sans-serif; letter-spacing: -1px; }

.commentbox { padding: 10px; margin: 10px; background-color: transparent; font-family: century gothic; }

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

.datesubjectcomment a:hover { background-color: #ddd; padding: 0 2px; }

.commentboxpartial { padding: 10px; margin: 10px; background-color: transparent; }

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

.skiplinks { text-align: center; }

/*--------------------------------------------
Header - for formatting headerimage
-------------------------------------------*/

.headerimage {
position: relative;
width: 900px;
height: 375px;
margin: auto;
background: url("http://i49.tinypic.com/1yafex.jpg") no-repeat;
}

/*--------------------------------------------
Tiny Icons
-----------------------------------------*/
.subject img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background-repeat: no-repeat; background: url(http://i40.tinypic.com/xpyiz5.jpg); background-position: left; }
.subject img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 16px 16px 0px 0px !important; background: url(http://i39.tinypic.com/oi7hon.jpg); background-position: left; }

.ljuser img {width: 0; height: 0; background-repeat: no-repeat; background-color:transparent; background-image: url(http://i43.tinypic.com/sch092.jpg); padding: 16px 16px 0 2px !important; background-position: left;}
.ljuser img[src*="userinfo.gif"] {background-color:transparent; background-image: url(http://i43.tinypic.com/sch092.jpg); padding: 16px 16px 0 2px !important; background-position: left; }
.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url(http://i44.tinypic.com/b97kox.jpg); padding: 16px 16px 0 2px !important; background-position: left; }

.box img[src="http://l-stat.livejournal.com/img/anonymous.gif"]{
height:0; width:0;
padding: 0 16px 16px 0; /* the suggested height and width of tiny-icons is 16px */
background: url(http://i43.tinypic.com/261lqut.jpg); }

.box img[src="http://l-stat.livejournal.com/img/openid-profile.gif"]{
height:0; width:0;
padding: 0 16px 16px 0; /* the suggested height and width of tiny-icons is 16px */
background: url(http://i44.tinypic.com/126461i.jpg);
}

.box img[src="http://l-stat.livejournal.com/img/help.gif"]{
height:0; width:0;
padding: 0 16px 16px 0; /* the suggested height and width of tiny-icons is 16px */
background: url(http://i42.tinypic.com/o0ts90.jpg);
}

#ljuser_row img[src="http://l-stat.livejournal.com/img/userinfo.gif"]{
height:0; width:0;
padding: 0 16px 16px 0; /* the suggested height and width of tiny-icons is 16px */
background: url(http://i44.tinypic.com/b97kox.jpg);
background-repeat: no-repeat;
}

Instructions:
♥ Go to customize journal style.
♥ Select Flexible Squares -> Blue Grey by Yati Mansor -> Sidebar on left or right.
♥ Then go to custom options -> Custom CSS & select NO in all the dropdown boxes.
♥ Copy & paste the CSS into the box & save changes.
♥ Go to Sidebar and make sure to enable 'Blurb' and 'Links' in this order. Disable all the other options.

Profile

| 001| The morning mist alters the once moonlight-silver tint of Brad's skin to a light-golden sheen, akin to burnt rays of light - inexplicable though it may sound - darker in some places, but mainly the same shade all over. Hours, days spent surfing take their toll on smooth, lean muscles and sun-bleached hair. Brad's skin doesn't freckle nearly as much as Izzy's, which is surprising, considering how much time he spends in the sun, disregarding the fact that he's mainly covered while surfing. Rare, barely-visible freckles dot his shoulders, hands and nose, softening his usually icy rough, rugged appearance. Izzy wants to rub her lips repeatedly over each and every one of them. | 002 | Almost clumsily, she kisses Brad once on the shoulder closest to her, and then on the tip of his nose. Brad's breathing becomes shallower. Izzy knows it won't be long now until he awakens. Ever since that first time she saw Brad in the sun, emerging from the water, Izzy has wondered whether the other Marines would continue to call him 'the Iceman', if they could see him, surrounded, god-like, by rays of light. She picks up Brad's hands, plays with his fingers almost absent-mindedly. | 003 | They are long, slender, capable of killing and caressing, though Brad wouldn't admit the latter even under pain of death - only when Izzy holds him on the brink of extreme pleasure, branching almost into excruciating pain. Just how Brad likes it. Brad is still trapped in the land of dreams and things that are not quite real, and Iz kisses the pads of Brad's fingers, nibbling at his ring finger almost thoughtfully, caught in his ruminations of the various ways Brad is contradictory.

| Links | http://www.google.nl">link 1 http://www.google.nl">link 2 http://www.google.nl">link 3 http://www.google.nl">link 4 http://www.google.nl">link 5 http://www.google.nl">link 6 http://i50.tinypic.com/29ft6ch.jpg"/> || http://leavesofyanara.livejournal.com"> Profile Code: Leaves of Yanara||