[Layout] McFly
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: ueda_love1
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, except the 'Circular' one.
2. Sidebar: Customize as you wish.
3. Custom CSS: Set all 3 dropdown boxes to No, copy & paste the code into the Custom stylesheet textbox and select Save Changes:
/*----------------------------------------------------------------------------------------------
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: #e7dea6 url() fixed; text-align: center; color: #000000; font-family: arial, sans-serif; font-size: 11px;}
::-moz-selection {color: #000000; background: #FCF9E6;}
a, a:link, a:visited {color: #7d461a; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; cursor: crosshair;}
a:hover {color: #a8931f; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; cursor: crosshair;}
/*----------------------------------------------------------------------------------------------
PAGE SET-UP
-----------------------------------------------------------------------------------------------*/
#header, #footer {background: #FFFFFD; padding: 8px; text-align: center; text-transform: uppercase; font-size: 10px;}
ul.navheader, ul.navfooter {padding: 0; margin: 0;}
ul.navheader li, ul.navfooter li {display: inline; padding: 10px;}
#content {width: 630px; text-align: justify; background: #FFFFFD; margin: auto; padding: 10px;}
#maincontent {margin-right: 190px; margin-top: 20px;}
#sidebar {width: 160px; float: right; margin-top: 20px; border-left: 1px dashed #a8931f; padding-left: 10px;}
#lj_controlstrip {text-transform: lowercase;}
.title, .subtitle, .clearfoot, .clear {display: none;}
.entry ul li, .entry ol li {padding-left: 5px; margin-left: 10px;}
/*----------------------------------------------------------------------------------------------
ENTRIES
-----------------------------------------------------------------------------------------------*/
.entry_text img {max-width: 300px; overflow: hidden;}
.datesubject {margin: 10px 0; text-transform: uppercase; font-size: 10px;}
.subject {color: #7d461a; font-size: 15px; font-weight: bold;}
.currents {text-align: left; text-transform: lowercase;}
.ljtags {padding-top: 10px; font-weight: bold; text-transform: lowercase;}
h2 {padding-left: 25px; text-align: left; font-size: 10px; text-transform: uppercase; font-weight: normal;}
.ljtaglist {list-style-type: square;}
.comments {text-align: right; clear: left;}
.comments a {text-transform: uppercase;}
.separator {height: 10px;}
.userpic, .userpicfriends {position: relative; float: right; margin-left: 10px; text-align: center; color: #7d461a; background-color: #FFFFFD !important;
border: 1px solid #E1DFDF; font-family: arial; font-size: 11px; padding: 3px;}
/*----------------------------------------------------------------------------------------------
SIDEBAR
-----------------------------------------------------------------------------------------------*/
#sidebar .defaultuserpic {text-align: center; margin: 10px 0;}
#sidebar .defaultuserpic img {background: #F8F8F8; border: 1px solid #E1DFDF; padding: 5px;}
.calendar {width: 100%; text-align: center; line-height: 10px;}
.sbarcalendar, .sbarcalendarposts {background: #e7dea6; border: 1px solid #E1DFDF;}
.sbartitle, .sbarbody, .sbarbody2 {padding: 0px; margin-bottom: 15px;}
ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none; margin-left:5px; list-style-type:circle; font-size:11px; font-family:arial, sans-serif; color:#000000;}
li.sbartitle {padding: 0; list-style: none; margin-bottom: 10px; text-transform: uppercase; font-size: 15px; font-weight: bold; color: #7d461a;}
/*----------------------------------------------------------------------------------------------
CALENDAR PAGE
-----------------------------------------------------------------------------------------------*/
ul.year {text-align: center; padding-bottom: 10px;}
ul.year li {display: inline;}
table.yeartable {margin: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #E1DFDF; background: #e7dea6;}
table.yeartable td.yearday {text-align: center; border: 1px solid #E1DFDF; background: #e7dea6;}
td.yearmonth {border: 0;}
input, textarea, option, button, select {font-family: arial, sans-serif; background: #e7dea6; border: 1px solid #E1DFDF; font-size: 11px; color: #000000; padding: 1px;}
/*----------------------------------------------------------------------------------------------
COMMENTS PAGE [ paid/plus accounts ]
-----------------------------------------------------------------------------------------------*/
.skiplinks {text-align: center;}
#postform img {display: none;}
.box {border: 0; clear: none !important;}
textarea.textbox {width: 95% !important;}
.datesubjectcomment {background: #FFFFFD; color: #000000; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0px; border: 5px solid #FFFFFD; background: #FFFFFD; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.box {border-style: solid; border-width: 1px 0px 0px 0px; border: #FCF9E6; padding: 10px; clear: left; clear: none !important;}
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FDFDFD; color: #000000;}
.commentreply {position: relative; margin: 10px; font-size: 11px; font-family: arial, sans-serif; color: #000000;}
.commentbox {border: 1px solid #FCF9E6; margin: 10px; background: #FDFDFD;}
.commentboxpartial {border: 1px solid #FCF9E6; margin: 10px; background: #FDFDFD;}
.commentinfo {background: #FDFDFD; 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: 650px; height: 425px;
background: url(http://i33.tinypic.com/290ztap.jpg) no-repeat;}
Artist Notes:
OK, this shouldn't have taken so long, but for some reason, the image I was going to use for the header, didn't want me using it because it wouldn't do what I wanted it to do. Well, I looked at the second image ueda_love1 provided and got inspired by it. So that's how this layout came out to be. It took me a week to complete this layout because of the header not cooperating. Once I got inspired by the second image, it took me a total of 1 hour to complete. So I'm hoping ueda_love1 loves this, because I enjoyed making it, once I got inspired by the image!
Credit me: greenberryhair, shindii_ruiizu, or cheverloo.
Comments and/or notes = ♥!
Requests are accepted through Cheverloo's request post, in my request post @ greenberryhair, or through shindii-ruiizu@dA.
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: ueda_love1
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, except the 'Circular' one.
2. Sidebar: Customize as you wish.
3. Custom CSS: Set all 3 dropdown boxes to No, copy & paste the code into the Custom stylesheet textbox and select Save Changes:
/*----------------------------------------------------------------------------------------------
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: #e7dea6 url() fixed; text-align: center; color: #000000; font-family: arial, sans-serif; font-size: 11px;}
::-moz-selection {color: #000000; background: #FCF9E6;}
a, a:link, a:visited {color: #7d461a; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; cursor: crosshair;}
a:hover {color: #a8931f; font-size: 9px; font-weight: bold; text-transform: uppercase; text-decoration: none; cursor: crosshair;}
/*----------------------------------------------------------------------------------------------
PAGE SET-UP
-----------------------------------------------------------------------------------------------*/
#header, #footer {background: #FFFFFD; padding: 8px; text-align: center; text-transform: uppercase; font-size: 10px;}
ul.navheader, ul.navfooter {padding: 0; margin: 0;}
ul.navheader li, ul.navfooter li {display: inline; padding: 10px;}
#content {width: 630px; text-align: justify; background: #FFFFFD; margin: auto; padding: 10px;}
#maincontent {margin-right: 190px; margin-top: 20px;}
#sidebar {width: 160px; float: right; margin-top: 20px; border-left: 1px dashed #a8931f; padding-left: 10px;}
#lj_controlstrip {text-transform: lowercase;}
.title, .subtitle, .clearfoot, .clear {display: none;}
.entry ul li, .entry ol li {padding-left: 5px; margin-left: 10px;}
/*----------------------------------------------------------------------------------------------
ENTRIES
-----------------------------------------------------------------------------------------------*/
.entry_text img {max-width: 300px; overflow: hidden;}
.datesubject {margin: 10px 0; text-transform: uppercase; font-size: 10px;}
.subject {color: #7d461a; font-size: 15px; font-weight: bold;}
.currents {text-align: left; text-transform: lowercase;}
.ljtags {padding-top: 10px; font-weight: bold; text-transform: lowercase;}
h2 {padding-left: 25px; text-align: left; font-size: 10px; text-transform: uppercase; font-weight: normal;}
.ljtaglist {list-style-type: square;}
.comments {text-align: right; clear: left;}
.comments a {text-transform: uppercase;}
.separator {height: 10px;}
.userpic, .userpicfriends {position: relative; float: right; margin-left: 10px; text-align: center; color: #7d461a; background-color: #FFFFFD !important;
border: 1px solid #E1DFDF; font-family: arial; font-size: 11px; padding: 3px;}
/*----------------------------------------------------------------------------------------------
SIDEBAR
-----------------------------------------------------------------------------------------------*/
#sidebar .defaultuserpic {text-align: center; margin: 10px 0;}
#sidebar .defaultuserpic img {background: #F8F8F8; border: 1px solid #E1DFDF; padding: 5px;}
.calendar {width: 100%; text-align: center; line-height: 10px;}
.sbarcalendar, .sbarcalendarposts {background: #e7dea6; border: 1px solid #E1DFDF;}
.sbartitle, .sbarbody, .sbarbody2 {padding: 0px; margin-bottom: 15px;}
ul.sbarlist, li.sbaritem {padding: 0; margin: 0; list-style: none; margin-left:5px; list-style-type:circle; font-size:11px; font-family:arial, sans-serif; color:#000000;}
li.sbartitle {padding: 0; list-style: none; margin-bottom: 10px; text-transform: uppercase; font-size: 15px; font-weight: bold; color: #7d461a;}
/*----------------------------------------------------------------------------------------------
CALENDAR PAGE
-----------------------------------------------------------------------------------------------*/
ul.year {text-align: center; padding-bottom: 10px;}
ul.year li {display: inline;}
table.yeartable {margin: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #E1DFDF; background: #e7dea6;}
table.yeartable td.yearday {text-align: center; border: 1px solid #E1DFDF; background: #e7dea6;}
td.yearmonth {border: 0;}
input, textarea, option, button, select {font-family: arial, sans-serif; background: #e7dea6; border: 1px solid #E1DFDF; font-size: 11px; color: #000000; padding: 1px;}
/*----------------------------------------------------------------------------------------------
COMMENTS PAGE [ paid/plus accounts ]
-----------------------------------------------------------------------------------------------*/
.skiplinks {text-align: center;}
#postform img {display: none;}
.box {border: 0; clear: none !important;}
textarea.textbox {width: 95% !important;}
.datesubjectcomment {background: #FFFFFD; color: #000000; padding: 5px; margin-top: 20px;}
.userpiccomment {position: relative; top: -30px; left: 0px; border: 5px solid #FFFFFD; background: #FFFFFD; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left;}
.box {border-style: solid; border-width: 1px 0px 0px 0px; border: #FCF9E6; padding: 10px; clear: left; clear: none !important;}
.reply {position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px; text-align: justify; background: #FDFDFD; color: #000000;}
.commentreply {position: relative; margin: 10px; font-size: 11px; font-family: arial, sans-serif; color: #000000;}
.commentbox {border: 1px solid #FCF9E6; margin: 10px; background: #FDFDFD;}
.commentboxpartial {border: 1px solid #FCF9E6; margin: 10px; background: #FDFDFD;}
.commentinfo {background: #FDFDFD; 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);}
;}){kind=link}
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);}
;}){kind=link}
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);}
;}){kind=link}
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);}
;}){kind=link}
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);}
;}){kind=link}
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);}
;}){kind=link}
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: 650px; height: 425px;
background: url(http://i33.tinypic.com/290ztap.jpg) no-repeat;}
Artist Notes:
OK, this shouldn't have taken so long, but for some reason, the image I was going to use for the header, didn't want me using it because it wouldn't do what I wanted it to do. Well, I looked at the second image ueda_love1 provided and got inspired by it. So that's how this layout came out to be. It took me a week to complete this layout because of the header not cooperating. Once I got inspired by the second image, it took me a total of 1 hour to complete. So I'm hoping ueda_love1 loves this, because I enjoyed making it, once I got inspired by the image!
Credit me: greenberryhair, shindii_ruiizu, or cheverloo.
Comments and/or notes = ♥!
Requests are accepted through Cheverloo's request post, in my request post @ greenberryhair, or through shindii-ruiizu@dA.