Flexible Squares
Best view: 1024 x 768
Does not work with navbar
Will probably work with ads if they are in between entries
Works in Firefox + IE
Crediting
adventures or
peterpansflight is super!
Note: I tested this on my sister's computer and it was a lot darker. Sorry if this happens to you!
screenshot |
live preview 1. Go to
lj customize and put "Flexible Squares" in the search bar.
2. Select any of the themes.
3. Go to
Customize your theme and to "Custom CSS."
4. Set all drop-down menus to No.
5. Copy and paste the codes below into the box labeled "custom stylesheet."
6. Press "Save" and everything should be fine!
Codes:
/*
This layout is made by adventures.livejournal.com.
*/
BODY{
background-color: #000 ;
background-image: url(
http://i32.photobucket.com/albums/d14/dustfingerlove/ravenbg.jpg); background-repeat: repeat-x;
text-align: center;
color: #fff;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin-left:0; margin-right:0; margin-top:20px; margin-bottom:100px
}
b, i, s, u {
color: #6C1C1C;
}
a, a:link, a:visited {
color: #6C1C1C;
text-decoration: none;
}
a:hover {
color: #101010;
text-decoration: underline;
}
blockquote {
font-size: 11px;
font-color: #fff;
border:none;
background-color: #313131;
padding: 7px 7px 7px 7px;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content
{
width: 90%;
margin-left: auto; margin-right: auto;
background-color: transparent;
border-width: 0px;
border-style: solid;
border-color: #fff;
padding: 15px;
}
#maincontent {
margin-top: 15px;
font-family: "Verdana", sans-serif;
font-size: 12px;
background-color: transparent;
color: #000000;
border-style: solid;
border-color: #fff;
border-width: 0px;
margin-right: 0px;
width: 80%;
text-align: left;
}
#sidebar {
display:right;
padding-top: 15px;
margin-top: 15px;
background-color: #2A2A2A;
border-color: #2A2A2A;
border-width: 0px;
border-style: dotted;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #5E5E5E;
width: 17%;
float: right;
text-align: left;
}
#header {
width: 100%;
padding: 30px 0px 30px 0px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 15px;
font-family: georgia;
font-weight: bold;
letter-spacing: 2px;
border-color: fff;
border-width: 0px;
border-style: dotted;
background-color: transparent;
color: #fff;
}
#footer {
width: 100%;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
color: #fff;
border-color: #fff;
border-width: 0px;
border-style: dotted;
z-index: 100;
clear: both;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #fff;
padding: 7px 7px 7px 7px;
}
div#header a:hover, div#footer a:hover {
color: #000;
padding: 7px 7px 7px 7px;
text-decoration: none;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 15px;
color: #FFF5F4;
font-weight: normal;
letter-spacing: 4px;
line-height: 200%;
top: 10px;
}
.subtitle{
display: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #FFF5F4;
font-weight: bold;
letter-spacing: 4px;
top: 10px;
}
/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color:#000000;
}
div#sidebar a:hover {
color: #414141;
text-decoration: none;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
background-color: #fff;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000;
background-color:#151515;
color: #A40C0C;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000;
color: #A40C0C;
border-width: 1px;
border-style: solid;
background-color:#000;
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: 15px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 10px;
background-color: #2F2F2F;
border-bottom-color: #FF0000;
border-bottom-style: solid;
border-bottom-width: 1px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border-style: solid;
border-width: 2px;
border-color: #000;
font-family: Georgia, serif;
font-size: 10px;
color: #A40C0C;
background-color: #3F3D3D;
padding-bottom: 7px;
padding-top: 7px;
}
/* maincontent */
.subcontent {
}
.entry {
margin: 0px 0px 0px 80px;
padding: 20px;
line-height: 15px;
background-color: #2A2A2A;
color: #5E5E5E;
font-family: "verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 0px;
border-color:#2A2A2A;
border-style: solid;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.userpic {
position: relative;
float: left;
background-color: #2A2A2A;
padding: 7px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #2A2A2A;
border-style: solid;
}
.userpicfriends {
position: relative;
float: left;
background-color: #2A2A2A;
padding: 7px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #2A2A2A;
border-style: solid;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}
.date {
line-height: 16px;
top: 5px;
color: #A40C0C;
font-family: "Georgia", serif;
font-size: 15px;
text-align: right;
}
.subject {
text-align: right;
padding: 3px;
color: #fff;
font-family: "Georgia", serif;
font-size: 10px;
}
.subject a, .subject a:link, .subject a:visited {
color: #ffffff;
}
.subject a:hover {
color: #004875;
}
.datesubject {
background-color: #2A2A2A;
background-image: url(
http://i32.photobucket.com/albums/d14/dustfingerlove/ravenbg2.jpg); padding: 5px;
margin-left: 80px;
}
.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.comments {
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: right;
background-color: #2A2A2A;
padding: 0px 0px 0px 0px;
position: justify;
padding-top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #737171;
}
div.comments a:hover {
color: #737171;
background-image: url(
http://i32.photobucket.com/albums/d14/dustfingerlove/ravenbg2.jpg); text-decoration: none;
padding: 7px 7px 7px 7px;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
background-color: #000;
background-image: url(
http://i32.photobucket.com/albums/d14/dustfingerlove/ravenbg2.jpg); padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #000;
background-color: #000;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #2A2A2A;
border-style: dotted;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #000;
padding: 10px;
clear: left;
}
input, textarea {
background-color:#fff;
color: #2A2A2A;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color:#fff;
color:#2A2A2A;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #5E5E5E;
}
.commentbox {
border-color: #2A2A2A;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #2A2A2A;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}
.datesubjectcomment a:hover {
color: #6C1C1C;
}
.commentboxpartial {
border-color: #2A2A2A;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #2A2A2A;
}
.commentinfo {
background-color:#2A2A2A;
background-image: url(
http://i32.photobucket.com/albums/d14/dustfingerlove/ravenbg2.jpg); margin-top: 10px;
width: 100%;
}
/* maincontent -- year/achive pages */
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: #fff;
}
table.yeartable td.yearday {
background-color: #fff;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/* footer */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* misc */
.clear {
height: 15px;
}
.skiplinks {
text-align: center;
}
.separator{
/* for formatting separators between entries */
height: 35px;
}
.ljtags {
font-weight: bold;
margin-top: 15px;
}