s2 flexible squares - Spring
Layout 06 - Spring
01. Title: Spring
02. System: S2
03. Theme: Flexible Squares
04. Header: no
05. Sidebar: yes
06. Works with: Free, sponsored and paid accounts
07. Best viewed with: Firefox
- Credit, please! thesamegirl17
- I love comments *_*
- You can use the css with an header.
/* Cleaned CSS: */
/* Cleaned CSS: */
/*------------------------------------
Spring |
Layout by TheSameGirl |
http://thesamegirl17.livejournal.com/ | 2010
style -- Flexible Squares / s2
--------------------------------------*/
/*------------------------------------
COLORS
bg: #cbdb97
subject:#669933
text: #999999
link: #cbdb97
link hover: #f5d786
bold: #f5d786
comment: #f69d02
If you want to write something different in your sidebar here you can download the KiloGram Font
http://imjustcreative.com/kilogram-font-free-heavy-display-font-for-download/2010/02/24/
------------------------------------------------------*/
/*------------------------------------------------------
BASIC
------------------------------------------------------*/
body {
text-align: left;
color: #999999;
font-family: trebuchet ms;
font-size: 11px;
margin: 0px 0;
background-color: #ccdb98;
}
a, a:link, a:visited {
color: #ccdb98;
font-size: 11px;
text-decoration: none;
font-family: trebuchet ms;
font-weight: bold;
}
a:hover {
color: #f5d786;
}
p, td, blockquote {
font-size: 11px;
}
strong, b {
color: #f5d786;
font-weight: bold;
font-family: trebuchet ms;
}
blockquote {
margin: 10px;
padding: 15px;
border-color: #f3d787;
border-style:solid;
border-left-width:10px;
border-right-width:0px;
border-top-width:0px;
border-bottom-width:0px;
background-image: url(http://...); /* paste the url of the bg quote image 06_bg_quote.jpg*/
background-repeat: repeat;
background-position: top left;
color: #999999;
line-height: 14pt;
font-style: italic;
}
code, kbd, pre, tt {
font-family: trebuchet ms;
}
#content
{background-color: #ccdb98;
width:890px;
font-size:10px;
margin-left: auto;
margin-right: auto;
min-height:;
padding:0;
}
.subcontent {
background-color: #ffffff;
background-image: url(http://...); /* paste the url of the bg quote image 06_bg.jpg */
background-repeat: repeat-y;
background-position: left;
}
#maincontent
{ margin: 0px;
padding: 0px;
color:#999999;
font-family:arial;
font-size:10px;
float:right;
text-align:left;
width:600px;
background-color: #ccdb98;
}
#sidebar {
width: 235px;
height:100%;
padding: 0;
margin-left: 0px;
background-color: #ccdb98;
color: #669933;
line-height: 11pt;
float:left;
border: 0px;
position:fixed;
text-align: center;
text-transform: uppercase; }
#header { width: 100%;
height: 30px;
color: #ffffff;
text-align: right;
font-family: trebuchet ms;
font-weight: bold;
font-size: 12px;
text-transform: lowercase;
background-color: #ccdb98;
padding-top: 10px
}
#footer {
width: 600px;
line-height: 60px;
margin-bottom: 0px;
padding-bottom: 0px;
padding-left: 270px;
color: #ffffff;
text-align: right;
font-family: trebuchet ms;
font-weight: bold;
font-size: 12px;
text-transform: lowercase;
background-color: #ccdb98;
}
.title {
display: none;
}
.subtitle {
display: none;
}
h2 {color: #669933;
font-size: 14pt;
font-weight: bold;
font-family: trebuchet ms;
padding-left: 40px;
margin: 0px;
background-color: #ffffff;}
/*-----------------------
| HEADER IMAGE |
-------------------------*/
.headerimage {
position: relative;
width: 0px;
height: 03px;
}
/*------------------------------------------------------
HEADER
links to views; title of journal; subtitle of journal
------------------------------------------------------*/
div#header a, div#header a:link, div#header a:visited {
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
}
div#header a:hover {
color: #669933;
font-size: 12px;
text-transform: uppercase;
}
ul.navheader {
padding-left: 80px;
background-color: none;
margin: 0px;
}
ul.navheader li {
display: inline;
padding-left: 0px;
padding-right: 10px;
}
ul.navheader li:hover {
background-color: none;
}
/*------------------------------------------------------
SIDEBAR
calendar; text; link
------------------------------------------------------*/
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #ffffff;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
}
div#sidebar a:hover {
color: #669933;
text-decoration: none;
text-transform: uppercase;
}
.defaultuserpic {
text-align: center;
border-color: 0px;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
div#sidebar b {
color: #ffffff;
font-weight: bold;}
.sbarbody2 {
padding: 0 6px 0 6px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding: 1px;
border: 1px solid #FFFFFF;
background: #;
text-align: right;
color: #FFFFFF;
font-size: 7pt;
}
.sbarcalendarposts {
padding: 1px;
border: 1px solid #FFFFFF;
background: #;
text-align: right;
color: #FFFFFF;
font-size: 7pt;
}
ul.sbarlist {
margin-left: 0px;
list-style: none;
padding-left: 0px;
}
li.sbaritem {
margin: 2px 0px 2px 0px;
padding: 2px 0px 2px 0px;
list-style: none;
background-color: #FDFDFD;
background-image: url('');
background-repeat: repeat;
border-bottom: 1px #cccccc solid;
}
li.sbaritem:hover {
background-color: #669933;
background-image: url('');
background-repeat: repeat;
}
li.sbartitle {
list-style: none;
margin: 0px;
text-align: left;
color: #669933;
font-family: "verdana" Helvetica, sans-serif;
font-size: 8pt;
border: 0px;
text-transform: lowercase;
letter-spacing: 1px;
background: url('') 0px 0px no-repeat;
}
ul.ljtaglist li{
padding: 0px;
margin: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}
/*------------------------------------------------------
MAINCONTENT
------------------------------------------------------*/
/*-----------------------
| entry |
-------------------------*/
.entry {
margin: 10 0 10 0;
padding: 5px;
background-color: #;
color: #999999;
font-family: trebuchet ms;
font-size: 11px;
text-align: justify;
border: 0px;
line-height: 14pt;
}
.entry_text {
margin-top: 0px;
padding-left: 80px;
padding-right: 10px;}
.entry ul li
{
padding-left: 0px;
margin-left: 0px;
}
.entry ol li
{
padding-left: 0px;
margin-left: 0px;
}
.userpic {background-color:#ffffff;
color:#EEEEEE;
float: left;
margin: 15px 10px 0px -50px;
padding:18px;
position:relative;
text-align:center;
z-index:100;
}
.userpic img, .userpicfriends img { width: 65px; height: 65px; }
.userpicfriends {background-color:#ffffff;
color:#EEEEEE;
float: left;
margin: 15px 10px 0px -50px;
padding:18px;
position:relative;
text-align:center;
z-index:100;
}
.userpicfriends text {
color: #deb291 !important;
}
.date { font-family: Helvetica, Arial, sans-serif;
line-height: 10px;
font-size: 11px;
color: #cccccc;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0px;
padding-left: 0px;
padding-top: 30px;
background-color: #;
padding-left: 20px;
text-align: center;
}
.subject a, .subject a:link, .subject a:visited, .subject {
padding-top: 5px;
color: #669933;
font-weight: bold;
font-family: trebuchet ms;
font-size: 14px;
background-color: #;
border: 0;
margin-bottom: 20px;
padding-left: 0px;
text-align: center;
}
.subject a:hover {
color: #f5d786;
}
.datesubject {
}
.subject img[src="http://l-stat.livejournal.com/img/icon_protected.gif"]
{ width: 0; height: 0;
padding-top : 12px;
padding-bottom : 4px;
padding-left : 16px;
padding-rigth : 7px;
background: url(http://...); } /* paste the url of the lock image */
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]
{ width: 0; height: 0;
padding-top : 12px;
padding-bottom : 4px;
padding-left : 16px;
padding-rigth : 7px;
background: url(http://...); } /* paste the url of the lock image */
.subject img[src="http://p-stat.livejournal.com/img/icon_groups.gif"]
{ width: 0; height: 0;
padding-top : 12px;
padding-bottom : 4px;
padding-left : 16px;
padding-rigth : 7px;
background: url(http://...); } /* paste the url of the lock image */
.comments {
font-size: 11px;
font-family: Helvetica, Arial, sans-serif;
text-align: center;
background-color: #;
padding-top : 7px;
padding-bottom : 7px;
padding-left : 0px;
padding-rigth : 0px;
position: relative;
margin-left: 80px;
margin-right: 10px;
margin-top: 5px;
color: #f69d02;
border-top: 1px solid #f5d786;
text-transform: uppercase;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #f69d02;
font-size: 11px;
}
div.comments a:hover {
color: #669933;
text-decoration: none;
}
/*--------------------------------
| current: mood, music and tags |
----------------------------------*/
.ljtags {
margin-top: 10px;
margin-bottom: 10px;
font-weight: normal;
text-transform: lowercase;
line-height: 16px;
}
.ljtags strong { font-weight:normal; color: #cccccc; }
.currents strong { font-weight:normal; color: #cccccc; }
.currentlocation {
text-transform: lowercase;
line-height: 16px;
color: #e8bd4b;
font-size: 10px;
margin-left: 80px;
}
.currentmusic {
text-transform: lowercase;
line-height: 16px;
color: #e8bd4b;
font-size: 10px;
margin-left: 80px;
}
.currentmood {
margin-left: 80px;
text-transform: lowercase;
color: #e8bd4b;
font-size: 10px;}
/*-----------------------
| ljuser and community |
-------------------------*/
.ljuser img
{width: 0;
height: 0;
background: transparent url(http://...) no-repeat 0 0; /* paste the url of the user image */
padding: 14px 16px 0px 0px !important;
vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"]
{background: transparent url(http://...) no-repeat center left !important; /* paste the url of the user image */
padding: 14px 16px 0px 0px !important;}
.ljuser img[src*="community.gif"]
{background: transparent url(http://...) no-repeat scroll 0 0 !important; /* paste the url of the comm image */
padding: 14px 20px 0px 0px !important;}
.subject .ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"] { margin-left: 5px; }
.subject .ljuser img[src="http://l-stat.livejournal.com/img/community.gif"] { margin-left: 5px;}
/*-----------------------
| reply pages |
-------------------------*/
.box {background-color: #;
border: 0px;
padding: 0px 0px 0px 60px;
}
.datesubjectcomment {
background-color: #f5f8ea;
padding: 5px;
margin: 0px;
}
.userpiccomment {position: relative;
float: left;
background-color: #ffffff;
padding: 20px;
margin-left: -50px;
margin-top: 5px;
margin-right: 10px;
z-index: 15;
max-width: 65px;
max-height: 65px;}
input, textarea {
border: 0px;
background-color: #f5f8ea;
color: #999999;
}
textarea.textbox {
width: 100% !important;
}
.qrformdiv {
margin-left: 10px;
background-color: #f5f8ea;
}
.reply {
border: 0px;
position: relative;
margin: 0px;
padding: 0px;
text-align: left;
line-height: 14pt;
background-color: #f5f8ea;
color: #999999;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
border: 0px;
position: relative;
margin: 0 0 10 0;
color: #999999;
line-height: 14pt;
background-color: #f5f8ea;
}
.commentbox {
border-top: 0px solid #ececec;
padding: 10px;
margin: 10px;
background-color: #f5f8ea;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #0099ff;
}
.datesubjectcomment a:hover {
color: #ff9900;
}
.commentboxpartial {
border: 1px solid #ececec;
padding: 10px;
margin: 10px;
background-color: #f5f8ea;
}
.commentinfo {
background-color: #f5f8ea;
margin-top: 10px;
width: 100%;
border: 0px solid #ececec;
}
/*-----------------------
| tags page |
-------------------------*/
.ljtaglist {
list-style-type:none;
margin: 0px;
padding-left: 60px;
background-color:#ffffff;
}
/*-----------------------
| archive pages |
-------------------------*/
ul.year {background-color: #ffffff;
text-align: center;
padding-bottom: 20px;
}
ul.year li {padding-top: 10px;
display: inline;
padding: 0px;
}
table.yeartable {
background-color: #ffffff;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #669933;
background-color: #ffffff;
}
table.yeartable td.yearday {
background-color: #ffffff;
text-align: center;
border-width: 0px;
}
td.yearmonth {
background-color: #ffffff;
text-align: center;
border-width: 0px;
}
/*-----------------------
FOOTER
-------------------------*/
div#footer a, div#footer a:link, div#footer a:visited {
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
}
div#footer a:hover {
color: #669933;
font-size: 12px;
text-transform: uppercase;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0;
}
/* misc */
.clear {
height: 0px;
}
.skiplinks {
text-align: center;
background-color:#FFFfff;
}
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*-----------------------
POPUP
-------------------------*/
/*general positioning*/
div.ContextualPopup {
margin: 0px 0 0 0px;
font: normal 10px trebuchet ms, sans-serif, arial !important;
}
/* attaches border to user icon*/
div.ContextualPopup img {
border: 0;
}
/*defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background:transparent!important;
color: #999999!important;
border: 0px solid #ffffff;
padding: 0px;
width: 250px;
font-family:trebuchet ms;
}
/*defines left side of popup without the user icon*/
div.ContextualPopup .Content {
padding:7px 7px 7px 7px;
margin-right:0px;
line-height: 1.4;
background: #ffffff;
border: 1px solid #cbdb97;
}
/*defines the text that shows the relation to the user (XYZ is your mutual friend) */
div.ContextualPopup .Relation {
letter-spacing:1px;
border-bottom: 1px solid #cbdb97;
margin-bottom:4px;
padding-bottom:4px;
color: #669933;
}
/* look of words LJ Talk */
div.ContextualPopup .Content .OnlineStatus {
font-weight: bold;
}
/*element that contains the user icon*/
div.ContextualPopup .Userpic {
padding: 5px;
background:#fffffff;
margin:5px;
border:0px;
}
/* defines the look of the links*/
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #999999 !important;
}
Text to be added to the sidebar (sidebar options)
| Lorem ipsum dolor sit amet. I LOVE... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Links | Link1 - Link2 - Link3 - Link4 - Link5 - Link6 - Link7 - Link8 - Link9 |
If you want to change the quote in the sidebar you can download here the KiloGram Font. It's important that the width of the image is 220px.
Instructions
01. Copy the CSS and DOWNLOAD the zip with the images.
02. Upload images to your image server and replace the URL's within the CSS.
03. In the customize page select Flexible Squares as your theme.
04. Go to custom options and then to Custom CSS.
05. Select NO in all the drop down boxes.
06. Copy and paste the CSS into the Custom stylesheet box and save changes.