layout #05
Info
Style: Flexible Squares
Works with: Basic, Paid, maybe Sponsored
Works in: AOL Browser, IE, maybe others
Best view: 800x600 and up
Sidebar: Yes
Directions
Okay, these directions are for the new journal customization. If you have any questions, feel free to ask.
1) Go to Journal>>Customize Journal
2) Where it says "2. Select a New Theme" there's a search bar. Type in "Flexible Squares."
3) Choose the "Blue Gray," hit "Apply Theme" (I'm not completely sure if you have to choose this color scheme, but it's the one I did)
4) Now at the top it should show the Blue Gray Flexible Squares Layout in a little box. In that box, under "More Options:" click "Customize Your Theme."
5) Scroll down and on the left side of the screen there's a "Custom CSS" button, click that.
6) Right next to the words "Custom CSS" there's two options, expand all and collapse all. Make sure you click expand all if it's not already expanded.
7) Put all of the drop-down boxes to "No"
8) Copy and paste the code below into the stylesheet box.
9) Click "Save Changes" and you're done!!
Stylesheet
/*---------------------------------------------------
Custom layout by: keb91
Style: Flexible Squares
-----------------------------------------------------*/
body {
background-color: #ebebeb;
background-image: url();
background-position: center;
background-attachment: scroll;
text-align: center;
color: #acacac;
font-family: "times new roman", "verdana", sans-serif;
font-size: 10px;
margin-top: 15px;
}
a, a:link, a:visited {
color: #555555;
text-decoration: none;
}
a:hover {
color: #888888;
font-weight: none;
text-decoration: none;
}
p, td, blockquote {
font-size: 10px;
}
b, i, s, u, emphasise, abbr, strong, strike {
color: #777777;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 700px;
margin-left: auto; margin-right: auto;
background-color: #ffffff;
border-top: solid 0px #ffffff;
border-bottom: solid 0px #ffffff;
padding: 15px;
text-align: justify;
}
#maincontent {
margin-top: 0px;
font-family: "times new roman", sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #acacac;
margin-right: 170px; /*width of sidebar*/
text-align: justify;
}
#sidebar {
padding-top: 3px;
margin-top: 10px;
margin-left: 15px;
margin-right: 8px;
background-color: #ffffff;
font-size: 10px;
font-family: "verdana", sans-serif;
color: #acacac;
width: 170px;
float: right;
text-align: left;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
padding-top: 15px;
padding-bottom: 0px;
margin-bottom: 30px;
text-align: center;
font-family: "times new roman", sans-serif;
font-size: 20px;
font-style: italic;
letter-spacing: 2px;
background-color: #ffffff;
color: #acacac;
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited
{
color: #acacac;
}
div#header a:hover, div#footer a:hover {
color: #888888;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none; /*remove if you want the title displayed*/
font-family: "Verdana", sans-serif;
font-size: 13px;
color: #888888;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 10px;
}
.subtitle{
display: none; /*remove if you want the subtitle displayed*/
font-family: "Verdana", sans-serif;
color: #888888;
font-size: 11px;
font-weight: normal;
letter-spacing: 1px;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
font-size: 20px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
font-size: 20px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.subcontent {
}
.entry {
margin-left: 120px;
padding: 6px;
background-color: #ffffff;
color: #acacac;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: justify;
}
.userpic {
position: relative;
background: #ebebeb;
border: 1px solid #acacac;
float: left;
text-align: center;
padding: 5px;
margin-left: 5px;
z-index: 15;
font-size: 8px;
border-width: 1px;
border-color: #ffffff;
border-style: solid;
}
.date {
margin-left: 120px;
line-height: 200%;
top: 5px;
color: #acacac;
text-transform: uppercase;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
.subject {
border-bottom: dotted #ebebeb 1px;
margin-left: 120px;
padding: 1px;
text-align: left;
letter-spacing: 1px;
color: #acacac;
font-family: "times new roman";
font-size: 18px;
font-style: italic;
}
.subject a, .subject a:link, .subject a:visited {
color: #888888;
}
.subject a:hover {
color: #888888;
}
.datesubject {
background-color: #ffffff;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 10px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 10px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents, .currentmood, .currentmusic {
display: none; /*remove if you want currents displayed*/
font-family: "times new roman";
font-size: 10px;
font-weight: none;
color: #acacac;
text-align: left;
text-style: italic;
padding: 0px;
}
.ljtags {
font-family: "times new roman", sans-serif;
font-size: 10px;
font-style: none;
color: #acacac;
margin-top: 14px;
margin-bottom:0px;
position: left;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: "times new roman", sans-serif;
font-size: 10px;
text-align: right;
background-color: #ffffff;
padding: 0px 0px 0px 0px;
position: relative;
top: 0px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #888888;
}
div.comments a:hover {
color: #888888;
text-decoration: none;
font-size: 10px;
padding: 0px
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 9px;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
background: #ebebeb !important;
border: 1px solid #ebebeb !important;
float: left;
text-align: center;
padding: 5px;
margin: 1px;
z-index: 15;
font-size: 8px
border-width: 1px;
border-color: #ffffff !important;
border-style: solid;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #888888;
}
div#sidebar a:hover {
color: #888888;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
.sbarcalendarposts {
border-color: #ffffff;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
text-align: left;
list-style: none;
background-color: #ffffff;
margin-bottom: 10px;
font-style: italic;
margin-top: 10px;
font-size: 16px;
color: #acacac;
font-family: "times new roman";
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: "times new roman", sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
background-color: #ffffff;
color: #acacac;
font-style: italic;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------------------------------------------
Archive 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: #888888;
}
table.yeartable td.yearday {
background-color: #888888;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
}
.box {
border-style: none;
border-width: 0px 0px 0px 0px;
border-color: #888888;
padding: 10px;
clear: left;
}
input, textarea {
background-color: #ffffff;
color: #888888;
}
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: #ffffff;
color: #888888;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #888888;
}
.commentbox {
border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #000000;
}
.datesubjectcomment a:hover {
color: #888888;
}
.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
height: 15px;
}
.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat;
}
/*Tiny Icons-Feel free to remove*/
.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 14px 13px 0px 0px !important;
background: url(http://i23.tinypic.com/2jbpjd4.gif);
;){kind=link}
}
.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: px px 0px 0px;
background: url();
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i24.tinypic.com/212a32r.gif);
;){kind=link}
padding: 14px 8px 0 2px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i24.tinypic.com/212a32r.gif);
padding: 14px 8px 0 2px !important;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i21.tinypic.com/6jn8ts.gif);
;){kind=link}
padding: 15px 17px 0 2px !important;
}
Extra Stuff
---comments are awesome
---tiny icons credit to damnicons
---tiny icon generator credit to loveicon
---credit keb91 or painfuldefeat
---customize to your liking
---do not repost as your own
---enjoy!
If you have any questions, feel free to ask here.
Also, I do not claim to be a genius with css, so if there's something wrong with the layout please tell me and I will try to fix it. :)
Layouts will now be posted at vapores.
Watch there instead of here for further updates, thanks! :)