thirty four ∞ flexible squares

Jun 22, 2011 14:11

XXXIV | Willy Wonka & The Chocolate Factory




XXXIV; Willy Wonka & The Chocolate Factory
LIVE PREVIEWS

Pure Imagination

style

S2; Flexible Squares

accounts

Basic & Paid

browsers

All

Resolutions

works in all. best with 1024x768 and higher

disabled features

subtitle, sidebar calendar, sidebar tags, sidebar summary,

INSTALLATION
HOW TO INSTALL

if you need help installing your S2 layout, click the "how to install" link for a detailed guide on how to install any S2 layout.

install the code

/*-------------------------------------------
NAME: Willy Wonka and the Chocolate Factory
STYLE: S2 | Flexible Squares
ACCOUNTS: basic & paid
TINY ICONS:
CREDIT: apologize @ jealouss
---------------------------------------------*/

/*---------page--------*/

body {
background: #fff url(http://i52.tinypic.com/8xlfub.png) fixed;
text-align: center;
color: #000000;
font-family: "helvetica", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

/*---------body--------*/

#content{
width: 60%;
margin-left: auto; margin-right: auto;
background-color: transparent!important;
border: none;
padding: 15px;
margin-top: 160px;}

#maincontent {
margin-top: 15px;
font-family: helvetica, sans-serif;
font-size: 11px;
background-color: transparent!important;
color: #000000;
border: none;
margin-right: 0px;
text-align: left;}

/*---------header--------*/

#header {
width: 100%;
padding: 10px 0px 20px 0px;
margin: 0px;
text-align: center;
font-family: "helvetica", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 2px;
border: none;
background-color: transparent!important;
color: #000000;}

.headerimage {
}

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

div#header a:hover, div#footer a:hover {
color: #dec;
text-decoration: none;}

.title {
font-family: arial, sans-serif;
font-size: 38px;
font-weight: bold;
letter-spacing: -3px;
line-height: 100%;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
position: absolute;
top: 50px;
left: 0px;
right: 0px;
max-width: 70%!important;
overflow: hidden;
margin: auto;
height: 30px;

}

.subtitle{
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
display: none;}

ul.navheader{

font-family: arial, sans-serif;
font-size: 24px;
font-weight: bold;
letter-spacing: -1.5px;
line-height: 100%;
padding-bottom: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
margin: auto;
width: auto;
text-align: center;
background: #222;
padding: 7px;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

li.view{color: #eee;}
/*---------entries--------*/

.subcontent {}

.entry {
margin: 0px;
margin-top: -10px;
padding: 10px;
background-color: #f8f8f8;
color: #777;
font-family: helvetica, sans-serif;
font-size: 11px;
text-align: justify;
border: none;
border-bottom: 3px solid #333;
}

.entry_text img{border: 3px solid #222; padding: 10px;}
.ljuser img{padding: 0px;}
.userpic {
position: relative;
float: left;
background-color: #C0EF90;
padding: 7px;
margin: 0 0 0 -130px;
z-index: 15;
border-top: 3px solid #222;

}

.date {
line-height: 0%;
top: 5px;
color: #000000;
font-family: courier new, sans-serif;
font-size:9px;
text-align: right;
text-transform: uppercase;
margin: auto;
margin-top: -12px;
}

.subject {
font-weight: bold;
padding: 0px;
color: #000000;
font-family: arial, sans-serif;
font-size: 16px;
margin-top: -15px;
}

.subject a, .subject a:link, .subject a:visited {color: #000;}

.subject a:hover {color: #C0EF90;}

.datesubject {
background-color: #transparent!important;
padding: 5px;
border-top: 3px solid #222;
}

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

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

/*---------tags--------*/

.ljtags {}

/*---------currents--------*/

.currents, .currentmood, .currentmusic {
font-family: arial, sans-serif;
font-size: 10.5px;
}
.currents strong{display: none;}

/*---------comments--------*/

.comments {
font-family: "arial", sans-serif;
font-size: 16px;
text-align: right;
background-color: transparent!important;
padding: 0px 5px 0px 5px;
position: relative;
top: 35px;
right: -10px;
letter-spacing: 0px;
font-weight: bold;
display: block;
}

div.comments a, div.comments a:link, div.comments a:visited{color: #C0EF90; }

div.comments a:hover {
color: #dec;
text-decoration: none;
}

/*---------separator--------*/

.separator{height: 55px;}

/*---------friends page--------*/

.userpicfriends {
position: relative;
float: left;
padding: 0px;
margin: 0px -130px;
text-align: left;
border: none;
font-family: arial, sans-serif;
font-size: 11px;
z-index: 15;
background: transparent!important;
font-size: 0px;
}

.userpicfriends img{background: #C0EF90; border-top: 3px solid #222; padding: 5px;}
.userpicfriends a font{font-size: 10.5px; }
/*---------sidebar--------*/

#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: transparent!important;
border: none;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #000000;
width: 160px;
float: right;
text-align: left;
}

.defaultuserpic {
text-align: center;
}

.sbarheader {}

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

.sbarbody2 {
font: normal 11px helvetica;
padding: 0 15px 0 15px;
position: absolute;
top: 100px;
left: 0px;
right: 0px;
width: 70%;
margin: auto;
text-align: justify;
height: 100px;
overflow: hidden;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #c0ef90;}

div#sidebar a:hover {
color: #dec;
text-decoration: none;
}

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

.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #d4dce8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

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

li.sbaritem{
padding-left: 15px;
list-style: none;
}

li.sbartitle{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 1px;
border-color: #999999;
background-color: #919bad;
margin-bottom: 10px;
margin-top: 10px;
}

/*---------footer--------*/

#footer {
width: auto;
text-align: left;
font-family:arial, sans-serif;
font-size: 16px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent!important;
color: #000000;
border-top: 3px solid #222;
z-index: 100;
clear: both;
letter-spacing: 0px;
padding-top: 5px;
}

#footer .viewing {}
#footer a, #footer a:visited{background: #222; padding: 5px; margin-left: -5px;}
ul.navfooter{
padding: 0px;
margin: 0px;
}

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

.clearfoot {clear: both;}

/*---------archive page--------*/

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

ul.year li {
display: inline;
}

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

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

td.yeardate a{font-weight: bold; font-size: 13px; color: #222; }
td.yeardate a:hover{color: #C0EF90;}
table.yeartable td.yearday {
background-color: #C0EF90;
text-align: center;
font-weight: bold;
font-size: 20px;
}

td.yearmonth {
border-style: none;
}

/*---------comment page--------*/

.datesubjectcomment {
background-color: #f8f8f8;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
background-color: #c0ef90;
top: -45px;
left: -25px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}

.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #d4dce8;
color: #000000;
}

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

.reply{
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "helvetica", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #f8f8f8;
color: #000000;
}

.replytosubject {font-weight: bold;}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "helvetica", sans-serif;
color: #000000;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #f8f8f8;
border-top: 3px solid #222;
}

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

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

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

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

.skiplinks {text-align: center;}

/*----------disabled------------*/

#lj_controlstrip_new, .subtitle, .defaultuserpic, #sidebar_calendar, #sidebar_linklist, #sidebar_tags, #sidebar_summary, .sbartitle{display: none;}

/*---------misc--------*/

.clear {height: 15px;}

div.ContextualPopup {
margin: 10px 0 0 50px;
font: normal 11px helvetica, sans-serif !important;
}

div.ContextualPopup img {
border: 1px solid #ddd;
padding: 10px;
background: #c0ef90;
}

div.ContextualPopup div.Inner {
background-color: #f8f8f8 !important;
color: #828282 !important;
border-top: 15px solid #222;
border-bottom: 1px solid #ddd;
border-left: none; border-right: none;
padding: 10px;
width: 250px;
}

div.ContextualPopup .Relation {
font: normal 13px courier new, sans-serif;
color:#555;
font-weight: normal;
text-transform: uppercase;
letter-spacing:-1px;
border-bottom:1px solid #222;
padding:0;
margin:0px 0px 4px 0px;
}

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

/*----------links----------------*/

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

a:hover {
color: #C0EF90;
text-decoration: none;
}
blockquote {font: normal 11px arial; border-top: 1px solid #C0EF90; border-bottom: 1px solid #C0EF90; padding: 5px;}

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

textarea{background: transparent!important; font: normal 11px arial; border: 3px solid #222;}
b, s, i, u {color: #222;}

/*---------tiny icons--------*/

/* Generated by Malionette's Tiny Icon Generator */

img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i53.tinypic.com/iglx5z.jpg) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i56.tinypic.com/j15wr6.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/syndicated.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i52.tinypic.com/2i9pmrb.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i54.tinypic.com/2dqon4k.jpg) no-repeat !important; padding: 14px 0 0 18px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i54.tinypic.com/jj0hns.jpg) no-repeat !important; padding: 14px 0 0 18px !important; }
img[src*="img/icon_groups.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i55.tinypic.com/i1k9xs.png) no-repeat !important; padding: 16px 0 0 18px !important; }

img[src*="userinfo.gif"], img[src*="user_ontd.gif"], img[src*="userinfo-support.gif"], img[src*="openid-profile.gif"], img[src*="anonymous.gif"], img[src*="userhead"] {
background:url("http://i53.tinypic.com/iglx5z.jpg") no-repeat !important;
height:0; padding: 16px 0 0 15px !important; width:0;}

Features
topbar

Additional Customization
The metadata in the layout is not the typical metadata found on standard livejournal styles, to get your metadata like it is in the layout you must have a paid account, and use layers. To learn more about layers see this tutorial, to learn about how to cusotmize your metadata using your layers, see this tutorial.

Credits

tiny icons by brsev @ deviantart

Questions

If you have a questions, please make sure you read through all the information provided here, and the FAQ before you ask. I will not answer/help if you don't take the time out to find an answer before coming to me. Questions can be directed to the FAQ entry, please do not PM me.
FAQ | HOW TO CREDIT

like what you see?

watch | more layouts

type: layout, &style: flexible squares, !maker: apologize

Previous post Next post
Up