Layout 053 : Lamb & Kitty
Click for a Live Preview.
( Layout ) #053 : Lamb & Kitty
Lamb & Kitty is the 53rd livejournal layout made by Malionette. Its simple layout flows and works with the outstanding pop colours. The header image is easily swappable and the pink colour can easily be changed to one of the user's taste.
( Install ) Step 1 - System
Select Theme
- Select any S2 Flexible Squares layout.
Page Setup
- Ad Placement: Horizontal
(Ignore if you have a paid account.)
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 2 - Display
Customize Display
- Set the user picture position for each entry: Left
Link List
- Fill your link list with links. Your link list must have more lines than your blurb.
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 3 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 FLEXIBLE SQUARES --- 053 Lamb & Kitty ---
Malionette @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ---------- BODY ---------- */
body { font: 12px lucida grande, arial; color: #505050; margin: 0; padding: 0; background: #000000; }
a {color: #ff6590; text-decoration: none;}
a:hover {color: #f8b5c7; }
#content {background: #ffffff; width: 850px; margin: 0 auto; padding: 0;}
input, select, textarea, code { background: #dddddd; }
h1, h2, h3, h4, h5, h6 {font-family: georgia;}
blockquote {background: #dddddd; padding: 10px; font: 13px georgia; line-height: 150%; }
/* ---------- HEADER ---------- */
#header {background: #333333; margin-top: 6px; height: 40px; overflow: hidden;}
.navheader {padding: 0; margin: 0; float: right;}
.navheader li {list-style: none; display: inline; float: left; }
.navheader li a, .view { height: 40px; padding: 14px 6px 0 6px; color: #aaaaaa; font: 9px arial narrow; text-transform: uppercase; letter-spacing: 1px; display: block; }
.view {background: #505050; color: #ffffff; }
.navheader a:hover {color: #ff6590; background: #000000; }
.title {font: 12px courier new; color: #ffffff; text-transform: uppercase; padding: 13px 0 0 10px; letter-spacing: 2px; }
.subtitle {display: none;}
/* ---------- SIDEBAR ---------- */
#sidebar {background: #505050; padding: 10px 0 10px 0; min-height: 100px; }
#sidebar div, .sbartitle {display: none; }
#sidebar .sbarbody2, #sidebar #sidebar_linklist {display: block;}
.sbarlist {padding: 0px 0px 0px 20px; margin: 0; width: 100px; }
.sbarlist li {list-style: none; border-bottom: 1px dotted #333333; }
.sbarlist li a {font: 9px arial; display: block; padding: 5px 0 5px 0; color: #aaaaaa;}
.sbarlist li a:hover {color: #dddddd;}
.sbarbody2 {float: right; width: 700px; padding: 0 10px 0 0; font: 13px georgia; color: #aaaaaa; line-height: 200%;}
/* ---------- ENTRIES ---------- */
.userpic, .userpicfriends {float: left; padding: 20px 0 20px 20px; background: #ffffff !important; margin: 0 20px 0 0; width: 100px; text-align: center; color: #ffffff;}
.userpicfriends {font: 9px arial narrow; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px; }
.userpicfriends img {padding: 0 0 10px 0;}
.userpicfriends a font {color: #ff6590; text-decoration: none;}
.userpicfriends a font:hover {color: #f8b5c7; }
.subcontent {border-top: 6px solid #000000; clear: both;}
.date {display: none;}
.subject {padding: 20px 0 10px 140px; font: 15px georgia; letter-spacing: 1px;}
.subject a {color: #000000; }
.subject a:hover {color: #aaaaaa; }
.subject img {padding: 0 10px 0 0; }
.entry { padding: 0px; margin: 0; background: #f8b5c7; }
.entry_text, .currents {margin-left: 120px; padding: 0 0 10px 20px; background: #ffffff; }
.ljtags {padding-top: 10px;}
.ljtags, .currents {font: 10px courier new; text-transform: uppercase; }
.currents strong {font-weight: lighter; color: #505050; }
.currents img {float: right; padding: 10px; }
.ljtags a, .currents { color: #aaaaaa; }
.ljtags a:hover {color: #808080; }
.comments {text-align: center; padding: 6px 0 6px 0; background: #ff6590; color: #f8b5c7; clear: both; }
.comments a {color: #ffffff; padding: 6px;}
.comments a:hover {color: #f8b5c7; }
.clear, .clearfoot, .separator {display: none;}
/* ---------- COMMENTS ---------- */
.skiplinks {text-align: center; padding: 6px 0 6px 0; background: #ff6590; color: #f8b5c7; clear: both;}
.skiplinks a {color: #ffffff; padding: 6px;}
.skiplinks a:hover {color: #f8b5c7; }
.lj-view-entry .box {background: #000000;}
.lj-view-entry .box center {border-top: 6px solid #000000; padding: 6px 0 6px 0; background: #333333; color: #dddddd;}
.commentbox , .commentboxpartial {background: #505050; margin: 6px 0 0 0; padding: 6px; color: #aaaaaa; font: 10px courier new; text-transform: uppercase; letter-spacing: 1px; clear: both;}
.commentbox .userpiccomment {float: left; margin: 0 10px 0 0; }
.datesubjectcomment strong { font: 15px georgia; letter-spacing: 1px;}
.commentreply {font: 12px arial; color: #ffffff; text-transform: none; letter-spacing: 0; padding-top: 10px;}
.commentbox > div[style*="margin-top"] {text-align: left !important; color: #ffffff; margin-top: 10px !important; }
.commentbox > div > div > a > img {width: 14px; height: 14px;}
.commentbox > div > div > a > img:hover {opacity: .7;}
.box + .box {padding-top: 10px; }
.box + .box center { margin-bottom: 0; padding-bottom: 0; }
.commentbox #qrform table {border: 0 !important; width: 100%; background: #333333; padding: 10px; margin: 23px -16px 6px 0; float: right;}
.commentbox #qrform td {text-align: left;}
/* ---------- REPLY ---------- */
.lj-view-reply .box {border-top: 6px solid #000000; background: #333333; color: #aaaaaa; padding: 15px 10px 10px 10px; }
.lj-view-reply #postform table, .box > div > div > #qrform table {border-top: 1px solid #505050; width: 100%; margin: 10px 0 0 0; padding: 10px 0 0 0; }
.lj-view-reply #postform td, .box > div > div > #qrform table td {text-align: left; line-height: 200%;}
.lj-view-reply #postform td > br {display: none;}
.lj-view-reply .entry {background: #ffffff;}
.box > div > div > #qrform table {background: #333333; color: #ffffff;}
.box > div > div > #qrform table > tbody > tr > td {padding: 0 0 0 10px;}
.box input, .box select, .box textarea {background: #505050; color: #ffffff; border: 0; padding: 1px 3px 1px 3px;}
.box input[type="submit"]:hover {background: #000000;}
/* ---------- ARCHIVE ---------- */
.year { padding: 0; margin: 0; text-transform: uppercase; padding: 6px 0 6px 0; background: #ff6590; color: #f8b5c7; text-align: center; border-bottom: 6px solid #000000; }
.year li {display: inline; }
.year a {color: #ffffff; padding: 6px;}
.year a:hover {color: #f8b5c7; }
.yeartable {padding: 10px 0 0 0;}
.yearmonth { font: 15px georgia; letter-spacing: 1px; padding: 0 0 10px 0;}
.yearmonth a {font: 12px arial; letter-spacing: 0;}
.subcontent + div + div + div + .skiplinks {border-top: 6px solid #000000;}
.lj-view-month .entry {background: #ffffff; padding: 0 10px 10px 10px;}
.lj-view-month .entry dt {font: 15px georgia; letter-spacing: 1px; font-weight: lighter; }
/* ---------- TAG ---------- */
.lj-view-tags #maincontent {border-top: 6px solid #000000; padding: 0 10px 10px 10px; }
.lj-view-tags #maincontent > h2 {font: 15px georgia; letter-spacing: 1px; font-weight: lighter; padding: 10px;}
.lj-view-tags .ljtaglist li {list-style-type: decimal-leading-zero; display: inline-block; width: 33%; padding: 6px 1px 6px 1px; }
/* ---------- FOOTER ---------- */
#footer {background: #333333; border-top: 6px solid #000000; height: 40px; overflow: hidden; }
.navfooter {padding: 0; margin: 0;}
.navfooter li {list-style: none; display: inline; float: left; }
.navfooter li a, .viewing { height: 40px; padding: 14px 5px 0 5px; color: #aaaaaa; font: 9px arial narrow; text-transform: uppercase; letter-spacing: 1px; display: block; }
.viewing {background: #000000; color: #ffffff; }
.navfooter a:hover {color: #ff6590;}
/* ---------- OTHER BELOW HERE ---------- */
::-moz-selection, ::selection, code::-moz-selection, code::selection { background: #ff6590; color: #ffffff;}
div.ContextualPopup div.Inner {border: 0; background: transparent !important; font: 10px arial !important; }
div.ContextualPopup div.Userpic {margin-right: -30px; padding: 10px; background: #f8b5c7; }
div.ContextualPopup div.Content { background: #333333; padding: 5px; color: #aaaaaa; }
div.ContextualPopup div.Inner div.Content a {color: #ffffff !important; text-decoration: none !important;font-weight: lighter !important; }
div.ContextualPopup div.Inner div.Content span.alias-unavailable a {color: #ffffff !important}
div.ContextualPopup div.Inner div.Content a:hover,
div.ContextualPopup div.Inner div.Content .alias-unavailable a:hover {color: #f8b5c7 !important;}
/* Generated by Malionette's Tiny Icon Generator */
img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img828.imageshack.us/img828/5647/user1z.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img24.imageshack.us/img24/3274/home1p.png) no-repeat !important; padding: 16px 0 0 16px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img6.imageshack.us/img6/9430/heart1f.png) no-repeat !important; padding: 16px 0 0 16px !important; margin-bottom: -5px; }
img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img16.imageshack.us/img16/2691/close1.png) no-repeat !important; padding: 16px 0 0 16px !important; margin-bottom: -5px; }
body > div[style="border"] {background-color: #000000 !important; border: 0 !important;}
.headerimage {background: url(http://img841.imageshack.us/img841/1331/110715heart.jpg) no-repeat top center; height: 159px;}
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Install ) Step 4 - Link Back
Please link back to fruitstyle so others can find my layouts. Put either a button or the code in your Userinfo.
ButtonCode
View available buttonsLayout by fruitstyle
← Previous Step | 1 | 2 | 3 | 4 | Next Step →
( Optional ) Add a Banner
The recommended banner size is 850px wide.
Replace the banner in the layout with your own.
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#ff6590#f8b5c7#dddddd#aaaaaa#808080#505050#333333#000000#
How do I replace layout colours?
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Images
Get all the images at Box.net
How do I replace layout images?
Add a Banner | Replace Colours | Replace Images
Fruitstyle: Layouts and Winamp Skin Designs by Malionette
