Faith Wood's Ramblings

Previous | Memories | Tell Someone | Next

14 May 2009 @ 07:17 pm

Layouts

I've been trying to learn a bit of css (for money-related purposes) and for some reason, it's a lot more fun to practice my mad skillz by making LJ layouts than doing serious stuff. I made these and I don't know if anyone will like them, but I'm very proud of myself and I thought I should share. Now excuse me, I have to go and do some serious work for a few days. *sniffs and flexes css fingers*

Layout Style: Flexible Squares
Best view: 1024×768 +
Browser(s) Compatible: Tested in Firefox, IE 7 and Opera.
Work with Nav bar? Yes.
Work with Ads? Yes. (Vertical preferred.)
Credit:

faithwood
Preview:

Dark

[Live Preview (also temporarily @ faithlayouts]

Light

[Live Preview]

Code:

Dark

/* Stylesheet by Faith Wood -- http://faithwood.livejournal.com  */

#header {
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/headerdark.jpg) no-repeat top center;
height: 200px !important; 
border: 0px;   
margin-top: 20px;
padding-top: 0px; 
overflow: visible;  
color: #B48E3B; 
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
        color: #E6C170;
    }
div#header a:hover, div#footer a:hover {
        color: #B48E3B; 
        text-decoration: none;
    }

body {
        color: #B48E3B; 
        background-color: #2B0102;
        margin: 20px 0 20px 0;
        line-height: 150%;
        margin-top: 0px !important;
        }

#content {
        background-color: transparent;
        color: #B48E3B; 
        width: 100%;
        margin: 0px auto; 
        padding: 0px;
        padding-top: 0px;
        border: 0px;
    }

#maincontent {
        color: #B48E3B; 
        background-color: transparent;
        border: 0px;
        margin-left: 220px;
        margin-right: 220px;
        padding-top: 70px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgmaindark.jpg) no-repeat top center;
        }
    a, a:link, a:visited {
        color: #B48E3B;
        text-decoration: none;
        font-weight: bold;
        }

a:hover {
        color: #E6C170;
        text-decoration: none;
        text-decoration: none;
        font-weight: bold;
        }

.entry  {
        text-align: left !important;
        background-color: #ffffff;
        color: #000000;
        margin: -3px auto;
        border: 0px;
        }

.datesubject {
       background-color: #2B0102;
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/subjectdark.jpg) repeat bottom center;
       font-weight: bold;
       border: 0px;   
       padding: 5px;
       text-transform: uppercase;
       text-align: center;
       margin: 0px 0px 0px 0px;
       color: #B48E3B; 
       height: 84px;
 padding-top: 20px;
        }

.subject {
color: #B48E3B; 
       font-size: 14px;
}
    .date {  color: #B48E3B;}

.subject a, .subject a:link, .subject a:visited{
       color: #E6C170;
       font-size: 14px;
        }

.subject a:hover  {
       color: #B48E3B; 
       font-size: 14px;
        }

.userpic {
        position: center;
        float: left;
        margin-top: -5px;
        margin-left: 5px;
        margin-left: -182px !important;
        background-color: #2B0102; 
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdarklighter.jpg) repeat bottom center;
        border: 0px;
        }

.userpic img {
padding: 18px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdark.jpg) repeat bottom center;
border: 3px ridge #E6C170;
        }
   
    .userpicfriends {
        position: absolute;
        float: left;
        margin-top: -5px;
        margin-left: 5px;
        margin-left: -182px !important;
      background-color: #2B0102; 
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdarklighter.jpg) repeat bottom center;
          border: 0px;
 }

.userpicfriends img {
padding: 18px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdark.jpg) repeat bottom center;
border: 3px ridge #E6C170;
        }

.userpic font a {
color: #E6C170;

}

.userpicfriends font a{
color: #E6C170;
}

.userpic font {
font-weight: bold;
color: #E6C170;
}

.userpicfriends font {
font-weight: bold;
color: #E6C170;
}

.userpiccomment {
padding: 16px;
background-color: #2B0102; 
border: 3px ridge #E6C170;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdark.jpg) repeat bottom center;
}

.userpiccomment img {
       border: 1px solid #000000;
}

.ljtags a:link, .ljtags a:visited {
background-color: #FAF8F5;
font-weight: bold;

padding: 1px 5px;
border-top: 1px solid #E6C170;
border-bottom: 1px solid #E6C170;
line-height: 200%;
}

.ljtags a:hover, .ljtags a:active {
color: #E6C170;
background-color: #ffffff;
font-weight: bold;

padding: 1px 5px;
border-top: 1px solid #F3D595;
border-bottom: 1px solid #F3D595;
}
        .title    {
width: 600px;
text-align: center !important;
margin: 0px auto!important;
color: #B48E3B; 
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size: 14px;
}

.subtitle{
width: 600px;
text-align: center !important;
margin: 0px auto!important;
color: #B48E3B; 
letter-spacing: 1px;
        }

.navheader {
font-weight: bold;
width: 600px;
text-align: center !important;
padding-top: 150px !important;
margin: 0px auto!important;
color: #B48E3B; 
text-transform: uppercase;
letter-spacing: 1px;
}

.defaultuserpic {
background-color: #2B0102; 
       border: 3px ridge #E6C170;
        margin-right: 27px;
margin-left: 27px;
margin-top: -1px;
       padding: 18px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdark.jpg) repeat bottom center;
        }

.defaultuserpic img {
       border: 1px solid #000000;
        }

#sidebar {
        width: 200px;
        margin-right: 15px;
        color: #B48E3B; 
        clear: both;
        padding-top: 70px !important;
        margin-top: 17px;
        float: right;
        text-align: left;
border: 0px;         
background-color: #2B0102; 
        }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
        color: #E6C170;
    }

div#sidebar a:hover{
        color: #B48E3B; 
    }

.sbarbody {
        padding-top: 0px;
padding-bottom: 5px;
margin-top: 25px;
margin-bottom: 10px;
margin-right: 0px;
background-color: #2B0102; 
border: 0px;    
        text-align: left;
        }

.sbarbody2 {        
padding-top: 0px;
padding-bottom: 15px;
margin-top: 0px;
margin-bottom: 10px;
background-color: #2B0102; 
margin-right: 0px;
text-align: left !important;
border: 0px;
    }

#sidebar_summary li.sbaritem {
        margin: 0 10px;
        padding: 3px 0;
        border-bottom: 1px solid #E6C170;
    }
 .sbarcalendar {
border: 0px;
}
.sbarcalendarposts {
border: 1px solid #E6C170;
}

li.sbartitle   {
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/sidetitledark.jpg) no-repeat bottom center; 
color: #B48E3B; 
font-weight: bold;
text-transform: uppercase; 
border: 0px; 
height: 70px; 
text-align: center !important;
padding-left: 0px;
padding: 0px;
}

.commentbox {
padding: 10px 25px;
min-height: 150px;
background-color: #ffffff !important;
color: #000000;
 border: 8px ridge #E6C170;
text-align: left;
}

div.box#commentform {
        position: absolute;
        border-width: 1px;
        border-style: solid;
        border-color: #E6C170;
        background-color: #ffffff;
        color: #000000;
        text-align: left;
    }

div.subcontent {
        height: 1%;
        clear: none;
    }
small {
font-size: 9px;
}

.comments {
bgcolor: #3A3D4C;
margin-left: -10px;
margin-right: -10px;
border: 0px;   
text-align: center;
background-color: #2B0102;
 background: url(http://i631.photobucket.com/albums/uu36/faithlayout/commentsdark.jpg) repeat center center;
height: 28px;
}

.separator{
 background: url(http://i631.photobucket.com/albums/uu36/faithlayout/separatordark.jpg) no-repeat bottom center;
        height: 90px;
border: 0px;
    }

.box {color: #B48E3B; background-color: transparent; border: 0px;}

.box a, .box a:link, .box a:visited{
       color: #E6C170;
        }

.box a:hover  {
       color: #B48E3B; 
        }

.commentbox a:link, .commentbox a:visited {
color: #B48E3B; 
text-align: left;
}

.commentbox a:hover {
color: #E6C170;
text-align: left;
}

.reply {color: #000000; background-color: #ffffff;}

.commentreply {color: #000000; background-color: #ffffff;}

input {color: #000000; background-color: #ffffff;}

textarea  {color: #000000; background-color: #ffffff; }

blockquote {
background-color: #FFE998;
padding: 25px;
border: 0px;
color:#000000;
border-top: 4px ridge #E6C170;
border-bottom: 4px groove #E6C170;
margin: 10px 60px;
  background-image: url(http://i631.photobucket.com/albums/uu36/faithlayout/blockdark.jpg);
  background-position: top center;
  background-repeat: no-repeat;
padding-top: 50px;
}

div.comments a, div.comments a:link, div.comments a:visited{
padding: 6px;
background-color: #1B0101;
border: 1px solid #E6C170;
color: #E6C170;
position: relative;
top: 6px;
font-size: 11px;
    }
div.comments a:hover{
padding: 6px;
background-color: #2B0102;
border: 1px solid #E6C170;
color: #B48E3B; 
position: relative;
top: 6px;
font-size: 11px;
    }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #B48E3B;
        }
    .datesubjectcomment a:hover  {
       color: #E6C170;
        }
 .datesubjectcomment {
            background-color: #ffffff;
            color: #96742A;
            border-bottom: 2px solid #B48E3B;
}

#footer {color: #B48E3B; background-color: #4E5369; border: 0px; height: 50px; background-color: #2B0102; padding-top: 20px;}

.sbarcalendarposts {background-color: #2B0102;}
.commentboxpartial {background-color: #ffffff; border: 3px ridge #E6C170; color: #96742A;}
    .commentboxpartial a, .commentboxpartial a:link, .commentboxpartial a:visited{
       color: #B48E3B; 
        }

.commentboxpartial a:hover  {
       color: #E6C170;
        }

.commentinfo {background-color: #E6C170;}
table.yeartable td.yearday {background-color: #2B0102; font:weight: bold; text-transform: uppercase;}

#lj_controlstrip {
color: #B48E3B; 
background-color: #2B0102; 
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgdark.jpg) repeat bottom center; border-top: 1px solid #E6C170; 
border-bottom: 1px solid #E6C170;}
#lj_controlstrip table {color: #B48E3B;}
#lj_controlstrip td {color: #B48E3B; border: 0px; }
#lj_controlstrip_statustext {color: #B48E3B; }
#lj_controlstrip a, #lj_controlstrip a:visited {color: #E6C170;}
#lj_controlstrip a:hover {color: #B48E3B; }

Light

/* Stylesheet by Faith Wood -- http://faithwood.livejournal.com  */

#header {
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/headerlight.jpg) no-repeat top center;
height: 200px !important; 
border: 0px;   
margin-top: 20px;
padding-top: 0px; 
overflow: visible;  
color: #131A20; 
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
        color: #344A60;
    }
div#header a:hover, div#footer a:hover {
        color: #131A20; 
        text-decoration: none;
    }

body {
        color: #131A20; 
        background-color: #BCC6CF;
        margin: 20px 0 20px 0;
        line-height: 150%;
        margin-top: 0px !important;
        }

#content {
        background-color: transparent;
        color: #131A20; 
        width: 100%;
        margin: 0px auto; 
        padding: 0px;
        padding-top: 0px;
        border: 0px;
    }

#maincontent {
        color: #131A20; 
        background-color: transparent;
        border: 0px;
        margin-left: 220px;
        margin-right: 220px;
        padding-top: 70px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bgmainlight.jpg) no-repeat top center;
        }
    a, a:link, a:visited {
        color: #344A60;
        text-decoration: none;
        font-weight: bold;
        }

a:hover {
        color: #131A20;
        text-decoration: none;
        text-decoration: none;
        font-weight: bold;
        }

.entry  {
        text-align: left !important;
        background-color: #ffffff;
        color: #000000;
        margin: -3px auto;
        border: 0px;
        }

.datesubject {
       background-color: #BCC6CF;
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/subjectlight.jpg) repeat bottom center;
       font-weight: bold;
       border: 0px;   
       padding: 5px;
       text-transform: uppercase;
       text-align: center;
       margin: 0px 0px 0px 0px;
       color: #131A20; 
       height: 84px;
 padding-top: 20px;
        }

.subject {
       color: #131A20; 
       font-size: 14px;
       }
    .date {  color: #131A20;}

.subject a, .subject a:link, .subject a:visited{
       color: #344A60;
       font-size: 14px;
        }

.subject a:hover  {
       color: #131A20; 
       font-size: 14px;
        }

.userpic {
        float: left;
        margin-top: -5px;
        margin-left: 5px;
        margin-left: -182px !important;
        background-color: #BCC6CF; 
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglight.jpg) repeat bottom center;
        border: 0px;
        }

.userpic img {
padding: 18px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglightdarker.jpg) repeat bottom center;
border: 3px ridge #c0c0c0;
        }
   
    .userpicfriends {
        position: absolute;
        float: left;
        margin-top: -5px;
        margin-left: 5px;
        margin-left: -182px !important;
      background-color: #BCC6CF; 
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglight.jpg) repeat bottom center;
          border: 0px;
 }

.userpicfriends img {
padding: 18px;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglightdarker.jpg) repeat bottom center;
border: 3px ridge #c0c0c0;
        }

.userpic font a {
color: #344A60;

}

.userpicfriends font a{
color: #344A60;
}

.userpic font {
font-weight: bold;
color: #344A60;
}

.userpicfriends font {
font-weight: bold;
color: #344A60;
}

.userpiccomment {
padding: 16px;
background-color: #BCC6CF; 
border: 3px ridge #c0c0c0;
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglightdarker.jpg) repeat bottom center;
}

.userpiccomment img {
       border: 1px solid #000000;
}

.ljtags a:link, .ljtags a:visited {
background-color: #ffffff;
font-weight: bold;
color: #96A7B7;
padding: 1px 5px;
border-top: 1px solid #96A7B7;
border-bottom: 1px solid #96A7B7;
line-height: 200%;
}

.ljtags a:hover, .ljtags a:active {
color: #344A60;
background-color: #ffffff;
font-weight: bold;

padding: 1px 5px;
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
        .title    {
width: 600px;
text-align: center !important;
margin: 0px auto!important;
color: #131A20; 
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size: 14px;
}

.subtitle{
width: 600px;
text-align: center !important;
margin: 0px auto!important;
color: #131A20; 
letter-spacing: 1px;
        }

.navheader {
font-weight: bold;
width: 600px;
text-align: center !important;
padding-top: 150px !important;
margin: 0px auto!important;
color: #131A20; 
text-transform: uppercase;
letter-spacing: 1px;
}

.defaultuserpic {
background-color: #BCC6CF; 
       border: 3px ridge #c0c0c0;
        margin-right: 27px;
margin-left: 27px;
margin-top: -1px;
       padding: 18px;
       background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglightdarker.jpg) repeat bottom center;
        }

.defaultuserpic img {
       border: 1px solid #000000;
        }

#sidebar {
        width: 200px;
        margin-right: 15px;
        color: #131A20; 
        clear: both;
        padding-top: 70px !important;
        margin-top: 17px;
        float: right;
        text-align: left;
border: 0px;         
background-color: #BCC6CF; 
        }

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
        color: #344A60;
    }

div#sidebar a:hover{
        color: #131A20; 
    }

.sbarbody {
        padding-top: 0px;
padding-bottom: 5px;
margin-bottom: 10px;
margin-top: 25px;
background-color: #BCC6CF; 
border: 0px;    
        text-align: left;
        }

.sbarbody2 {        
padding-top: 0px;
padding-bottom: 15px;
margin-bottom: 10px;
margin-top: 0px;
background-color: #BCC6CF; 
margin-right: 0px;
        text-align: left;
border: 0px;
    }
    #sidebar_summary li.sbaritem {
        margin: 0 10px;
        padding: 3px 0;
        border-bottom: 1px solid #555655;
    }

.sbarcalendar {
border: 0px;
}
.sbarcalendarposts {
border: 1px solid #555655;
}

li.sbartitle   {
background: url(http://i631.photobucket.com/albums/uu36/faithlayout/sidetitlelight.jpg) no-repeat bottom center; 
color: #131A20; 
font-weight: bold;
text-transform: uppercase; 
border: 0px; 
height: 70px; 
text-align: center !important;
padding-left: 0px;
padding: 0px;
}

.commentbox {
padding: 10px 25px;
min-height: 150px;
background-color: #ffffff !important;
color: #000000;
 border: 8px ridge #c0c0c0;
text-align: left;
}

div.box#commentform {
        position: absolute;
        border-width: 1px;
        border-style: solid;
        border-color: #555655;
        background-color: #ffffff;
        color: #000000;
        text-align: left;
    }

div.subcontent {
        height: 1%;
        clear: none;
    }
small {
font-size: 9px;
}

.comments {
bgcolor: #3A3D4C;
margin-left: -11px;
margin-right: -11px;
border: 0px;   
text-align: center;
background-color: #BCC6CF;
 background: url(http://i631.photobucket.com/albums/uu36/faithlayout/commentslight.jpg) repeat center center;
height: 32px;
}

.separator{
 background: url(http://i631.photobucket.com/albums/uu36/faithlayout/separatorlight.jpg) no-repeat bottom center;
        height: 90px;
border: 0px;
    }

.box {color: #131A20; background-color: transparent; border: 0px;}

.box a, .box a:link, .box a:visited{
       color: #344A60;
        }

.box a:hover  {
       color: #131A20; 
        }

.commentbox a:link, .commentbox a:visited {
color: #344A60;
text-align: left;
}

.commentbox a:hover {
color: #131A20; 
text-align: left;
}

.reply {color: #000000; background-color: #ffffff;}

.commentreply {color: #000000; background-color: #ffffff;}

input {color: #000000; background-color: #ffffff;}

textarea  {color: #000000; background-color: #ffffff; }

blockquote {
background-color: #D3D4DB;
padding: 25px;
border: 0px;
color:#000000;
border-top: 4px ridge #c0c0c0;
border-bottom: 4px groove #c0c0c0;
margin: 10px 60px;
  background-image: url(http://i631.photobucket.com/albums/uu36/faithlayout/blocklight.jpg);
  background-position: top center;
  background-repeat: no-repeat;
padding-top: 50px;
}

div.comments a, div.comments a:link, div.comments a:visited{
padding: 6px;
background-color: #96A7B7;
border: 1px solid #555655;
color: #344A60;
position: relative;
top: 6px;
font-size: 11px;
    }

div.comments a:hover{
padding: 6px;
background-color: #BCC6CF;
border: 1px solid #555655;
color: #131A20; 
position: relative;
top: 6px;
font-size: 11px;
    }

.datesubjectcomment a:link, .datesubjectcomment a:visited {
        color: #344A60;
        }
    .datesubjectcomment a:hover  {
       color: #131A20;
        }
 .datesubjectcomment {
            background-color: #ffffff;
            color: #747B82;
            border-bottom: 2px solid #344A60;
}

#footer {color: #131A20; background-color: #4E5369; border: 0px; height: 50px; background-color: #BCC6CF; padding-top: 20px;}

.sbarcalendarposts {background-color: #BCC6CF;}
.commentboxpartial {background-color: #ffffff; border: 3px ridge #c0c0c0; color: #747B82;}
    .commentboxpartial a, .commentboxpartial a:link, .commentboxpartial a:visited{
       color: #344A60; 
        }

.commentboxpartial a:hover  {
       color: #131A20;
        }

.commentinfo {background-color: #344A60;}
    table.yeartable td.yeardate, table.yeartable td.yearday {
        border: 1px solid #000000;
        }
table.yeartable td.yearday {background-color: #BCC6CF; font:weight: bold; text-transform: uppercase;}

#lj_controlstrip {color: #131A20; background-color: #BCC6CF; background: url(http://i631.photobucket.com/albums/uu36/faithlayout/bglightdarker.jpg) repeat bottom center; border-top: 1px solid #555655; border-bottom: 1px solid #555655;}
#lj_controlstrip table {color: #131A20; }
#lj_controlstrip td {color: #131A20; border: 0px; }
#lj_controlstrip_statustext {color: #131A20; }
#lj_controlstrip a, #lj_controlstrip a:visited {color: #344A60;}
#lj_controlstrip a:hover {color: #131A20; }

Instructions:

1. Go to Select Journal Style.
2. Type Flexible Squares into the Search box.
3. Select any Flexible Squares theme.
4. Choose a Page Setup: 2 Column (sidebar on right) (If you don't have a paid account then select the Vertical option for ads.)
5. Click Customize Journal Style and then Custom CSS. Make sure that Use layout's stylesheet(s) is set to Yes.
6. Paste the code above into the Custom stylesheet box.
7. Save changes.

Image(s): Images used:

I'm not moving them, but you never know. So you could upload these somewhere, paste the code into Notepad and then find&replace url's.

Tags: layouts

Current Mood:

accomplished

75 comments | Leave a comment

Page 1 of 2
<<	[1] [2]	>>

( Post a new comment )

alafaye on May 14th, 2009 05:23 pm (UTC)

I like them. If you do anymore, I'd like to see them. And thanks for the instructions!!

-runs to use one-