Style: S2 Flexible Squares
Screen Resolution: 800x600 and higher
Browser Compatible: Firefox, IE, & Safari
Header Compatible: Yes
Nav Bar Compatible: Yes
Plus Account/Ads: Yes
Base Layout:
snubbly Requested by:
massutegone Preview:
LIVE PREVIEW FOR NOW NOTE: I test my layouts on a plus account to show what it would look like with ads under the header or navigation menu.
1.
Choose Journal Style: Under Select a New Theme type Flexible Squares in the search box, and apply any of the themes that come up.
2.
Customize > Sidebar: Customize as you wish.
2.
Custom CSS: Set all dropdown boxes to No, copy & paste the following code into the Custom stylesheet textbox and select Save Changes:
/*----------------------------------------------------------------------------------------------
S2 FLEXIBLE SQUARES
LAYOUT BY CINDIE-CHAN @
HTTP://HAIR-WORKS.LIVEJOURNAL.COM BASE LAYOUT BY SNUBBLY @
HTTP://SNUBBLY.LIVEJOURNAL.COM-----------------------------------------------------------------------------------------------*/
body {background: #5e52b8 url(
http://www.coolchaser.com/background/view/4820140) fixed; text-align: center; color: #eafafe; font-family: tahoma, sans-serif; font-size: 7pt; margin-top: 10px;}
::-moz-selection {color: #eafafe; background: #222;}
a, a:link, a:visited {color: #4a4190; text-decoration: none;}
a:hover {color: #564ba8;}
/*----------------------------------------------------------------------------------------------
PAGE SET-UP
-----------------------------------------------------------------------------------------------*/
#content {width: 750px; text-align: justify; margin: auto;}
#maincontent {margin-left: 160px; background: #000000; border: 1px solid #594eae; padding: 10px;}
#sidebar {width: 140px; float: left; background: #000000; border: 1px solid #594eae; padding: 5px;}
#header, #footer {background: #000000; border: 1px solid #594eae; padding: 8px; margin: 10px 0; text-align: center; font-weight: bold; text-transform: uppercase;}
ul.navheader, ul.navfooter {padding: 0; margin: 0;}
ul.navheader li, ul.navfooter li {display: inline; padding: 0 10px;}
.entry ul li, .entry ol li {padding-left: 5px; margin-left: 10px;}
.title, .subtitle, .clearfoot, .clear {display: none;}
#lj_controlstrip {text-transform: lowercase;}
/*----------------------------------------------------------------------------------------------
ENTRIES
-----------------------------------------------------------------------------------------------*/
.datesubject {text-transform: uppercase; font-weight: bold;}
.subject {color: #4a4190;}
.entry_text img {max-width: 350px; overflow: hidden;}
.entry_text {margin: 10px 0;}
.separator {height: 20px;}
.currents {text-transform: lowercase;}
.ljtags {padding-top: 10px; font-weight: bold; text-transform: lowercase;}
h2 {padding-left: 30px; text-align: left; font-size: 7pt; text-transform: uppercase;}
.ljtaglist {list-style-type: square;}
.comments {text-align: right; clear: right;}
.comments a {text-transform: lowercase;}
.userpic {position: relative; float: right; background: #000000; margin-left: 10px; border: 1px solid #594eae;}
.userpicfriends {position: relative; float: right; margin-left: 10px; text-align: center; color: #4a4190; background-color: #3A3A3A !important;
font-family: tahoma, sans-serif; font-size: 7pt; padding: 3px; z-index: 15;}
/*----------------------------------------------------------------------------------------------
SIDEBAR
-----------------------------------------------------------------------------------------------*/
#sidebar .defaultuserpic {text-align: center;}
#sidebar .defaultuserpic img {border: 1px solid #594eae;}
.calendar {width: 100%; text-align: center; line-height: 10px;}
.sbarcalendar, .sbarcalendarposts {background: #333;}
.sbartitle, .sbarbody, .sbarbody2 {padding: 0 5px;}
ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;}
li.sbartitle {padding: 0; list-style: none; margin: 10px 0; text-transform: uppercase; font-weight: bold;}
/*----------------------------------------------------------------------------------------------
CALENDAR PAGE
-----------------------------------------------------------------------------------------------*/
ul.year {text-align: center; padding-bottom: 10px;}
ul.year li {display: inline; padding: 0 10px;}
table.yeartable {margin: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {background: #333;}
table.yeartable td.yearday {background: #333; text-align: center;}
td.yearmonth {border-style: none;}
input, textarea, option, button, select {font-family: tahoma, sans-serif; background: #3A3A3A; border: 1px solid #000000; font-size: 7pt; color: #eafafe; padding: 1px;}
/*----------------------------------------------------------------------------------------------
COMMENTS PAGE [ paid/plus accounts ]
-----------------------------------------------------------------------------------------------*/
.skiplinks {text-align: center; margin: 10px 0;}
#postform img {display: none;}
textarea.textbox {width: 95% !important;}
.box {border: 0; padding: 10px; clear: none !important;}
.datesubjectcomment {background: #000000; color: #eafafe; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0px; border: 5px solid #000000; background: #000000; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #3A3A3A; color: #eafafe;}
.commentreply {position: relative; margin: 10px; font-size: 7pt; font-family: tahoma, sans-serif; color: #eafafe;}
.commentbox {border: 1px solid #000000; margin: 10px; background: #3A3A3A;}
.commentboxpartial {border: 1px solid #000000; margin: 10px; background: #3A3A3A;}
.commentinfo {background: #3A3A3A; margin-top: 10px; width: 100%;}
.replytosubject {font-weight: bold;}
/*---------------------------------------------------------------------------------------------
TINY ICONS [
http://famfamfam.com ]
-----------------------------------------------------------------------------------------------*/
img[src*="icon_protected.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/locked.png);}img[src*="icon_private.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/private.png);}img[src*="icon_groups.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/groupcustom.png);} img[src*="btn_edit.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/pencil.png);}img[src*="btn_del.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/delete.png);}img[src*="btn_scr.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/locked.png);}img[src*="btn_unscr.gif"]{width: 0; height: 0; padding: 16px 16px 0 0 !important; background: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/public.png);}img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"]{display: none;}
img[src*="userinfo.gif"] {width: 0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat;
background-image: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/user.png) !important;}
img[src*="community.gif"] {width:0; height: 0; padding: 16px 16px 0 0 !important; background-repeat: no-repeat;
background-image: url(
http://i147.photobucket.com/albums/r304/snubicons/layouts/group.png) !important;}
/*----------------------------------------------------------------------------------------------
ADD HEADER IMAGE [ edit the width, height and header url ]
-----------------------------------------------------------------------------------------------*/
.headerimage {position: relative; margin: auto; width: 750px; height: 500px;
background: url(
http://i25.tinypic.com/29uq5jm.jpg) no-repeat;}
Artist Notes:
Sorry for the delay! Internet problems are arising and until Texas allows my internet to go without cutting off for awhile, I'll have to keep this short. Another rainy layout for
massutegone, which is NOT a bad thing! I love rain...well, rain THEMED things LOL...and I think it turned out pretty cool.
Credit me:
shindii_ruiizu,
hair_works, or
cheverloo.
Comments and/or notes = ♥!
Requests are accepted through Cheverloo's
request post or at my graphics community
hair_works. {currently working to get back on a schedule...so not in my community yet.}