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