s2: Bloggish: Juicy Fruit

Mar 05, 2009 15:14

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: here
Tested 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
tfbody
tfbuttonflash
lemon header
lime header
orange header
cherry header
strawberry 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;}

style: bloggish

Previous post Next post
Up