s2 flexible squares: secret diary
click image for full size, live version at my journal.
Style: S2 Flexible Squares
Layout name: Secret Diary
Account: Basic, Plus & Paid
Browsers: tested in Flock and Firefox
Go to Select Journal Style and pick a Flexible Squares theme.
Choose 'Sidebar on left'
Choose 'Customize Selected Theme'
Then click "Custom CSS' and paste the following code in the box
Make sure all drop down boxes are set to NO.
Be sure to switch off the default userpic, or it will look wonky CSS
/*--------------------------------------------------- -----------------------------------------------------*/ body { background-color: ; background: url(http://i48.tinypic.com/30wt9cp.png) repeat fixed 0 0; text-align: justify; color: #000000; font-family: Georgia, Helvetica, sans-serif; font-size: 9px; margin:0; } a, a:link, a:visited { color: #6a2042; text-decoration: none; } a:hover { color: #f4eaef; text-decoration: overline; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } Blockquote { font-family:Arial, Helvetica; background-color:#ffffff; color:#6a2042; font-size:7.5pt; border-bottom:#6a2042 2px solid; border-left:#6a2042 2px solid; border-top:#6a2042 2px solid; border-right:#6a2042 2px solid; padding:15px; } /*--------------------------------------------------------------------- General page alignment and width ------------------------------------------------------------------------*/ #content { width: 60%; background-color: #ffffff; margin-left: 20px; margin-right: auto; padding-left: 20px; padding-right: 10px; margin-top: -10px; border-width: none; border-style: ; border-color: ; } # maincontent { width:740px; text-align: justify; margin-top:40px; margin-left: 20px; font-family: "georgia", sans-serif; font-size: 13px; background-color: #ffffff; color: #000000; border-style: none; border-color: #; border-width: ; text-align: justify; } #sidebar { margin:30; float: top; padding:9px 0; min-height:5px; background-color: #ffffff; font-size: 8.5pt; font-family:arial; color: #555; width: 100%; text-align: justify; border-bottom:20px #ffffff solid; border-top:2px #ddd solid; } .subcontent { width:740px; background-color:#ffffff;} /*----------------------------------------------------------------------------- Header - you can add a header image with either #header or .headerimage --------------------------------------------------------------------------------*/ #header { width: 100%; margin: 40; text-align: center; background-color: #fffff; color: #000000; background-image:; } } .headerimage { /* for formatting header image */ } /*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: #6a2042; font-size: 8px; text-transform: uppercase; letter-spacing: 4px; } div#header a:hover, div#footer a:hover { color: #f4eaef; text-decoration: underline; letter-spacing: 2px; text-transform: lowercase; } /*title and subtitle*/ .title { font-family: OldSansBlack, sans-serif; padding-top:100px; padding-right:40px; font-size: 45px; text-transform: lowercase; letter-spacing:-3px; font-weight: bold; line-height: 70%; top: 100px; color: #6a2042; padding: 5px 15px; } .subtitle{ font-family: "OldSansBlack", sans-serif; font-size: 9px; font-weight: normal; top: 10px; letter-spacing:5px; text-transform: uppercase; line-height:30%; text-align:center; color: #b86c8f; padding: 5px 15px; } /*----------------------------------------------------------------------------- Header - top navigation --------------------------------------------------------------------------------*/ /* header -- links to views; title of journal; subtitle of journal */ ul.navheader { padding: 20px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; } ul.navheader li { display: inline; padding: 0 3px 0 3px; } /*----------------------------------------------------------------------------- Entry stuff ------------------------------------------------------------------------*/ .subcontent { width:760px; } .entry { padding: 15px; margin: 5px; width: 92%; background-color: #00000; color: #00000; line-height:170%; font-family: Arial, sans-serif; font-size: 9px; text-align: center; border-width: 1px; border-color: #ffffff; border-style: solid; border-left:1px #eee solid; border-right:1px #eee solid; border-bottom:1px #eee solid; } .entry_text { padding: 30px 50px; min-height:100px; text-align:justify; } .entry_text img { max-width:500px; } .userpic, .userpicfriends { float: left; margin: 10px 35px 10px -2px; font-family:arial; font-size: 7pt; text-transform:uppercase; color:#ffffff!important; border:1px #eee solid; padding:5px; } .date { padding-top:3px; line-height: 100%; color: #897f84; font-family: OldSansBlack, sans-serif; font-size: 8px; letter-spacing: 4px; text-transform:uppercase; font-weight: normal; } li.viewing { text-transform:lowercase; border: none; font-size: 8px; letter-spacing: 2px; font-weight: normal; color: #817c7f;} .subject { font-weight: normal; font-family: OldSansBlack, sans-serif; font-size: 18pt; text-transform:uppercase; letter-spacing:-1px; color: #6a2042; } .subject a, .subject a:link, .subject a:visited { color: #6a2042; } .subject a:hover { color: #b0b9c8; } .datesubject { background-color: #ffffff; padding: 5px; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /*--------------------------------------------------------------------- Entry Stuff - Current Mood, Music and Location ------------------------------------------------------------------------*/ .currents, .currentmood, .currentmusic { font-family: Arial, sans-serif; font-size: 8px; letter-spacing:1px; color: #6a2042; text-transform:uppercase; } /*--------------------------------------------------------------------- Entry Stuff - Comments ------------------------------------------------------------------------*/ .comments { font-family: Arial, sans-serif; font-size: 10px; letter-spacing:2px; text-align: right; background-color: #ffffff; padding: 0px 5px 0px 5px; text-transform:uppercase; position: relative; top: 15px; } div.comments a, div.comments a:link, div.comments a:visited{ color: #6a2042; } div.comments a:hover { color: #b0b9c8; text-decoration: none; } /*--------------------------------------------------------------------- Entry Stuff - Separator ------------------------------------------------------------------------*/ .separator{ /* for formatting separators between entries */ height: 40px; } /*------------------------------------------------------------ Special friends page customization -------------------------------------------------------------------------------*/ .userpicfriends { position: relative; float: left; padding: 3px; margin: 0 auto; text-align: center; border-style: solid; border-width: 1px; border-color: #ffffff; font-family: "Verdana", sans-serif; font-size: 11px; z-index: 15; } .userpic img .userpic a font, .userpicfriends a font { color:#999999!important; } /*------------------------------------------------------------ Sidebar -------------------------------------------------------------------------------*/ .defaultuserpic { text-align: center; } .sbarheader { padding: 0px 5px 0px 5px; } .sbarbody2 { float:right; width:55%; margin-right:4%; text-align:right; font-size:7.3pt; text-transform:lowercase; letter-spacing:1px; } div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #b8b8b8; font-size:7.3pt; text-transform:uppercase; padding:2px; } div#sidebar a:hover { color: #000000; text-decoration: none; } /*------------------------------------------------------------ Sidebar - Calendar -------------------------------------------------------------------------------*/ table.calendar { display: none; margin-right: auto; margin-left: auto; display: none; } .sbarcalendar { border-color: #000000; border-width: 1px; border-style: solid; display: none; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; } .sbarcalendarposts { border-color: #000000; display: none; border-width: 1px; border-style: solid; background-color: #ffffff; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; } /*------------------------------------------------------------ Sidebar - link box contents and sidebar box titles -------------------------------------------------------------------------------*/ ul.sbarlist {padding: 0; margin-left: 0; list-style: none; text-align:center } li.sbaritem { display: inline-block; width: 100px; padding: 5px; margin-bottom: 2px; color: #777; border-bottom: #dddddd 1px dashed; list-style: none; text-align:center; text-transform: lowercase; } li.sbartitle { display:none; } /*---------------------------------------------------- footer ----------------------------------------------------------------*/ #footer { width: 100%; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; background-color: #ffffff; color: #6a2042; border-color: #ffffff; border-width: 1px; border-style: solid; 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: #999999; } table.yeartable td.yearday { background-color: #ffffff; text-align: center; } td.yearmonth { border-style: none; } /*---------------------------------------------------- Comments pages ----------------------------------------------------------------*/ .datesubjectcomment { background-color: #f4eaef; padding: 5px; margin-top: 20px; } .userpiccomment { position: relative; border-width: 3px; border-style: solid; border-color: #ffffff; background-color: #ffffff; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; border-width: 1px; border-color: #ffffff; border-style: solid; } .box { border-style: solid; border-width: 1px 0px 0px 0px; border-color: #999999; padding: 10px; clear: left; } input, textarea { background-color: #ffffff; color: #000000; } 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: #6a2042; } .replytosubject { font-weight: bold; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Verdana", sans-serif; color: #6a2042; } .commentbox { border-color: #999999; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #ffffff; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #ffffff; } .datesubjectcomment a:hover { color: #b0b9c8; } .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; text-transform:uppercase; font-size:7pt; letter-spacing:2px; } /*-------------------------------------------- Misc -----------------------------------------*/ .clear { height: 15px; }
Please be sure to credit feel_the_fire
You're welcome to make changes, so long as the credit remains intact
P.S. This is my very first layout, so bear with me.
It's very simple compared to most of the awesome layouts posted here.
♥