Twenty Two

[apologize]

XX!! | Treaty of 1918





XXII; TREATY OF 1918
LIVE PREVIEWS

Treaty

style

S2; Flexible Squares

accounts

Basic & Paid

browsers

Firefox, Safari, Chrome, Opera (does not work well in IE)

Resolutions

1280 x 720+

disabled features

control strip, sidebar, subtitle, and repost settings*

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: Treaty of 1918
STYLE: S2 | Flexible Squares
ACCOUNTS: basic & paid
TINYICONS: brand spanking new
CREDIT: apologize @ jealouss
----------------------------------*/

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

body {
background: #f6f6f6;
text-align: center;
color: #777;
font-family: arial, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

#lj_controlstrip{display: none;}
.clear{display: none;}
.b-repost-item {display:none}
/*---------body--------*/

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

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

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

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

.headerimage {
}

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

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

.title {
font-family: arial black;
font-size: 51px;
text-transform: uppercase;
font-weight: normal;
line-height: 100%;
text-align: left;
letter-spacing: -3px;
top: 0px;
left: 0px;
position: absolute;
width: 98%;
z-index: -1;
}

.subtitle{
display: none;
}

ul.navheader{
padding: 0px;
margin: 0px;
position: absolute;
left: 0px;
top: 45px;
width: 99%;
}

ul.navheader li:hover{width:13%;}
ul.navheader li {
display: block;
font-family: courier new;
font-size: 12px;
text-align: left;
font-weight: lighter;
padding: 0 3px 0 3px;
background: #ffdf2d;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;

}

/*---------entries--------*/

.subcontent {}
.entry_text{padding: 0px; margin: 0px 0px 0px 0px;}

.entry {
margin: 0px 0px 0px 0px;
padding: 10px;
background-color: #fff;
color: #999;
font-family: arial;
font-size: 11px;
text-align: justify;
border: 1px solid #eee;
}

.entry_text img{border: 1px solid #eee; padding: 10px; opacity: .60;}
.entry_text img:hover{opacity: 1;}

.ljuser img{border: none; padding: 0px; opacity: 1;}

.userpic {
position: relative;
float: right;
background-color: #fff;
padding: 7px;
margin: 0px 5px 5px 0px;
z-index: 15;
border: 1px solid #eee;
right: -130px;
top: 20px;

}

.date {
line-height: 0%;
top: 5px;
color: #555;
text-transform: uppercase;
font-family: courier new, arial;
font-size: 9px;
width: 20%;
position: relative;
float: right;
right: -288px;
}

.subject {
font-weight: lighter;
padding: 0px;
color: #000000;
font-family: calibri;
text-transform: uppercase;
font-size: 15px;
text-align: left;
}

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

.subject a:hover {color: #777; text-decoration: none;}

.datesubject {
background-color: #f4f4f4;
padding: 5px;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
}

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

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

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

.ljtags{
padding: 0px 5px 0px 15px;
margin-left: 5px;
font-family: arial;
font-size: 11px;
text-align: left;
font-weight: lighter;
margin-top: 25px;
color: #777;
text-transform: lowercase;
line-height: 10px;
background: url(http://i37.tinypic.com/25s9yzn.gif) no-repeat;
border-bottom: none; }

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

.currents{
font-family: arial, sans-serif;
font-size: 11px;
border-top:1px solid #eee;
text-transform:;
margin-top: 5px;
margin-left: 0px;
padding: 5px 5px 5px 5px;
}

.currents strong{display: none;}

.currentmusic {
padding: 0px 0px 0px 12px;
margin-top: 5px;

line-height: 12px;
background: url(http://i37.tinypic.com/20aqxqx.gif) no-repeat; opacity:1;}

.currentmood{padding-left: 0px;opacity: 1;}
.meta-mood-img{margin-right: 5px;}

.currentlocation{
padding: 0 0 0 12px;
margin-bottom: 5px;
line-height: 10px;
background: url(http://i33.tinypic.com/atm0iq.gif) no-repeat;}

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

.comments {
font-family: courier new, sans-serif;
font-size: 11px;
text-align: right;
background-color: #f4f4f4;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
left: 0px;
text-transform: uppercase;
width: 101.2%;
margin-left: -10.7px;
border: 1px solid #eee;
}

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

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

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

.separator{height: 35px;}

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

.userpicfriends {
position: relative;
float: right;
background-color: #fff;
padding: 0px;
margin: 0px;
z-index: 15;
border: 1px solid #eee;
right: -130px;
top: 20px;
font-size:10px;
text-align: center;
font-family: courier new;
text-transform: uppercase;
}

.userpicfriends img{background-color: #fff; padding: 5px;}

/*---------sidebar--------*/

#sidebar {
padding-top: 0px;
margin-top: 0px;
background-color: transparent!important;
border: none;
font-size: 12px;
letter-spacing: 2px;
font-family: courier new, sans-serif;
color: #000000;
width: 100px;
float: right;
text-align: left;
display: none;
}

.defaultuserpic {
text-align: center;
display: none;
}

.sbarheader {}

.sbarbody {
padding: 0px 5px 0px 5px;
position: absolute;
left: -3px;
top: 120px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
display: none;
}

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

div#sidebar a:hover {
color: #7aa1f8;
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: 0px;
list-style: none;
background: #ffdf2d;
margin-top: 5px;
}

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: 100%;
text-align: left;
font-family: courier new, sans-serif;
font-size: 14px;
font-weight: lighter;
letter-spacing: 1px;
background-color: #f4f4f4;
color: #000000;
border-color: #eee;
border-width: 1px;
border-style: solid;
z-index: 100;
clear: both;
text-transform: uppercase;
}

#footer .viewing {display: none;}

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

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;
}

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #eee;
}

table.yeartable td.yearday {
background-color: #f4f4f4;
text-align: center;
}

td.yearmonth {
border-style: none;
}

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

.datesubjectcomment {
background-color: #f4f4f4;
padding: 5px;
margin-top: 20px;
border: 1px solid #eee;
}

.userpiccomment {
position: relative;
border: none;
background-color: #f4f4f4;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #eee;
border-style: solid;
}

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

input, textarea {
background-color: #fff;
color: #777;
font-family: arial;
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: arial, sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #fff;
color: #000000;
}

.replytosubject {font-weight: bold;}

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

.commentbox {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #fff;
}

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

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

.commentboxpartial {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #fff;
}

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

.skiplinks {text-align: center; font-family: courier new; text-transform: uppercase; color:#777;}

/*---------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: #555;
text-decoration: none;
}

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

p, td, blockquote {
font-size: 11px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 7px;
color: #555;}

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

b, i, u, s, big, small{color: #ffdf2d; font-family: courier new; text-transform: uppercase;}

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

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

img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i36.tinypic.com/jqrwxe.gif) no-repeat !important; padding: 10px 3px 0 10px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i34.tinypic.com/dm8uwk.gif) no-repeat !important; padding: 10px 3px 0 10px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i53.tinypic.com/wu40ac.gif) no-repeat !important; padding: 10px 3px 0 10px !important; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i33.tinypic.com/24188zd.gif) no-repeat !important; padding: 10px 3px 0 10px !important; }

Features
fading images

Additional Customization
i've changed the code a bit to reflect the issues people were having with the usernames on their friends page not showing up. the code now in the text box above has been changed to allow them to show up. so just install that code, and everything should work

Credits

tiny icons by brandspankingnew

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.
FAQ | HOW TO CREDIT

like what you see?

watch | more layouts