Layout 038 : Inspiration City

[malionette]

Click for a Live Preview. | Generator


( Layout ) #038 : Inspiration City
I made this quickly so I can test out my new generator format!

( Install ) Step 1 - System

Select Theme

1. Select any S2 Minimalism - Penguins layout.

← Previous Step | 1 | 2 | 3 | Next Step →

( Install ) Step 2 - Stylesheet

Custom CSS

1. Use layout's stylesheets: No. IMPORTANT!!
   
   
2. Custom Stylesheet: /* S2 MINIMALISM --- 038 Inspiration City ---
   Wingweaver22 @ Fruitstyle.livejournal.com
   Do not remove this note. */
   
   /* ----------------------------- PAGE ----------------------------- */
   
   body {background: #dddddd; padding: 0 !important; margin: 0; font: 12px lucida grande; color: #606060;}
   
   .footer, .sidebar-powered, .u-wrap h1, .u-wrap .userpic, .nav-sub, .sidebar-summary .emdash, .comment-wrap .hr {display: none; }
   .vcard dd, .vcard dl, .vcard dt, .metadata dt, .metadata dd, .metadata dl, .entry-text, .sidebar dd, .sidebar dl, .sidebar dt, .sidebar ul, .entrymenu ul,
   .comment-head-in p { padding: 0; margin: 0; }
   
   a {text-decoration: none; border-bottom: 1px solid transparent; color: #21c3bf; }
   a:hover { color: #90e1df; cursor: help; }
   
   b, strong, .entry-title a {color: #000000;}
   a b:hover, .entry-title a:hover, .entrymenu a:hover {color: #aaaaaa;}
   blockquote b , blockquote strong {color: #ffffff;}
   
   .entry-text img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #dddddd; padding: 3px; }
   .content a img { border-color: #90e1df; }
   .content a img:hover, .entry-linkbar a:hover {opacity: .7; }
   
   blockquote, input, select, textarea {background: #000000; border: 0; color: #ffffff !important; }
   input[type=submit]:hover, select:hover {background: #aaaaaa; cursor: help;}
   blockquote {padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
   
   .hr hr { border: 0; border-top: 1px solid #dddddd; clear: both; padding-bottom: 5px;}
   .content .hr {display: none;}
   
   /* ----------------------------- MAIN FORMS ----------------------------- */
   
   .layout {width: 780px; margin: 0 auto;}
   
   .sidebar {float: left; }
   .sidebar-inner { position: relative; width: 170px; overflow:hidden; float: left; }
   
   .content { float: right; width: 750px; margin: 0 0 0 -750px; }
   .content-inner { position:relative; margin: 0 0 0 170px; overflow: hidden; padding: 0; }
   
   .entry, .sidebar {background-color: #ffffff; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px; margin: 0; }
   .header {background-color: #000000; padding: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-bottomleft: 10px;
   -moz-border-radius-bottomright: 10px; -webkit-border-radius-bottomright: 10px; margin: 0 0 10px 0; }
   
   /* ----------------------------- SIDEBAR ----------------------------- */
   
   .sidebar dt {text-align: center; color: #000000; border-bottom: 1px solid #dddddd; padding: 0 0 10px 0; font-weight: bold;}
   
   .sidebar-cal, .calendar-wrap {border-bottom: 1px solid #dddddd; margin: 0 0 10px 0 !important; }
   .sidebar-cal table, .calendar-wrap table {width: 100%; margin: 5px 0 5px 0; text-align: center; background: #dddddd;}
   .sidebar-cal caption { padding: 5px 0 0 0; }
   .sidebar-cal table td, .calendar-wrap table td {background: #ffffff; font-size: 10px; }
   .sidebar-cal thead, .calendar-wrap thead { background: #000000; color: #ffffff;}
   
   .sidebar-summary li, .sidebar-links dd, .tags li { border-bottom: 1px dotted #dddddd; font-size: 10px; padding: 1px 0 1px 0;}
   .sidebar-summary li > a {font-size: 12px; }
   .sidebar-links dd a {display: block; border-bottom: 0;}
   .summary-comments {border-left: 10px solid #dddddd; padding: 0 0 0 5px; font-size: 10px !important; border-bottom: 0; }
   .summary-comments:hover {border-bottom: 0;}
   
   .sidebar-summary li a:hover, .sidebar-links dd a:hover {background: #f5f5f5; }
   
   .emdash {color: #aaaaaa;}
   
   /* ----------------------------- HEADER ----------------------------- */
   
   .header {padding-bottom: 20px;}
   
   .header h2 {font-size: 18px; color: #ffffff; margin: 0; padding: 0; letter-spacing: 2px; }
   .header h3 {font-size: 10px; color: #aaaaaa; letter-spacing: 1px; margin: 0; float: left; font-weight: normal; }
   
   .nav {margin: -12px 0 0 0; text-align: left; list-style: none; float: right;}
   .nav li {display: inline; font-size: 10px; letter-spacing: 1px; margin: 0 5px 0 5px;}
   
   .item-selected, .nav li a:hover {border-bottom: 1px solid #606060; }
   .item-selected a {color:#aaaaaa;}
   
   /* ----------------------------- ENTRY ----------------------------- */
   
   .entry {margin-bottom: 10px;}
   
   .entry-title {font-size: 18px; border-bottom: 1px solid #dddddd; position: relative; padding: 10px 0 20px 0; color: #000000; font-weight: bold;}
   .entry-title img {margin-right: 10px !important; }
   
   .vcard {float: right; text-align: center; overflow: hidden; margin-top: -50px; position: relative; background: #ffffff; }
   .vcard b {font-weight: normal; }
   
   .vcard dt img {background-color: #000000; border: 10px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
   .vcard dd.username {font-size: 0px; }
   .vcard dd.entry-date, .vcard .ljuser {background: #f5f5f5; padding: 1px 0 1px 0; margin: 0 0 2px 0; font-size: 10px;}
   .vcard .ljuser {width: 126px; display: block;}
   
   .entry-text {padding: 10px 0 0 0;}
   
   .metadata {font-size: 10px; padding: 0 0 5px 0; border-bottom: 1px solid #dddddd; margin: 0 0 10px 0; }
   .metadata dl { margin: 0 0 2px 0; }
   .metadata dt { margin: 0 5px 0 0; padding: 0; float: left; background: #f5f5f5; }
   
   .entrymenu { float: left; }
   .entrymenu, .entrysubmenu {font-size: 10px; padding: 10px 0 0 0; border-top: 1px solid #dddddd; margin: 10px 0 0 0;}
   .entrymenu li, .entrysubmenu li{display: inline; margin: 0 5px 0 0; }
   .entrymenu a {font-weight: bold; font-size: 12px; color: #000000; border-right: 1px solid #dddddd; padding-right: 5px;}
   
   .prev {display: inline; }
   .next {float: right; display: inline;}
   
   .page-nav {background-color: #000000; padding: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0; }
   
   /* ----------------------------- ARCHIVE/TAG ----------------------------- */
   
   .view-archive .entry-text ul {padding: 0 0 10px 0; margin: 0 0 10px 0; text-align: center; font-size: 10px; border-bottom: 1px solid #dddddd; }
   .view-archive .entry-text li {display: inline; padding: 0 5px 0 5px;}
   .view-archive .entry-title {padding-top: 10px; text-align: center; }
   
   .calendar-wrap caption { padding: 5px 0 10px 0; }
   
   /* ----------------------------- COMMENTS ----------------------------- */
   
   .entry-linkbar {padding: 0 0 15px 0; }
   .entry-linkbar a { -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #dddddd; padding: 5px 0px 5px 10px;}
   .entry-linkbar a:hover {background: #f5f5f5; }
   .view-entry .entry-title + .entry-title {padding: 15px 0 15px 0;}
   
   .screened {background: #f5f5f5; }
   .comment-wrap {margin: 0 0 10px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #dddddd; padding: 10px;}
   .comment-head-in p + p a + a, .comment-head-in input + a {padding: 0 10px 0 10px; border-bottom: 0; }
   
   .comment-head-in p + p {margin: 0 0 2px 0; font-size: 10px;}
   
   .comment-upic img {float: right; border: 10px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 0; }
   .comment-text { padding: 10px 0 10px 0; border-top: 1px solid #dddddd; margin: 10px 0 0 0;}
   .comment-menu { border-top: 1px solid #dddddd; padding-top: 5px; color: #aaaaaa; font-size: 10px;}
   
   .comments-links {text-align: center; margin-bottom: 20px; font-weight: bold; }
   
   #subjectIconList table, #qrform table {border: 0 !important;}
   
   .ljcmtmanage { background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; border: 1px solid #dddddd; }
   .ljcmtmanage span {font-size: 10px !important; letter-spacing: 2px; }
   
   #postform table, #qrform table { -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #000000; padding: 10px; margin: 0 auto; color: }
   #postform table td, #postform table td b, #postform table td strong, #qrform table td, #qrform table td b, #qrform table td strong {color: #ffffff;}
   #postform textarea, #postform input, #posform select, #qrform textarea, #qrform input, #qrform select
   {border: 1px solid #aaaaaa; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
   
   /* ----------------------------- IMAGES ----------------------------- */
   
   img[src*="btn_del.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"] , img[src*="btn_freeze.gif"] , img[src*="btn_unfreeze.gif"] ,
   img[src*="btn_track.gif"] , img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="pencil.gif"], img[src*="btn_edit.gif"],
   img[src*="anonymous.gif"] , img[src*="openid-profile.gif"], img[src*="none.gif"] , img[src*="help.gif"] , img[src*="btn_prev.gif"] ,
   img[src*="btn_edittags.gif"] , img[src*="btn_memories.gif"] , img[src*="btn_next.gif"], img[src*="userinfo.gif"] , img[src*="community.gif"],
   img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"] , img[src*="syndicated.gif"] ,img[src*="icon_protected.gif"] ,
   img[src*="icon_private.gif"] , img[src*="icon_groups.gif"] , img[src*="btn_tellfriend.gif"] , img[src*="button-flag.gif"], img[src*="sharethis.gif"]
   {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
   background: transparent url(http://i47.tinypic.com/qz3tkz.gif) no-repeat; border: 0; -moz-border-radius: 0px; -webkit-border-radius: 0px;}
   
   img[src*="btn_del.gif"] { padding: 10px 0 0 7px; background-position: 0px 0px;}
   img[src*="btn_scr.gif"] { padding: 8px 0 0 7px; background-position: 0px -24px;}
   img[src*="btn_unscr.gif"] { padding: 8px 0 0 7px; background-position: 0px -48px;}
   img[src*="btn_freeze.gif"] { padding: 8px 0 0 9px; background-position: 0px -72px;}
   img[src*="btn_unfreeze.gif"] { padding: 8px 0 0 9px; background-position: 0px -96px;}
   img[src*="btn_track.gif"] { padding: 8px 0 0 5px; background-position: -24px 0px;}
   img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"]
   { padding: 8px 0 0 5px; background-position: -24px -24px;}
   img[src*="pencil.gif"], img[src*="btn_edit.gif"]
   { padding: 7px 0 0 7px; background-position: -24px -48px;}
   img[src*="anonymous.gif"] { padding: 8px 0 0 6px; background-position: -24px -72px;}
   img[src*="openid-profile.gif"] { padding: 6px 0 0 7px; background-position: -24px -96px;}
   img[src*="none.gif"] { padding: 6px 0 0 7px; background-position: -48px 0px;}
   img[src*="help.gif"] { padding: 8px 0 0 6px; background-position: -48px -24px;}
   img[src*="btn_prev.gif"] { padding: 5px 0 0 9px; background-position: -72px -24px;}
   img[src*="btn_edittags.gif"] { padding: 10px 0 0 16px; background-position: -72px -48px;}
   img[src*="btn_memories.gif"] { padding: 6px 0 0 12px; background-position: -72px -72px;}
   img[src*="btn_next.gif"] { padding: 5px 0 0 9px; background-position: -72px -96px;}
   img[src*="userinfo.gif"] { padding: 8px 0 0 6px; background-position: -108px 0px;}
   img[src*="community.gif"], img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"]
   { padding: 8px 0 0 9px; background-position: -108px -24px;}
   img[src*="syndicated.gif"] { padding: 6px 0 0 6px; background-position: -108px -48px;}
   img[src*="icon_protected.gif"] { padding: 8px 0 0 6px; background-position: -108px -72px;}
   img[src*="icon_private.gif"] { padding: 8px 0 0 6px; background-position: -108px -96px;}
   img[src*="icon_groups.gif"] { padding: 8px 0 0 10px; background-position: -132px 0px;}
   img[src*="btn_tellfriend.gif"] { padding: 6px 0 0 10px; background-position: -132px -24px;}
   img[src*="button-flag.gif"] { padding: 9px 0 0 7px; background-position: -132px -48px;}
   
   img[src*="sharethis.gif"] {background-image: url(http://i48.tinypic.com/2nk2b9k.png); padding: 9px 0 0 7px; }
   
   #lj_controlstrip {display: none;}
   
   div.ContextualPopup div.Inner {border: 0; background: transparent !important; font: 12px lucida grande !important; }
   div.ContextualPopup div.Userpic {margin-right: -30px; padding: 10px; background: #000000; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
   div.ContextualPopup div.Content { background: #ffffff; color: #606060; border: 1px solid #dddddd; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
   div.ContextualPopup div.Inner div.Content a {color: #21c3bf !important; text-decoration: none !important;}
   div.ContextualPopup div.Inner div.Content span.alias-unavailable a {color: #21c3bf !important}
   div.ContextualPopup div.Inner div.Content a:hover,
   div.ContextualPopup div.Inner div.Content .alias-unavailable a:hover {color: #90e1df !important;}
   
   Feel like customizing? Use the Custom CSS Generator

← 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 760px wide.
.u-wrap {background: url(HTTP://URLHERE.PNG) no-repeat top center; padding: ###px 0 10px 0; margin: 0 0 5px 0}

1. Replace HTTP://URLHERE.PNG with your banner url
   Replace ### with your banner height (pixels)
2. Add the code to the bottom of the Custom Stylesheet box

Add a Banner | Replace Colours | Replace Images


( Optional ) Replace Colours

#ffffff#f5f5f5#dddddd#aaaaaa#90e1df#606060#21c3bf#000000

Add a Banner | Replace Colours | Replace Images

( Optional ) Replace Images

Get all the images at Box.net

Add a Banner | Replace Colours | Replace Images

Fruitstyle: Layouts and Winamp Skin Designs by Malionette