Layout 05 - Paper
01. Title: Paper
02. System: S2
03. Theme: Flexible Squares
04. Header: no
05. Sidebar: yes
06. Works with: Free and sponsored accounts (not tested it in a paid)
07. Best viewed with: Firefox
- Credit, please!
thesamegirl17- I love comments *_*
- You can use the css with an header.
/* Cleaned CSS: */
/*------------------------------------
Paper |
Layout by TheSameGirl |
http://thesamegirl17.livejournal.com/ | 2010
style -- Flexible Squares / s2
--------------------------------------*/
/*------------------------------------
COLORS
subject:#ff9900
text: #999999
link: #0099ff
link hover: #ff9900
bold: #cc3399
------------------------------------------------------*/
/*------------------------------------------------------
BASIC
------------------------------------------------------*/
body {
text-align: left;
color: #999999;
font-family: trebuchet ms;
font-size: 11px;
margin: 0px 0;
background-color: #ececec;
}
a, a:link, a:visited {
color: #0099ff;
font-size: 11px;
text-decoration: none;
font-family: trebuchet ms;
font-weight: bold;
text-transform: lowercase;
}
a:hover {
color: #ff9900;
}
p, td, blockquote {
font-size: 11px;
}
strong, b {
color: #cc3399;
font-weight: bold;
font-family: trebuchet ms;
}
blockquote {
margin: 10px;
padding: 15px;
border: 0px;
background-image: url(
http://...); /* paste the url of the bg quote image */
background-repeat: no-repeat;
background-position: top left;
color: #bbbbbb;
line-height: 14pt;
font-style:italic;
}
code, kbd, pre, tt {
font-family: trebuchet ms;
}
#content {width: 520px;
margin-left: auto;
margin-right: auto;
background-color: #;
background-image: url(
http://...); /* paste the url of the bg image */
background-repeat: repeat-y;
background-position: center;
border: 0px;
}
#maincontent {
margin: 0px 0px 0px 5px;
padding: 0px 0px 0px 0px;
font-family: trebuchet ms;
width: 495px;
font-size: 10px;
color: #999999;
text-align: left;
border: 0px;
background-color: #;
}
#sidebar {
width: 100%;
padding: 0px;
margin-top: 0px;
background-color: #ffffff;
color: #999999;
background-image: url(
http://...); /* paste the url of the bg sidebar image */
background-repeat: no-repeat;
background-position: center;
line-height: 11pt;
text-align: justify;
float: center;
border: 0px;
}
#header { width: 100%;
line-height: 65px;
height: 53px;
color: #adadad;
text-align: left;
font-family: trebuchet ms;
font-weight: bold;
font-size: 12px;
text-transform: lowercase;
background-color: #ececec;
background-image: url(
http://...); /* paste the url of the bg header image */
background-repeat: no-repeat;
background-position: center;
}
#footer {
width: 100%;
line-height: 60px;
height: 69px;
margin-bottom: 0px;
padding-bottom: 0px;
color: #adadad;
text-align: center;
font-family: trebuchet ms;
font-weight: bold;
font-size: 12px;
text-transform: lowercase;
background-color: #ececec;
background-image: url(
http://...); /* paste the url of the bg footer image */
background-repeat: no-repeat;
background-position: center;
}
.title {
display: none;
}
.subtitle {
display: none;
}
h2 {color: #ff9900;
font-size: 14pt;
font-weight: bold;
font-family: trebuchet ms;
padding-left: 40px;
margin: 0px;}
/*-----------------------
| HEADER IMAGE |
-------------------------*/
.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
/*------------------------------------------------------
HEADER
links to views; title of journal; subtitle of journal
------------------------------------------------------*/
div#header a, div#header a:link, div#header a:visited {
color: #adadad;
font-size: 12px;
}
div#header a:hover {
color: #ff9900;
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: 63px;
}
ul.navheader li:hover {
background-color: none;
}
/*------------------------------------------------------
SIDEBAR
calendar; text; link
------------------------------------------------------*/
div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #0099ff;
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
}
div#sidebar a:hover {
color: #ff9900;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
border-color: 0px;
}
.sbarheader {
padding: 0px 0px 0px 0px;
}
.sbarbody {
padding: 0px 0px 0px 0px;
}
.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: #dddddd;
background-image: url('');
background-repeat: repeat;
}
li.sbartitle {
list-style: none;
margin: 0px;
text-align: left;
color: #666666;
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 |
-------------------------*/
.subcontent {
padding-left: 20px;
border: 0px;
background-color: #;
}
.entry {
margin: 0 0 0 0;
padding: 5px;
background-color: #ffffff;
color: #999999;
font-family: trebuchet ms;
font-size: 11px;
text-align: justify;
border: 0px;
line-height: 14pt;
}
.entry_text {
margin-top: 0px;
padding-left: 10px;
padding-right: 10px;}
.entry ul li
{
padding-left: 0px;
margin-left: 0px;
}
.entry ol li
{
padding-left: 0px;
margin-left: 0px;
}
.userpic {position: relative;
float: left;
background-color: #ffffff;
padding: 4px 4px 4px 4px;
margin-left: 10px;
margin-top: 5px;
margin-right: 10px;
z-index: 15;
border: 1px solid #ececec;
}
.userpic img, .userpicfriends img { width: 70px; height: 70px; }
.userpicfriends {position: relative;
float: left;
background-color: #ffffff;
padding: 4px 4px 4px 4px;
margin-left: 10px;
margin-top: 5px;
margin-right: 10px;
z-index: 15;
border: 1px solid #ececec;
}
.userpicfriends text {
color: #deb291 !important;
}
.date {
line-height: 10px;
font-size: 16px;
font-style: italic;
color: #ececec;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 0px;
padding-left: 0px;
padding-top: 40px;
background-color: #ffffff;
padding-left: 20px;
text-align: left;
}
.subject {
padding-top: 0px;
color: #ff9900;
font-weight: bold;
font-family: trebuchet ms;
font-size: 22px;
text-transform: lowercase;
letter-spacing: -1px;
background-color: #;
border: 0;
margin-bottom: 20px;
}
.subject a, .subject a:link, .subject a:visited {
padding-top: 0px;
color: #ff9900;
font-weight: bold;
font-family: trebuchet ms;
font-size: 22px;
text-transform: lowercase;
letter-spacing: -1px;
background-color: #;
border: 0;
margin-bottom: 20px;
}
.subject a:hover {
color: #cc3399;
}
.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 music 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 music image */
.comments {
font-size: 11px;
text-align: center;
background-color: #ffffff;
padding-top : 7px;
padding-bottom : 7px;
padding-left : 0px;
padding-rigth : 0px;
position: relative;
margin-top: 5px;
color: #999999;
border-top: 1px solid #e2e2e2;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #999999;
font-size: 11px;
text-transform: lowercase;
}
div.comments a:hover {
color: #cc3399;
text-decoration: none;
}
/*--------------------------------
| current: mood, music and tags |
----------------------------------*/
.ljtags {
margin-top: 0px;
margin-bottom: 10px;
font-weight: normal;
background: url("http://...") no-repeat top left; /* paste the url of the tag image */
padding-left: 20px;
text-transform: lowercase;
line-height: 16px;
}
.ljtags strong { font-weight:normal; color: #cccccc; }
.currents strong { font-weight:normal; color: #cccccc; }
.currentlocation {
background: url("http://...") no-repeat top left; /* paste the url of the music image */
padding-left: 20px;
text-transform: lowercase;
line-height: 16px;
color: #cccccc;
font-size: 10px;
margin-left: 10px;
}
.currentmusic {
background: url("http://...") no-repeat top left; /* paste the url of the music image */
padding-left: 20px;
text-transform: lowercase;
line-height: 16px;
color: #cccccc;
font-size: 10px;
margin-left: 10px;
}
.currentmood {
background: url("http://...") no-repeat center left; /* paste the url of the mood image */
padding-left: 20px;
text-transform: lowercase;
color: #cccccc;
font-size: 10px;
margin-left: 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: 10px 10px 10px 30px;
}
.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin: 0px;
}
.userpiccomment {position: relative;
float: left;
background-color: #ffffff;
padding: 4px 4px 4px 4px;
margin-left: 10px;
margin-top: 5px;
margin-right: 10px;
z-index: 15;
border: 1px solid #ececec;
max-width: 80px;
max-height: 80px;}
input, textarea {
border: 0px;
background-color: #ececec;
color: #999999;
}
textarea.textbox {
width: 100% !important;
}
.reply {
border: 0px;
position: relative;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
text-align: left;
line-height: 14pt;
background-color: #ffffff;
color: #999999;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
border: 0px;
position: relative;
margin: 0 0 10 0;
color: #999999;
line-height: 14pt;
}
.commentbox {
border-top: 1px solid #ececec;
padding: 10px;
margin: 10px 10px 10px 10px;
background-color: #;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #0099ff;
}
.datesubjectcomment a:hover {
color: #ff9900;
}
.commentboxpartial {
border: 1px solid #ececec;
padding: 10px;
margin: 10px;
background-color: #;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
border: 1px solid #ececec;
}
/*-----------------------
| tags page |
-------------------------*/
.ljtaglist {
list-style-type:none;
margin: 0px;
padding-left: 60px;
}
/*-----------------------
| archive pages |
-------------------------*/
ul.year {background-color: #;
text-align: center;
padding-bottom: 20px;
}
ul.year li {padding-top: 10px;
display: inline;
padding: 0px;
}
table.yeartable {
background-color: #;
padding: 10px;
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #ececec;
background-color: #ececec;
}
table.yeartable td.yearday {
background-color: #ececec;
text-align: center;
border-width: 0px;
}
td.yearmonth {
background-color: #ececec;
text-align: center;
border-width: 0px;
}
/*-----------------------
FOOTER
-------------------------*/
div#footer a, div#footer a:link, div#footer a:visited {
color: #adadad;
font-size: 12px;
}
div#footer a:hover {
color: #ff9900;
font-size: 12px;
text-transform: uppercase;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 0px;
}
.skiplinks {
text-align: center;
}
.separator{
/* for formatting separators between entries */
height: 0px;
}
/*-----------------------
POPUP
-------------------------*/
/*general positioning*/
div.ContextualPopup {
margin: 5px 0 0 10px;
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: 1px solid #ececec;
padding: 2px;
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 #ececec;
}
/*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 #ececec;
margin-bottom:4px;
padding-bottom:4px;
color: #999999;
}
/* 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)
ATTENTION!!
In the header menu, it's not easy to put the 4 words in the little pieces of paper. You have to change the padding. If you have some problem use the words I put in it (Today Yesterday Friends Just me)
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.