If I've mucked this up completely, please let me know as it's my first post here. :) Thank you!
Layout Name: Juicy Fruit
S2 Style: Bloggish
Layout In Use:
hereTested In: Firefox & IE, looks best in Firefox.
Designer: Original CSS by
grrliz @
thefulcrum. Modified with permission by
t-quibbler. Graphics by
t-quibbler.
Other: Multiple headers available; lemons, limes, oranges, or cherries. Also compatible with Insanejournal!
How to Install
- Working in s2, select the Bloggish "unstyled" style.
- Choose 2 column, sidebar on left.
- Click to customize selected theme, choosing "Custom CSS".
- Make sure "Use layout's "Base Weblog" stylesheet" is set to yes.
- In the area for custom stylesheets (not external custom stylesheets), paste the codes below.
- If you wish to use one of the other header options (links below), find the header url "http://i654.photobucket.com/albums/uu265/tqlayouts/juicyfruit/lemonhead.png" and replace it with the url for the header of your preference.
- Rehosting these images is very much appreciated, as I'm not sure how much hotlinking the free photobucket account can accommodate.
- Please be sure to credit both t_quibbler and grrliz.
Images
tfbodytfbuttonflashlemon headerlime headerorange headercherry headerstrawberry header/* Template: Juicy Fruit */
/* Date: 21 February, 2009 */
/* S2 Style: Bloggish */
/* Available at
http://asylums.insanejournal.com/quibblercons/ */
/* Original CSS by Liz a.k.a. grrliz.livejournal.com */
/* Edited by Nell a.k.a. t-quibbler */
/* All graphics by Nell a.k.a. t-quibbler */
* {margin: 0px; padding: 0px; }
html {font-size: 100%; /* IE hack */ }
body {
background: url(
http://i654.photobucket.com/albums/uu265/tqlayouts/juicyfruit/tfbody.png) top left repeat-y #d00f00;
color: #000000;
font-family: veranda, helvetica, arial, sans-serif;
font-size: 62.5%;
text-align: center;
}
a, a:link, a:visited, a:active {color: #84bb00; font-weight: normal; text-decoration: none; outline: none;}
a:hover {color: #000000;}
input, textarea, select {margin: 0px 1px 1px 0px; border: 3px double #84bb00; background: #ffffff; color: #444444;}
blockquote {margin: .2em 2em; font-size: 1em; font-family: veranda, helvetica, arial, sans-serif;}
h1, h2, h3 {font-weight: normal;}
/* --------------------------------- */
/* ---------- PAGE LAYOUT ---------- */
/* --------------------------------- */
#container {position: relative; width: 100%; font-size: 1.2em; text-align: left;}
#pagebody {margin: 0px 0px 0px 0px; width: 1080px;}
#alpha, #beta, #gamma {display: inline; float: left; }
/* sidebar */
#alpha {width: 250px; top left no-repeat transparent;}
#alpha-inner {margin-left: 50px; margin-right: 10px; padding-top: 0px;}
#alpha a, #alpha a:link, #alpha a:visited, #alpha a:active {color: #000000; font-weight: normal; text-decoration: none; outline: none;}
#alpha a:hover {color: #84bb00;}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #c0c0c0;}
div#sidebar a:hover {color: #D9D7D1;}
/* main content */
#beta {width: 790px;}
#beta-inner {margin: 40px 20px 0px 30px 0px;}
/* ---------------------------- */
/* ---------- HEADER ---------- */
/* ---------------------------- */
#banner {background: url(
http://i654.photobucket.com/albums/uu265/tqlayouts/juicyfruit/lemonhead.png) top left no-repeat transparent; font-family: "veranda", helvetica, arial, sans-serif; text-align: right; letter-spacing: 1px;}
#banner-inner {margin: 0px 0px 0px 0px; width: 1107px; height: 269px; bottom left no-repeat transparent;}
/* journal title */
#banner h1 {margin: 0px 20px 0px 20px; padding: 159px 140px 10px 20px; color: #000000; font-family: georgia; font-size: 3.2em; font-weight: bold; font-style: italic; text-align: right;}
/* journal subtitle */
#banner h2 {margin: -10px 56px 0px 0px; padding: -80px 140px 0px 0px; color: #000000; font-family: georgia; font-size: 0.9em; text-transform: uppercase; text-align: right;}
/* ----------------------------- */
/* ---------- CONTENT ---------- */
/* ----------------------------- */
.entry-content {position: static; clear: both;}
.entry-content li {margin: 10px 0px;}
.content-nav,
.skiplinks {padding: 10px 20px; text-align: right;}
.date-header,
div.day h2 {margin: 0px 20px 5px 20px; padding: 0px 0px 5px 0px; color: #aaaaaa; font-size: 1em; font-family: "veranda", helvetica, arial, sans-serif; text-transform: uppercase;}
.entry-userpic {float: right !important; display: inline !important; margin: 0px 20px 5px 10px !important; text-align: center;}
h3.entry-header {
padding: 5px 20px 5px 20px;
border-top: 1px solid #3f95ff;
border-bottom: 1px solid #3f95ff;
background: #e8e8e6;
color: #00000;
font-family: "veranda", helvetica, arial, sans-serif;
font-size: 1em;
font-weight: bold;
line-height: 1.5em;
text-transform: uppercase;
}
.entry-body {padding: 0px 20px; line-height: 1.5em;}
.entry-body ol {margin: 10px 0px 10px 40px;}
.entry-body ul {margin: 10px 0px 10px 20px; list-style-type: none;}
.entry-body ul li {margin: 0px; padding: 3px 0px 3px 17px;}
.entry-body a {border-bottom: 1px solid #ccc;}
.entry-body a:hover {}
.entry-sidebar a {color: #000000; font-weight: normal; text-decoration: none; outline: none;}
.entry-sidebar a:hover {color: #84bb00;}
.metadata {margin: 10px 0px; line-height: 1.2em;}
.metadata img {display: none;}
.ljtags {font-size: 1em; font-weight: bold; text-transform: uppercase;}
.ljtags a {color: #3f95ff; text-decoration: none;}
.ljtags a:hover {color: #666666;}
.entry-footer a,
.entry-footer a:link,
.entry-footer a:visited,
.entry-footer a:active {color: #666666; text-decoration: none;}
.entry-footer a:hover {color: #000000;}
.post-footers {display: block; margin: 3px 0px 0px 0px; }
p.entry-footer {padding: 10px 20px; border-top: 1px solid #d00f00; border-bottom: 1px solid #d00f00; background: #e8e8e6; line-height: 1.5em;}
.separator {}
.comment {margin-bottom: 10px; border-top: 1px solid #e3e3e3;}
.comment-content {padding: 0px;}
.comments-content, .comments-header {margin: 0px 20px;}
.comments, .comments-open-header {line-height: 1.5em;}
.comment-footer {}
.entry,
.trackbacks,
.comments,
.archive {position: static; overflow: hidden; margin-bottom: 0px;}
.entry-content,
.trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content,
.comments-closed { margin: 0px;}
.entry-excerpt,
.entry-body,
.entry-more-link,
.entry-more {}
.entry-footer,
.trackback-footer,
.comment-footer,
.comments-open-footer,
.archive-content { margin: 5px 0px 15px 0px;}
.comments-open label { display: block; }
#comment-author, #comment-email, #comment-url, #comment-text {width: 240px;}
#comment-bake-cookie {margin-left: 0px; vertical-align: middle;}
#comment-post {font-weight: bold;}
img.image-full {width: 100%;}
.image-thumbnail {float: left; width: 115px; margin: 0px 10px 10px 0px;}
.image-thumbnail img {width: 115px; height: 115px; margin: 0px 0px 2px 0px;}
ul.ljtaglist a, dl a {color: #000000; text-decoration: none;}
ul.ljtaglist a:hover, dl a:hover {color: #fec500;}
ul.ljtaglist {margin: 0px; padding: 0px 0px 20px 30px; list-style-type: none;}
ul.ljtaglist li {margin: 0px; padding: 3px 0px 3px 17px;background: url(
http://i654.photobucket.com/albums/uu265/tqlayouts/tuity%20fruity/tfbuttonflash.gif) 0px 5px no-repeat;}
/* ----------------------------- */
/* ---------- MODULES ---------- */
/* ----------------------------- */
.module {font-family: "veranda", helvetica, arial, sans-serif; }
.module-header {padding: 5px 10px; border-top: 1px solid #d00f00; border-bottom: 1px solid #d00f00; background: #E8E8E6; font-size: 1em; text-transform: uppercase;}
.module-content {margin: 0px !important; padding: 0px 10px 20px 10px;}
.module-content a {color: #84bb00; text-decoration: none;}
.module-content a:hover {color: #444;}
.module-list {margin: 0px; padding: 0px; list-style-type: none;}
.module-list-item {margin: 0px; padding: 3px 0px 3px 17px;background: url(
http://i654.photobucket.com/albums/uu265/tqlayouts/tuity%20fruity/tfbuttonflash.gif) 0px 5px no-repeat;}
/* --- default userpic --- */
.module-photo {display: none;}
/* --- default LJ links --- */
.module-viewlinks {position: absolute; top: -50px; margin: 0px auto; width: 950px; font-family: "veranda", helvetica, arial, sans-serif; font-size: 1em; text-transform: uppercase;}
.module-viewlinks .module-content {position: relative; height: 52px; margin: 0px; padding: 0px; bottom right no-repeat transparent;}
.module-viewlinks ul {position: absolute; top: 0px; right: 40px; font-size: 1em; line-height: 30px; list-style-type: none;}
.module-viewlinks li.module-list-item {display: block; float: left; width: 112px; padding: 0px; text-align: center; background: none;}
.module-viewlinks a {color: #272214;}
.module-viewlinks a:hover {color: #407076;}
/* --- link list --- */
.module-typelist {}
/* --- tags --- */
.module-categories {display: none;}
/* --- page summary --- */
.module-pagesummary {display: none;}
/* --- sidebar calendar --- */
.module-calendar .module-content table {border-collapse: collapse; width: 100%;}
.module-calendar .module-content th, .module-calendar .module-content td {width: 14%; padding: 3px 0px; text-align: center;}
.module-calendar .module-content a {padding: 3px 0px; background: #e9e9e9; color: #d00f00; display: block; width: 90%; border: 1px solid #cccccc;}
.module-calendar .module-content a:hover {}
/* ------------------------------ */
/* ---------- CALENDAR ---------- */
/* ------------------------------ */
.module-mmt-calendar { margin-bottom: 15px; }
.module-mmt-calendar .module-content { margin: 0; }
.module-mmt-calendar .module-header { margin: 0; }
.module-mmt-calendar .module-header a { text-decoration: none; }
.module-mmt-calendar table { width: 100%; }
.module-mmt-calendar th { text-align: left; }
.module-mmt-calendar td {width: 14%; height: 75px; text-align: left; vertical-align: top;}
.day-photo {width: 54px; height: 54px;}
.day-photo a {display: block;}
.day-photo a img {width: 50px; height: 50px;}
.lj-view-entry .entry {padding: 20px 0px 0px 0px;}
.lj-view-archive #beta-inner,
.lj-view-month #beta-inner,
body.lj-view-tags #beta-inner {padding: 0px 20px 20px 20px !important; text-align: left;}
body.lj-view-tags #beta-inner h2 {padding: 0px 20px !important;}
.lj-view-archive #beta-inner table {width: 90%; margin-left: auto !important; margin-right: auto !important; border: 1px solid #ccc !important;}
.lj-view-archive #beta-inner table th {padding: 5px 0px; border: 1px solid #ccc !important; text-align: center;}
.lj-view-archive #beta-inner table td {padding: 5px 2px; border: 1px solid #ccc !important;}
.lj-view-archive #beta-inner ul {margin: 0px 20px; list-style-type: none;}
.lj-view-archive #beta-inner ul li {display: inline; padding-right: 20px;}
.lj-view-month #beta-inner dl {line-height: 1.5em;}
.lj-view-month #beta-inner dt {margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #e3e3e3;}
.lj-view-month #beta-inner dd {margin-bottom: 1em; padding-left: 3em;}
/* ----------------------------------------------------- */
/* WHATEVER YOU DO, DO NOT EDIT ANYTHING BELOW THIS LINE */
/* ----------------------------------------------------- */
/* .pkg class wraps enclosing block element around inner floated elements */
.pkg:after
{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .pkg { display: inline-block; }
/* no ie mac \*/
* html .pkg { height: 1%; }
.pkg { display: block; }
/* */
/* ----------------------------------------------------- */
/* ---------- ADD FURTHER CSS OVERRIDES BELOW ---------- */
/* ----------------------------------------------------- */
.module-syndicate {display: none;}
.module-powered {display: none;}