[Layout] NEWS

[greenberryhair]

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: annedee08

Preview



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 one of those themes.

2. Sidebar: Customize as you wish!

3. Custom CSS: Set all dropdown boxes to No, copy & paste the code into the Custom stylesheet textbox and select Save Changes:

~you're the only one for me~:
/*----------------------------------------------------------------------------------------------
S2 FLEXIBLE SQUARES
Layout by Cindie-chan @ http://greenberryhair.livejournal.com
for Cheverloo @ http://cheverloo.livejournal.com
Base Layout by snubbly @ http://snubbly.livejournal.com
-----------------------------------------------------------------------------------------------*/
body {background: #000 url() fixed; color: #F1F1F1;font-family: tahoma; font-size: 10px;}
::-moz-selection {color: #000; background: #FF136C;}

a, a:link, a:active, a:visited {color: #FF136C; text-transform: lowercase; letter-spacing: 1px; text-decoration: none;}
a:hover {color: #F1F1F1; text-transform: lowercase; letter-spacing: 1px; text-decoration: none;}

/*----------------------------------------------------------------------------------------------
PAGE SET-UP
-----------------------------------------------------------------------------------------------*/
#header {background: #000; width: auto; padding: 15px 0px 15px 0px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 12px;}
#footer {background: #000; width: auto; padding: 15px 0px 15px 0px; text-align: right; text-transform: uppercase; font-weight: bold;}
#header a, #footer a {text-transform: uppercase;}
#content {background: #000; width: 700px; margin: auto;}
#maincontent {background: #000; margin-left: 190px; text-align: left;}
#sidebar {background: #000; width: 180px; float: left; text-align: justify; margin-left: 5px;}
#sidebar a {text-transform: uppercase;}

.title, .subtitle, .clearfoot, .clear {display: none;}
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;}
#lj_controlstrip {text-transform: lowercase;}

/*----------------------------------------------------------------------------------------------
ENTRIES
-----------------------------------------------------------------------------------------------*/
.subcontent {padding: 10px; margin-top: 10px; text-align: justify;}
.entry_text {margin-top: 10px; font-family: verdana, sans-serif; font-size: 10px;}
.entry_text img {max-width: 350px; overflow: hidden;}

.date {color: #CCC; text-align: right; font-family: verdana, sans-serif; text-transform: uppercase;}
.subject {letter-spacing: 2px; font-weight: bold; font-size: 14pt; font-style: italic; color: #FF136C; border-bottom: 1px dashed #D1D1D1; text-transform: uppercase; padding-bottom: 2px;}

.currents {color: #CCC; text-transform: uppercase;}
.ljtags {margin-top: 10px; color: #CCC; font-weight: bold; font-family: trebuchet ms, sans-serif; font-size: 9px; text-align: left; text-transform: uppercase;}
.ljtaglist {list-style-type: square;}

.comments {text-align: right; font-weight: bold; margin: 10px 0; clear: right;}
.comments a {text-transform: uppercase;}
.separator {height: 10px;}

h2 {padding-left: 20px; letter-spacing: 2px; font-size: 14pt; font-style: italic; color: #FF136C; border-bottom: 1px dashed #D1D1D1; text-transform: uppercase;}
.userpic {position: relative; float: left; padding: 5px; margin-right: 10px; border: 0; background-color: #FF136C;}
.userpicfriends {position: relative; float: left; padding: 5px; margin-right: 10px; text-align: center; border: 0; background-color: #B2004B !important; font-family: trebuchet ms; font-size: 9px; letter-spacing: 1px;}

/*----------------------------------------------------------------------------------------------
SIDEBAR
-----------------------------------------------------------------------------------------------*/
#sidebar .defaultuserpic {text-align: center;}
#sidebar .defaultuserpic img {background: #FF136C; border: 1px solid #1D1D1D; padding: 5px;}

.sbarbody {padding: 0;}
.sbarbody2 {padding: 0; font-family: verdana, sans-serif; font-size: 10px;}
.sbartitle {color: #FF136C; border-bottom: 1px dashed #D1D1D1; padding: 20px 0 2px 0; letter-spacing: 2px; font-weight: bold; font-size: 14pt; font-style: italic; text-transform: uppercase;}

.calendar {background: #1D1D1D; width: 100%; line-height: 9px;}
.sbarcalendar, .sbarcalendarposts {padding: 3px; border-bottom: 1px solid #FF136C; border-right: 1px solid #FF136C; text-align: center;}

ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;}
li.sbartitle {padding: 0; list-style: none; margin: 10px 0;}

/*----------------------------------------------------------------------------------------------
CALENDAR PAGE
-----------------------------------------------------------------------------------------------*/
ul.year {text-align: center; padding-bottom: 10px;}
ul.year li {display: inline; padding: 0 10px;}

table.yeartable {margin: 0px auto; width: 85%; background: #1D1D1D; line-height: 9px;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #FF136C;}
table.yeartable td.yearday {text-align: right;}

input, textarea, select, option, button {font-family: trebuchet ms; background: #1D1D1D; border: 1px solid #FF136C; font-size: 9px; letter-spacing: 1px; color: #F1F1F1;}

/*----------------------------------------------------------------------------------------------
COMMENTS PAGE [ paid/plus accounts ]
-----------------------------------------------------------------------------------------------*/
#postform img {display: none;}
.skiplinks {text-align: center; margin: 10px 0;}
textarea.textbox {width: 95% !important;}
.box {border: 0; padding: 10px; clear: none !important;}
.datesubjectcomment {background: #1D1D1D; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0; background: #1D1D1D; border: 1px solid #FF136C; padding: 5px; margin: 10px 10px -20px 10px; float: left;}
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #1D1D1D; color: #F1F1F1;}
.commentreply {position: relative; margin: 10px; font-size: 10px; font-family: verdana, sans-serif; color: #F1F1F1;}
.commentbox {background: #1D1D1D; border: 1px solid #1D1D1D; margin: 10px;}
.commentboxpartial {background: #1D1D1D; border: 1px solid #1D1D1D; margin: 10px;}
.commentinfo {background: #1D1D1D; 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: 12px 11px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i36.tinypic.com/2usbl0p.jpg) !important;}
img[src*="community.gif"] {width:0; height: 0; padding: 12px 12px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i33.tinypic.com/11brcbd.jpg) !important;}

/*----------------------------------------------------------------------------------------------
ADD HEADER IMAGE [ edit the width, height and header url ]
-----------------------------------------------------------------------------------------------*/
.headerimage {position: relative; margin: auto; width: 700px; height: 401px;
background: url(http://i34.tinypic.com/34fff2x.jpg) no-repeat;}

to North! to East! go West! go South!:
/*----------------------------------------------------------------------------------------------
S2 FLEXIBLE SQUARES
Layout by Cindie-chan @ http://greenberryhair.livejournal.com
for Cheverloo @ http://cheverloo.livejournal.com
Base Layout by snubbly @ http://snubbly.livejournal.com
-----------------------------------------------------------------------------------------------*/
body {background: #000 url() fixed; color: #F1F1F1;font-family: tahoma; font-size: 10px;}
::-moz-selection {color: #000; background: #FF136C;}

a, a:link, a:active, a:visited {color: #FF136C; text-transform: lowercase; letter-spacing: 1px; text-decoration: none;}
a:hover {color: #F1F1F1; text-transform: lowercase; letter-spacing: 1px; text-decoration: none;}

/*----------------------------------------------------------------------------------------------
PAGE SET-UP
-----------------------------------------------------------------------------------------------*/
#header {background: #000; width: auto; padding: 15px 0px 15px 0px; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 12px;}
#footer {background: #000; width: auto; padding: 15px 0px 15px 0px; text-align: right; text-transform: uppercase; font-weight: bold;}
#header a, #footer a {text-transform: uppercase;}
#content {background: #000; width: 700px; margin: auto;}
#maincontent {background: #000; margin-left: 190px; text-align: left;}
#sidebar {background: #000; width: 180px; float: left; text-align: justify; margin-left: 5px;}
#sidebar a {text-transform: uppercase;}

.title, .subtitle, .clearfoot, .clear {display: none;}
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;}
#lj_controlstrip {text-transform: lowercase;}

/*----------------------------------------------------------------------------------------------
ENTRIES
-----------------------------------------------------------------------------------------------*/
.subcontent {padding: 10px; margin-top: 10px; text-align: justify;}
.entry_text {margin-top: 10px; font-family: verdana, sans-serif; font-size: 10px;}
.entry_text img {max-width: 350px; overflow: hidden;}

.date {color: #CCC; text-align: right; font-family: verdana, sans-serif; text-transform: uppercase;}
.subject {letter-spacing: 2px; font-weight: bold; font-size: 14pt; font-style: italic; color: #FF136C; border-bottom: 1px dashed #D1D1D1; text-transform: uppercase; padding-bottom: 2px;}

.currents {color: #CCC; text-transform: uppercase;}
.ljtags {margin-top: 10px; color: #CCC; font-weight: bold; font-family: trebuchet ms, sans-serif; font-size: 9px; text-align: left; text-transform: uppercase;}
.ljtaglist {list-style-type: square;}

.comments {text-align: right; font-weight: bold; margin: 10px 0; clear: right;}
.comments a {text-transform: uppercase;}
.separator {height: 10px;}

h2 {padding-left: 20px; letter-spacing: 2px; font-size: 14pt; font-style: italic; color: #FF136C; border-bottom: 1px dashed #D1D1D1; text-transform: uppercase;}
.userpic {position: relative; float: left; padding: 5px; margin-right: 10px; border: 0; background-color: #FF136C;}
.userpicfriends {position: relative; float: left; padding: 5px; margin-right: 10px; text-align: center; border: 0; background-color: #B2004B !important; font-family: trebuchet ms; font-size: 9px; letter-spacing: 1px;}

/*----------------------------------------------------------------------------------------------
SIDEBAR
-----------------------------------------------------------------------------------------------*/
#sidebar .defaultuserpic {text-align: center;}
#sidebar .defaultuserpic img {background: #FF136C; border: 1px solid #1D1D1D; padding: 5px;}

.sbarbody {padding: 0;}
.sbarbody2 {padding: 0; font-family: verdana, sans-serif; font-size: 10px;}
.sbartitle {color: #FF136C; border-bottom: 1px dashed #D1D1D1; padding: 20px 0 2px 0; letter-spacing: 2px; font-weight: bold; font-size: 14pt; font-style: italic; text-transform: uppercase;}

.calendar {background: #1D1D1D; width: 100%; line-height: 9px;}
.sbarcalendar, .sbarcalendarposts {padding: 3px; border-bottom: 1px solid #FF136C; border-right: 1px solid #FF136C; text-align: center;}

ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none;}
li.sbartitle {padding: 0; list-style: none; margin: 10px 0;}

/*----------------------------------------------------------------------------------------------
CALENDAR PAGE
-----------------------------------------------------------------------------------------------*/
ul.year {text-align: center; padding-bottom: 10px;}
ul.year li {display: inline; padding: 0 10px;}

table.yeartable {margin: 0px auto; width: 85%; background: #1D1D1D; line-height: 9px;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #FF136C;}
table.yeartable td.yearday {text-align: right;}

input, textarea, select, option, button {font-family: trebuchet ms; background: #1D1D1D; border: 1px solid #FF136C; font-size: 9px; letter-spacing: 1px; color: #F1F1F1;}

/*----------------------------------------------------------------------------------------------
COMMENTS PAGE [ paid/plus accounts ]
-----------------------------------------------------------------------------------------------*/
#postform img {display: none;}
.skiplinks {text-align: center; margin: 10px 0;}
textarea.textbox {width: 95% !important;}
.box {border: 0; padding: 10px; clear: none !important;}
.datesubjectcomment {background: #1D1D1D; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0; background: #1D1D1D; border: 1px solid #FF136C; padding: 5px; margin: 10px 10px -20px 10px; float: left;}
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #1D1D1D; color: #F1F1F1;}
.commentreply {position: relative; margin: 10px; font-size: 10px; font-family: verdana, sans-serif; color: #F1F1F1;}
.commentbox {background: #1D1D1D; border: 1px solid #1D1D1D; margin: 10px;}
.commentboxpartial {background: #1D1D1D; border: 1px solid #1D1D1D; margin: 10px;}
.commentinfo {background: #1D1D1D; 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: 12px 11px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i36.tinypic.com/2usbl0p.jpg) !important;}
img[src*="community.gif"] {width:0; height: 0; padding: 12px 12px 0 0 !important; background-repeat: no-repeat;
background-image: url(http://i33.tinypic.com/11brcbd.jpg) !important;}

/*----------------------------------------------------------------------------------------------
ADD HEADER IMAGE [ edit the width, height and header url ]
-----------------------------------------------------------------------------------------------*/
.headerimage {position: relative; margin: auto; width: 700px; height: 401px;
background: url(http://i38.tinypic.com/atrazp.jpg) no-repeat;}

Artist Notes:

Yeah, there's an ADDITIONAL second header because I made the ~you're the only one for me~ header first and had it ready to be posted, then asked if I could change the text on it. Well, I aim to please, so I tried to remember how I did the header and just changed the text on it. And JAN~! It turned out adorable! Anyway, yeah, so black and pink match and I'm surprised I got the blue to change to pink on the header image! W00T! Sorry, only did the first header for the layout preview! But I did consider the curious readers, and put it under the following cut.

http://i38.tinypic.com/atrazp.jpg">http://i38.tinypic.com/atrazp.jpg" height="286" width="500">
^^click for full view!

Credit me: , , or .
Comments and/or notes = ♥!
Requests are accepted through Cheverloo's http://community.livejournal.com/cheverloo/683.html">request post, in my request post @ , or through http://shindii-ruiizu.livejournal.com">shindii-ruiizu@dA.