Layout 054 : Flora Vintage
Click for a Live Preview.
( Layout ) #054 : Flora Vintage
This is a remix of dulcitone's layout Early Dawn that I made for the Layout Remix challenge at tube.
So... my thoughts... Well, I didn't make this layout anywhere near what I planned it out to be (see my design board). Even though it was a remix, I didn't feel like making a generic layout-- which is why it looks a bit different from the original. I kept the colours and the general mood of dulcitone's layout (feminine, cute, minimal), but the skeleton code and format is completely different. I've fully customized the archive, tags, reply page, pop ups, and comment pages (which I'm quite proud of) so install it and try it out!
I think minus from tube wanted my opinion on remix challenges. Well, I think it was a fun challenge! I probably made this a lot more difficult than it should have been since I'm a little stubborn as to what I produce (30 minute simple layout VS 6 hour complicated one? I took the 6 hour route ugghh). The challenge itself was quite welcoming to me, but I might not recommend it to beginners. Hmm.
One more story! I was rushed on time since I promised myself that I would post Lamb & Kitty yesterday and I needed to finish this layout the same day. I was sooooo scared that I wouldn't be able to finish and post it since I'm going to IRI tomorrow (Does anyone even know what IRI is!?!). Gosh I talk so much. Anyway, enjoy the layout!
( Install ) Step 1 - System
Select Theme
- Select any S2 Minimalism - Penguins layout.
← Previous Step | 1 | 2 | 3 | Next Step →
( Install ) Step 2 - Stylesheet
Custom CSS
- Use layout's stylesheets: No. IMPORTANT!!
- Custom Stylesheet: /* S2 FLEXIBLE SQUARES --- 054 Flora Vintage ---
Malionette @ Fruitstyle.livejournal.com
Do not remove this note. */
/* ---------- BODY ---------- */
body { font: 11px georgia ; color: #808080; margin: 0; padding: 0; background: #f9f9f9; }
a {color: #e778b0; text-decoration: none;}
a:hover {color: #ed96c5; }
input, select, textarea, code { background: #f9f9f9; }
h1, h2, h3, h4, h5, h6 {font-family: georgia; color: #e778b0; }
blockquote {background: #f9f9f9; padding: 10px; font: 13px georgia; line-height: 150%; -moz-border-radius: 10px; border-radius: 10px; }
input, select, textarea {border: 1px solid #dddddd; font: 11px georgia; color: #808080; background: #ffffff; }
textarea {font: 12px georgia; padding: 3px;}
#page {padding: 20px 0 0 0;}
.layout {width: 750px; margin: 0 auto; background: #ffffff url(http://img193.imageshack.us/img193/9703/110719reprep.png) repeat; -moz-border-radius: 10px; border-radius: 10px; }
.view-archive .layout, .view-month .layout, .view-tags .layout {padding-bottom: 10px;}
/* ---------- HEADER FOOTER SIDEBAR ---------- */
.u-wrap, .header h3, .nav-sub, .sidebar, .footer , .header h2, .hr {display: none; }
.nav {text-align: center; margin: 10px 0 10px 0; padding: 10px 0 20px 0; }
.page-nav {text-align: center; margin: 10px 0 10px 0; padding: 20px 0 10px 0; }
.nav li {margin: 0; padding: 10px 5px 10px 5px; margin: 0 5px 0 5px; text-align: center; list-style: none; display: inline; font-size: 13px; letter-spacing: 1px;
-moz-border-radius-bottomright: 10px; border-radius-bottom-right: 10px; -moz-border-radius-bottomleft: 10px; border-radius-bottom-left: 10px; background: #ffffff; }
.page-nav li {margin: 0; padding: 10px 5px 10px 5px; margin: 0 5px 0 5px; text-align: center; list-style: none; display: inline; font-size: 13px; letter-spacing: 1px;
-moz-border-radius-topright: 10px; border-radius-top-right: 10px; -moz-border-radius-topleft: 10px; border-radius-top-left: 10px; background: #ffffff; }
.nav a, .page-nav a {padding: 0 5px 0 5px; color: #c0b1b0; }
.nav a:hover, .page-nav a:hover { color: #e778b0; }
.content-inner-in {text-align: center; }
.entry-wrap {text-align: left; }
.item-selected a, .item-selected a:hover, li.item-selected {color: #e778b0; background: #f9f9f9;}
/* ---------- ENTRY ---------- */
.entry-title { padding: 0 10px 10px 10px; font: italic 16px georgia; }
.vcard dt, .vcard dd, .vcard dl {padding: 0; margin: 0 ;}
.vcard {font-size: 0; position: absolute; margin: -38px 0 0 -150px; -moz-border-radius: 10px; border-radius: 10px; padding: 0 0 10px 0; background: #e778b0;}
.vcard:hover {background: #ed96c5; }
.vcard a {font: 9px arial; letter-spacing: 1px; font-weight: lighter; color: #ffffff; }
.vcard dt img {background: #ffffff url(http://img193.imageshack.us/img193/9703/110719reprep.png) repeat; padding: 10px;
-moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #ffffff; }
.vcard a:hover {color: #dddddd; }
.username {color: #404040; font-size: 0pt; }
.username .ljuser {display: block; padding: 1px 0 0 0;}
.updated {display: none; }
.entry > dd {margin: 0; padding: 5px 10px 5px 10px; font: 11px arial; }
.entry { padding: 10px 0 10px 0; clear: both; background: #ffffff; margin: 10px; -moz-border-radius: 10px; border-radius: 10px; min-height: 150px; }
/* ---------- META ---------- */
.metadata {display: none; }
.ljtags {margin: 10px 0 0 0;}
/* ---------- ENTRY LINKBARS ---------- */
.entrymenu { text-align: left; border-top: 1px solid #dddddd; }
.entrymenu ul, .entrymenu li, .entrysubmenu ul, .entrysubmenu li {margin: 0; padding: 0; text-align: center; list-style: none; display: inline; }
.entrymenu a, .entrysubmenu a {padding: 0 10px 0 10px; font: 10px times new roman; text-transform: lowercase; letter-spacing: 2px; }
.entrymenu a:hover , .entrysubmenu a:hover {color: #dddddd; }
.entrysubmenu { border-top: 1px solid #dddddd; }
/* ---------- ARCHIVE YEAR ---------- */
.view-archive .entry-text {background: #ffffff; clear: both; text-align: center; }
.view-archive .entry-text ul { border-bottom: 1px solid #dddddd; padding: 10px; }
.view-archive .entry-text li {display: inline; padding: 0 10px 0 10px;}
.calendar-wrap table {width: 50%; margin: 0 auto; margin-bottom: 20px; background: #dddddd;}
.calendar-wrap table caption {padding: 10px; }
.calendar-wrap td {padding: 5px; background: #ffffff; }
/* ---------- ARCHIVE MONTH ---------- */
.view-month .entry-title {text-align: center; margin: 0 auto; float: none; padding: 3px 0 10px 0;}
.view-month .entry-text {background: #ffffff; clear: both; padding: 10px; text-align: left; }
.view-month .entry-text dt {padding: 5px; border-bottom: 1px solid #dddddd; font-size: 14pt; letter-spacing: -1px; }
.view-month .entry-text dd {padding: 0 0 0 50px; }
/* ---------- TAGS ---------- */
.content-tags {background: #ffffff; padding: 10px; }
/* ---------- COMMENTS TOP HALF ---------- */
.entry-linkbar {clear: both; display: block; opacity: .7; text-align: center; background: #f9f9f9; padding: 5px 0 5px 0; margin-bottom: 10px; }
.entry-linkbar img:hover {opacity: .6; }
.view-entry .entry, .view-reply .entry {margin-bottom: 0; }
.view-entry .entry-wrap + .hr + .entry-wrap .entry, .view-reply .entry-wrap + .hr + .entry-wrap .entry {background-color: transparent; }
.comments-links {padding: 10px; text-align: center; background: #ffffff; margin-bottom: 10px; -moz-border-radius: 10px; border-radius: 10px;
font: 10px times new roman; text-transform: lowercase; letter-spacing: 2px; }
.view-entry table[cellpadding="3"] {font-weight: lighter; letter-spacing: 2px; background: #ffffff; -moz-border-radius: 10px; border-radius: 10px; opacity: .7;}
/* ---------- COMMENTS BOTTOM HALF ---------- */
.entry-comments-text > table {margin: auto; margin-top: 10px; margin-bottom: 10px; }
.comment-wrap {margin: 0 0 10px 0; background: #f9f9f9; -moz-border-radius: 10px; border-radius: 10px; background: #ffffff; clear: both;}
.comment-upic {background: #ffffff url(http://img193.imageshack.us/img193/9703/110719reprep.png) repeat; padding: 10px;
-moz-border-radius: 10px; border-radius: 10px; margin: 10px 0 0 10px; }
.comment-upic img {width: 50px; height: 50px; border: 1px solid #ffffff;}
.comment-head-in, .comment-upic {float: left; }
.comment-head-in {padding: 10px 0 0 0;}
.comment-head-in p {margin: 0px 0 0 10px; font-size: 7pt; padding: 0 0 5px 0;}
.comment-head-in p img {height: 16px; width: 16px; }
.comment-head-in h3 {font-size: 14pt; letter-spacing: -1px; padding: 0 0 0 10px; margin: 0; }
.comment-head p img {vertical-align: top;}
.screened {background: #f9f9f9; }
.partial {padding: 10px; }
.comment-text {padding: 10px; clear: left; font: 11px arial; }
.comment-menu {padding: 5px 0 5px 10px; color: transparent; border-top: 1px solid #dddddd; font: 10px times new roman; text-transform: lowercase; letter-spacing: 2px; }
/* ---------- REPLY AND DELETE ---------- */
div.ljcmtmanage {border: 0; background: #ffffff; color: #808080; }
#qrform table, #postform table {width: 100%; margin: 0 0 10px 0; border: 0 !important; padding: 10px; background: #ffffff; -moz-border-radius: 10px; border-radius: 10px; }
#qrform td {text-align: left; }
#postform textarea {width: 100%; }
#postform table {margin: 10px 0 0 0; }
#postform table table {border: 0 !important;}
#postform table td {text-align: left; }
/* ---------- EXTRA ---------- */
div.ContextualPopup div.Inner {border: 0; background: transparent !important; font: 10px arial !important; }
div.ContextualPopup div.Userpic {margin-right: -30px; padding: 10px; background: #e778b0; -moz-border-radius: 10px; border-radius: 10px; }
div.ContextualPopup div.Content {-moz-border-radius: 10px; border-radius: 10px; background: #ffffff; color: #808080; padding: 10px; border: 1px solid #dddddd; }
div.ContextualPopup div.Inner div.Content a {color: #e778b0 !important; text-decoration: none !important;font-weight: lighter !important; }
div.ContextualPopup div.Inner div.Content span.alias-unavailable a {color: #e778b0 !important}
div.ContextualPopup div.Inner div.Content a:hover,
div.ContextualPopup div.Inner div.Content .alias-unavailable a:hover {color: #ed96c5 !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; }
← Previous Step | 1 | 2 | 3 | Next Step →
( Install ) Step 3 - 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 | Next Step →
( Optional ) Add a Banner
The recommended banner size is 750px wide.
.header {background: url(HTTP://URLHERE.PNG); height: ###px; -moz-border-radius: 10px; border-radius: 10px;}
;){kind=link}
Note: The top links will cover part of your header and your header will automatically have rounded edges.
- Replace HTTP://URLHERE.PNG with your banner url
Replace ### with your banner height (pixels) - Add the code to the bottom of the Custom Stylesheet box
Add a Banner | Replace Colours | Replace Images
( Optional ) Replace Colours
#ffffff#f9f9f9#ed96c5#e778b0#dddddd#c0b1b0#808080#
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
