thirty five ∞ flexible squares
XXXV | Boston
XXXV; Boston
LIVE PREVIEWS
Blue | Mint | Lavendar
style
S2; Flexible Squares
accounts
Basic & Paid
browsers
All
Resolutions
works in all, but best in 1280x1024
disabled features
title, 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
DOWNLOAD; Lavendar | Mint (original blue version in text box below)
/*-------------------------------------------
NAME: Boston (original)
STYLE: S2 | Flexible Squares
ACCOUNTS: basic & paid
TINY ICONS:
CREDIT: apologize @ jealouss
---------------------------------------------*/
/*---------page--------*/
body {
background: #e4e5e0;
text-align: center;
color: #000000;
font-family: helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
/*---------body--------*/
#content{
width: 800px;
margin-left: auto; margin-right: auto;
background-color: transparent!important;
border: none;
padding: 15px;}
#maincontent {
margin-top: 15px;
font-family: helvetica, sans-serif;
font-size: 11px;
background-color: #transparent!important;
color: #000000;
border: none;
margin-left: 280px;
text-align: left;}
/*---------header--------*/
#header {
border: none;
background-color: transparent!important;
color: #000000;}
div#header a, div#header a:link, div#header a:visited {color: #fff;}
div#header a:hover {
color: #222;
text-decoration: none;}
.title {
font-family: century, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 100%;
position: absolute;
top: 30px;
left: 135px;
right: 0px;
width: auto;
}
.subtitle{
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;}
ul.navheader{
padding: 0px;
margin: 0px;
text-align: left;
position: fixed;
top: 60px;
left: 320px;
z-index: 20;
font-family: helvetica;
width: 12%;
}
ul.navheader li {
display: block;
padding:0 3px 0 3px;
background: rgba(255, 255, 255, .45);
margin-top: 2px;
}
ul.navheader li:hover{background: rgba(255, 255, 255, .45); width: 35%; font-weight: bold;}
/*---------entries--------*/
.subcontent {}
.entry {
margin: 0px;
padding: 10px;
background: #fff8fc;
color: #666;
font-family: helvetica, sans-serif;
font-size: 11px;
text-align: justify;
border: none;
}
.userpic {
position: relative;
float: right;
background: #e4e5e0;
padding: 0 0 0 7px;
margin: 0px;
z-index: 15;
border: none;
}
.userpic img{height: 75px; width: 75px;}
.date {
position: relative;
margin-left: 550px;
width: 100px;
line-height: 80%;
top: 5px;
padding: 2px;
text-align: center;
color: #000000;
font-family: courier new, sans-serif;
font-size: 8px;
text-transform: uppercase;
background: #eee;
opacity: .5;
z-index: 20;
height: 10px;
}
.subject {
font-weight: normal;
padding: 10px;
color: #000000;
font-family: century!important;
font-size: 15px;
font-style: italic;
}
.subject a, .subject a:link, .subject a:visited {color: #ffffff;}
.subject a:hover {color: #222; text-decoration: none;}
.datesubject {
background-color: #279ed6;
padding: 36px 5px 0px 2px;
}
.entry ul li{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li{
padding-left: 5px;
margin-left: 15px;
}
/*---------tags--------*/
.ljtags {}
/*---------currents--------*/
.currents{
font-family: helvetica, sans-serif;
font-size: 11px;
background: url(http://i51.tinypic.com/k3ndyv.png);
position: relative;
width: 100%;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 2px;
margin-top: 10px;
text-transform: lowercase;
color: #666;
}
/*---------comments--------*/
.comments {
font-family:century, sans-serif;
font-size: 16px;
text-align: right;
background-color: transparent!important
padding: 0px 5px 0px 5px;
position: relative;
top: 35px;
}
div.comments a, div.comments a:link, div.comments a:visited{color: #279ed6;}
div.comments a:hover {
color: #b0b9c8;
text-decoration: none;
}
/*---------separator--------*/
.separator{height: 35px;}
/*---------friends page--------*/
.userpicfriends {
position: relative;
font-size: 0px;
position: relative;
float: right;
margin: 0px;
z-index: 15;
border: none;
background: transparent!important;
text-align: right;
}
.userpicfriends img{height: 75px; width: 75px; background: #e4e5e0; padding: 0 0 0 7px;}
.userpicfriends a, .userpicfriends font{font-size: 12px; font-family: calibri; line-height: 10px; color: #279ed6; margin: 2px;}
/*---------sidebar--------*/
#sidebar {
margin-top: 15px;
background-color: #fff8fc;
font-size: 11px;
font-family: calibri;
color: #666;
width: 250px;
float: left;
text-align: justify;
position:fixed;
border-top:75px solid #279ed6;
}
.defaultuserpic {text-align: center; position: fixed; top: 50px; padding-right: 5px; background: #e4e5e0;}
.defaultuserpic img{height: 75px; width: 75px;}
.sbarbody {padding: 0px 5px 0px 5px;}
.sbarbody2 {padding: 10px 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #279ed6;}
div#sidebar a:hover {
color: #222;
text-decoration: none;
}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem{
padding-left: 15px;
list-style: none;
background: url(http://i51.tinypic.com/k3ndyv.png);
margin-top: 1px;}
li.sbaritem:hover{border-left: 15px solid #279ed6;}
/*---------footer--------*/
#footer {
width: 100%;
text-align: right;
font-family: helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: 0px;
background-color: transparent!important;
color: #000000;
border: none;
z-index: 100;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited{color: #279ed6; font-family: calibri;}
div#footer a:hover{color: #fff;}
#footer .viewing {font-weight: bold;}
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: none;
color: #fff;
border-right: 1px solid #eee;
border-top: 1px solid #eee;
background: #fff8fc;
}
table.yeartable td.yeardate{color: #279ed6;}
table.yeartable td.yearmonth{color: #fff; font-size: 14px;}
table.yeartable td.yearday {
background-color: #279ed6;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*---------comment page--------*/
.datesubjectcomment {
background-color: #279ed6;
padding: 23px;
margin-top: 0px;
}
.userpiccomment {
position: relative;
background-color: #e4e5e0;
top: -30px;
left: 0px;
padding-right: 5px;
margin: 7px 10px -20px -28px;
z-index: 15;
float: left;
height:75px;
width: 75px;
}
.box {
border: none;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #fff8fc;
color: #666;
}
textarea.textbox {width: 100% !important;}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: calibri;
font-size: 11px;
line-height: 125%;
background-color: #fff8fc;
color: #666;
}
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: calibri;
color: #666;
}
.commentbox {
border: none;;
padding: 0px 0px 10px 5px;
margin: 15px;
background-color: #fff8fc;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #ffffff;}
.datesubjectcomment a:hover {color: #333;}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #fff8fc;
}
.commentinfo {
background-color: #fff8fc;
margin-top: 10px;
width: 100%;
}
.skiplinks {text-align: center; font-weight: bold; background: url(http://i51.tinypic.com/k3ndyv.png); padding: 5px; color: #fff;}
/*----------disabled------------*/
#lj_controlstrip_new, .date, #sidebar_tags, #sidebar_calendar, #sidebar_summary, li.sbartitle, .title, .subtitle{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: #f2f2f2;
}
div.ContextualPopup div.Inner {
background-color: #fff8fc !important;
color: #828282 !important;
border-top: 15px solid #279ed6;
border-bottom: 1px solid #ddd;
border-left: none; border-right: none;
padding: 10px;
width: 250px;
}
div.ContextualPopup .Relation {
font: normal normal 15px century, sans-serif;
color:#555;
letter-spacing:-1px;
border-bottom:1px solid #cccccc;
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: #222;
text-decoration: none;
}
a:hover {
color: #279ed6;
text-decoration: none;
}
p, td, blockquote {
font-size: 11px;}
code, kbd, pre, tt {
font-family: monospace;
}
b, s, i, u, big, small {font-family: calibri; color: #279ed6;}
/*---------tiny icons--------*/
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
display: none;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 15px 16px 0px 0px;
background: url(http://i47.tinypic.com/53nvki.jpg);
display: none;
}
Features
none
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.
Additionally, you may need to adjust the navigation links in resolutions smaller than 1280x1024. The layout will still work in small resoultions, but adjustments to the nav links need to be made.
Colors
Just open up word pad, note pad, or something similar to those and do a simple find/replace in order to change the current color (one of the below) to something different.
Blue | #279ed6
Lavendar | #9c90cb
Mint | #aae0c8
Light Fuchsia | #e5b6df (this isn't one of the download options, I changed the color for the comm but just do a find/replace with one of the other colors and replace it with the fuchsia)
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
XXXV; Boston
LIVE PREVIEWS
Blue | Mint | Lavendar
style
S2; Flexible Squares
accounts
Basic & Paid
browsers
All
Resolutions
works in all, but best in 1280x1024
disabled features
title, 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
DOWNLOAD; Lavendar | Mint (original blue version in text box below)
/*-------------------------------------------
NAME: Boston (original)
STYLE: S2 | Flexible Squares
ACCOUNTS: basic & paid
TINY ICONS:
CREDIT: apologize @ jealouss
---------------------------------------------*/
/*---------page--------*/
body {
background: #e4e5e0;
text-align: center;
color: #000000;
font-family: helvetica, sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}
/*---------body--------*/
#content{
width: 800px;
margin-left: auto; margin-right: auto;
background-color: transparent!important;
border: none;
padding: 15px;}
#maincontent {
margin-top: 15px;
font-family: helvetica, sans-serif;
font-size: 11px;
background-color: #transparent!important;
color: #000000;
border: none;
margin-left: 280px;
text-align: left;}
/*---------header--------*/
#header {
border: none;
background-color: transparent!important;
color: #000000;}
div#header a, div#header a:link, div#header a:visited {color: #fff;}
div#header a:hover {
color: #222;
text-decoration: none;}
.title {
font-family: century, sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 100%;
position: absolute;
top: 30px;
left: 135px;
right: 0px;
width: auto;
}
.subtitle{
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;}
ul.navheader{
padding: 0px;
margin: 0px;
text-align: left;
position: fixed;
top: 60px;
left: 320px;
z-index: 20;
font-family: helvetica;
width: 12%;
}
ul.navheader li {
display: block;
padding:0 3px 0 3px;
background: rgba(255, 255, 255, .45);
margin-top: 2px;
}
ul.navheader li:hover{background: rgba(255, 255, 255, .45); width: 35%; font-weight: bold;}
/*---------entries--------*/
.subcontent {}
.entry {
margin: 0px;
padding: 10px;
background: #fff8fc;
color: #666;
font-family: helvetica, sans-serif;
font-size: 11px;
text-align: justify;
border: none;
}
.userpic {
position: relative;
float: right;
background: #e4e5e0;
padding: 0 0 0 7px;
margin: 0px;
z-index: 15;
border: none;
}
.userpic img{height: 75px; width: 75px;}
.date {
position: relative;
margin-left: 550px;
width: 100px;
line-height: 80%;
top: 5px;
padding: 2px;
text-align: center;
color: #000000;
font-family: courier new, sans-serif;
font-size: 8px;
text-transform: uppercase;
background: #eee;
opacity: .5;
z-index: 20;
height: 10px;
}
.subject {
font-weight: normal;
padding: 10px;
color: #000000;
font-family: century!important;
font-size: 15px;
font-style: italic;
}
.subject a, .subject a:link, .subject a:visited {color: #ffffff;}
.subject a:hover {color: #222; text-decoration: none;}
.datesubject {
background-color: #279ed6;
padding: 36px 5px 0px 2px;
}
.entry ul li{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li{
padding-left: 5px;
margin-left: 15px;
}
/*---------tags--------*/
.ljtags {}
/*---------currents--------*/
.currents{
font-family: helvetica, sans-serif;
font-size: 11px;
background: url(http://i51.tinypic.com/k3ndyv.png);
;){kind=link}
position: relative;
width: 100%;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 2px;
margin-top: 10px;
text-transform: lowercase;
color: #666;
}
/*---------comments--------*/
.comments {
font-family:century, sans-serif;
font-size: 16px;
text-align: right;
background-color: transparent!important
padding: 0px 5px 0px 5px;
position: relative;
top: 35px;
}
div.comments a, div.comments a:link, div.comments a:visited{color: #279ed6;}
div.comments a:hover {
color: #b0b9c8;
text-decoration: none;
}
/*---------separator--------*/
.separator{height: 35px;}
/*---------friends page--------*/
.userpicfriends {
position: relative;
font-size: 0px;
position: relative;
float: right;
margin: 0px;
z-index: 15;
border: none;
background: transparent!important;
text-align: right;
}
.userpicfriends img{height: 75px; width: 75px; background: #e4e5e0; padding: 0 0 0 7px;}
.userpicfriends a, .userpicfriends font{font-size: 12px; font-family: calibri; line-height: 10px; color: #279ed6; margin: 2px;}
/*---------sidebar--------*/
#sidebar {
margin-top: 15px;
background-color: #fff8fc;
font-size: 11px;
font-family: calibri;
color: #666;
width: 250px;
float: left;
text-align: justify;
position:fixed;
border-top:75px solid #279ed6;
}
.defaultuserpic {text-align: center; position: fixed; top: 50px; padding-right: 5px; background: #e4e5e0;}
.defaultuserpic img{height: 75px; width: 75px;}
.sbarbody {padding: 0px 5px 0px 5px;}
.sbarbody2 {padding: 10px 15px 0 15px;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #279ed6;}
div#sidebar a:hover {
color: #222;
text-decoration: none;
}
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem{
padding-left: 15px;
list-style: none;
background: url(http://i51.tinypic.com/k3ndyv.png);
margin-top: 1px;}
li.sbaritem:hover{border-left: 15px solid #279ed6;}
/*---------footer--------*/
#footer {
width: 100%;
text-align: right;
font-family: helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: 0px;
background-color: transparent!important;
color: #000000;
border: none;
z-index: 100;
clear: both;
}
div#footer a, div#footer a:link, div#footer a:visited{color: #279ed6; font-family: calibri;}
div#footer a:hover{color: #fff;}
#footer .viewing {font-weight: bold;}
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: none;
color: #fff;
border-right: 1px solid #eee;
border-top: 1px solid #eee;
background: #fff8fc;
}
table.yeartable td.yeardate{color: #279ed6;}
table.yeartable td.yearmonth{color: #fff; font-size: 14px;}
table.yeartable td.yearday {
background-color: #279ed6;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*---------comment page--------*/
.datesubjectcomment {
background-color: #279ed6;
padding: 23px;
margin-top: 0px;
}
.userpiccomment {
position: relative;
background-color: #e4e5e0;
top: -30px;
left: 0px;
padding-right: 5px;
margin: 7px 10px -20px -28px;
z-index: 15;
float: left;
height:75px;
width: 75px;
}
.box {
border: none;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #fff8fc;
color: #666;
}
textarea.textbox {width: 100% !important;}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: calibri;
font-size: 11px;
line-height: 125%;
background-color: #fff8fc;
color: #666;
}
.replytosubject {font-weight: bold;}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: calibri;
color: #666;
}
.commentbox {
border: none;;
padding: 0px 0px 10px 5px;
margin: 15px;
background-color: #fff8fc;}
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #ffffff;}
.datesubjectcomment a:hover {color: #333;}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #fff8fc;
}
.commentinfo {
background-color: #fff8fc;
margin-top: 10px;
width: 100%;
}
.skiplinks {text-align: center; font-weight: bold; background: url(http://i51.tinypic.com/k3ndyv.png); padding: 5px; color: #fff;}
/*----------disabled------------*/
#lj_controlstrip_new, .date, #sidebar_tags, #sidebar_calendar, #sidebar_summary, li.sbartitle, .title, .subtitle{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: #f2f2f2;
}
div.ContextualPopup div.Inner {
background-color: #fff8fc !important;
color: #828282 !important;
border-top: 15px solid #279ed6;
border-bottom: 1px solid #ddd;
border-left: none; border-right: none;
padding: 10px;
width: 250px;
}
div.ContextualPopup .Relation {
font: normal normal 15px century, sans-serif;
color:#555;
letter-spacing:-1px;
border-bottom:1px solid #cccccc;
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: #222;
text-decoration: none;
}
a:hover {
color: #279ed6;
text-decoration: none;
}
p, td, blockquote {
font-size: 11px;}
code, kbd, pre, tt {
font-family: monospace;
}
b, s, i, u, big, small {font-family: calibri; color: #279ed6;}
/*---------tiny icons--------*/
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(http://i48.tinypic.com/9bhrnl.jpg);
;){kind=link}
display: none;
}
.subject img[src="http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 15px 16px 0px 0px;
background: url(http://i47.tinypic.com/53nvki.jpg);
;){kind=link}
display: none;
}
Features
none
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.
Additionally, you may need to adjust the navigation links in resolutions smaller than 1280x1024. The layout will still work in small resoultions, but adjustments to the nav links need to be made.
Colors
Just open up word pad, note pad, or something similar to those and do a simple find/replace in order to change the current color (one of the below) to something different.
Blue | #279ed6
Lavendar | #9c90cb
Mint | #aae0c8
Light Fuchsia | #e5b6df (this isn't one of the download options, I changed the color for the comm but just do a find/replace with one of the other colors and replace it with the fuchsia)
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