XXXVI | Unprotected
XXXVI; Unprotected
LIVE PREVIEWS
Unprotected
style
S2; Flexible Squares
accounts
Basic & Paid
browsers
All
Resolutions
works in all
disabled features
control strip
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: Unprotected
STYLE: S2 | Flexible Squares
ACCOUNTS: basic & paid
TINY ICONS:
CREDIT: apologize @ jealouss
---------------------------------------------*/
/*---------page--------*/
body {
background-color: #eee;
text-align: center;
color: #000000;
font-family: helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
/*---------body--------*/
#content{
width: 600px;
margin-left: auto; margin-right: auto;
background-color: #transparent!important;
border: none;
padding: 0px;
margin-top: 150px;
margin-bottom: 100px;}
#maincontent {
margin-top: 0px;
font-family: "helvetica", sans-serif;
font-size: 11px;
background-color: #transparent!important;
color: #333;
border: none;
margin-right:0px;
text-align: left;}
/*---------header--------*/
#header {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
height: 100px!important;
z-index: 20;
padding: 10px 0px 20px 10px;
margin: 0px;
text-align: left;
font-family: helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
letter-spacing: 2px;
border: none;
-moz-box-shadow: -1px 3px 3px black;
-webkit-box-shadow: -1px 3px 3px black;
box-shadow: -1px 3px 3px black;
background-color: #111;
color: #999;}
.headerimage {
}
div#header a, div#header a:link, div#header a:visited, {color: #262525;}
div#header a:hover{
color: #91ADA9;
background: transparent!important;
text-decoration: none;
border-bottom: 1px solid #211f1f;}
.title {
font-family: helvetica, sans-serif;
font-size: 24px;
letter-spacing: -1.5px;
font-weight: normal;
line-height: 100%;
top: 10px;
margin-left: 140px;
text-transform: uppercase;
color: #fff;
}
.subtitle{
font-family: georgia, sans-serif;
font-size: 12px;
letter-spacing: 4px;
font-weight: normal;
font-style: italic;
top: 10px;
text-transform: ;
margin-left: 140px;
color: #fff;}
ul.navheader{
padding: 0px;
margin: 0px;
position: absolute;
top: 100px;
left: 150px;
font-family: helvetica;
letter-spacing: 0px;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*---------entries--------*/
.subcontent {}
.entry {
margin: 0px;
padding: 10px;
background-color: #fff;
color: #444;
font-family: georgia, times new roman, sans-serif;
font-size: 13px;
text-align: justify;
border: none;
}
.userpic {
position: relative;
float: right;
background-color: #fff;
padding: 5px;
margin: 0px;
z-index: 15;
border: 1px solid #ddd;
margin-right: -130px;
top: 25px;
}
.date {
line-height: 7px;
top: 0px;
margin-right: -133px;
width: 15%;
color: #fff;
background: #ddd;
font-family: georgia, sans-serif;
font-size: 10px;
float: right;
text-transform: uppercase;
padding: 2px 10px;
text-align: center;
font-style: normal;
}
.subject {
font-weight: normal;
padding: 10px;
letter-spacing: 1px;
color: #000000;
font-family: helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
border-bottom: 1px solid #ddd;
padding:3px 0 2px 0px;
}
.subject a, .subject a:link, .subject a:visited {color:#333;}
.subject a:hover {color: #ddd; text-decoration: none; background: transparent!important;}
.datesubject {
background-color: #fff;
padding: 5px;
}
.entry ul li{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li{
padding-left: 5px;
margin-left: 15px;
}
/*---------tags--------*/
.ljtags {}
/*---------currents--------*/
.currents, .currentmood, .currentmusic, .currentlocation {
font-family: helvetica, sans-serif;
font-size: 11px;
}
.currents strong{text-transform: lowercase; font-family: georgia; color: ;}
.currenttags a:hover{background: transparent!important;}
/*---------comments--------*/
.comments {
font-family: hlevetica, sans-serif;
font-size: 0px;
text-align: left;
background-color: #ddd;
padding: 5px;
position: relative;
top: 22px;
left: -10px;
right: 0px;
width: 103.5%;
}
div.comments a, div.comments a:link, div.comments a:visited{color: #ffffff; font-size: 12px;}
div.comments a:hover {
color: #b0b9c8;
text-decoration: none;
}
.comments {font-family:"Arial", Helvetica,sans serif;color: #fff;text-transform: uppercase; font-weight:bold;font-size:.85em;line-height:.1;letter-spacing:-0.03em;text-align: left; padding:0;margin:20px 0 0 0; color: #ddd;}
div.comments a, div.comments a:visited, div.comments a:link {display:block;padding:5px ;width:90px;margin:0 0 0 auto;background-color: #000;line-height:1}
div.comments a:hover{color:#FFF;background-color:#91ADA9}
.separator{height: 75px}
/*---------separator--------*/
.separator{height: 35px;}
/*---------friends page--------*/
.userpicfriends {
position: relative;
float: right;
padding: 5px;
top: 20px;
margin-right: -135px;
text-align: center;
border: none;
font-family: helvetica, sans-serif;
z-index: 15;
margin-left: -145px;
background: transparent!important;
font-size: 0px;}
.userpicfriends a, .userpicfriends font{font-size: 9px; font-family: georgia; color: #888; font-style: italic;}
.userpicfriends img{padding: 5px; background: #fff; border: 1px solid #ddd;}
/*---------sidebar--------*/
#sidebar {
padding-top: 0px;
margin-top: 0px;
background-color: #111;
border: none;
font-size: 11px;
font-family: "helvetica", sans-serif;
color: #fff;
width: 100%;
text-align: justify;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 30;
-moz-box-shadow: 0px -4px 3px black;
-webkit-box-shadow: -0px -4px 3px black;
box-shadow: 0px -4px 3px black;
height: 1.5px;}
#sidebar:hover{height: 150px;}
#sidebar_summary, #sidebar_tags, .sbarbody, .sbarbody2, #sidebar_calendar, #sidebar_linklist{width: 170px; height: 150px; float: left; overflow: auto; padding: 0px; margin-left: 20px; }
.sbarbody2{width: 400px; margin: 0px;}
li.sbartitle{border-bottom: 1px solid #eee; background:; color: #91ADA9; font-weight: bold;}
.defaultuserpic {
text-align: center;
position: fixed;
top: 10px;
left: 20px;
z-index: 30;
border-right: 1px dotted #444;
padding-right: 20px;
opacity: 1!important;
}
.sbarheader {}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #91ADA9;}
div#sidebar a:hover {
color: #777;
text-decoration: none;
background: transparent!important;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendarposts {
border: none;
background-color: transparent!important;
text-align: left;
}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem{
padding-left: 15px;
list-style: none;
border-bottom: 1px solid #211f1f;
}
/*---------footer--------*/
#footer {
width: 10%;
text-align: center;
font-family: helvetica, sans-serif;
font-size: 51px;
font-weight: normal;
letter-spacing: 0px;
background-color: transparent!important;
color: #ddd;
z-index: 100;
clear: both;
position: fixed;
bottom: 250px;
right: 0px;
}
#footer .viewing {display: none;}
div#footer a, div#footer a:link{color: #aaa;}
div#footer a:hover{color: #ddd; text-decoration: none; background: transparent!important; color: #91ADA9;}
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-family: georgia;
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: none;
font-family: georgia;
}
table.yeartable td.yearday {
background-color: #ddd;
text-align: center;
color: #fff;
}
td.yearmonth {
border-style: none;
font-family: helvetica;
font-weight: bold;
text-transform: uppercase;
color: #333;
}
/*---------comment page--------*/
.datesubjectcomment {
background-color: #fff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: #fff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border: 1px solid #ddd;
}
.box {
border: none;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #fff;
color: #000000;
font-family: georgia;
font-size: 11px;
}
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: ;
color: #000000;
}
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: georgia, sans-serif;
color: #555;
}
.commentbox {
border: none;
padding: 10px;
margin: 10px;
background-color: #ddd;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #ffffff;}
.datesubjectcomment a:hover {color: #;}
.commentboxpartial {
border: none;
padding: 10px;
margin: 10px;
background-color: #fff;
}
.commentinfo {
background-color: #;
margin-top: 10px;
width: 100%;
}
.skiplinks {text-align: center; font-family: georgia; font-style: italic;}
.skiplinks a:hover{background: transparent!important; color: #fff;}
/*--------lj taglist------*/
#maincontent h2{font-family: georgia;}
.ljtaglist a{font-family: georgia; }
.ljtaglist a:hover{background: transparent!important; color: #fff;}
/*----------disabled------------*/
#lj_controlstrip_new{display: none;}
/*---------misc--------*/
.clear {height: 15px;}
div.ContextualPopup div.Inner{
width: 235px;
color: #666666!important;
padding: 10px;
font: normal 7pt arial;
}
div.ContextualPopup .Content{
border: none;
}
div.ContextualPopup .Userpic{
padding: 10px;
background-color: #FFFFFF;
margin: 0px;
border: 1px solid #efefef;
}
/*----------links----------------*/
a, a:link, a:visited {
color: #91ADA9;
text-decoration: none;
}
a:hover {
color: #444;
text-decoration: none;
background: #91ADA9;
}
blockquote {font-size: 11px; background: #f4f4f4; padding: 5px; color: #777; }
code, kbd, pre, tt {
font-family: monospace;
}
b, s, i, u {color: #91ADA9;}
b:hover, s:hover, u:hover, i:hover{color: #fff; background: #91ADA9; padding: 2px; }
/*---------tiny icons--------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"]{display: none;}
Features
Hovering sidebar (HOVER THE BOTTOM OF THE LAYOUT TO MAKE THE SIDEBAR APPEAR)
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.
Colors
Blue Granite | #91ada9
Questions
!!!; If you have a question or need help with a layout, please 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