S2 Expressive: Escapist
Erm. Hi! First post here. And while this isn't my first layout, it's my first try customizing anything this extensively, and my first major foray into working with Expressive. Be gentle please? ♥
ETA 26 July 2010: Edited to comply with the new community rules RE: download packs. Code and images are now directly available on the entry, though I couldn't fit in the Paid/Perm layer code. I've left the download link up, in case anyone still wants to use it.
View LIVE Preview?
Also view Live Preview @ my personal journal!
TitleEscapist StyleS2 Expressive Account TypeAny (Plus best w/ ads placed between entries) Features (All)Custom Image Navigation, Custom User & Security Icons, Custom comment forms, Entry/Sidebar Header Ornaments, Custom Bullets, Entry Divider, Header Image Features (Paid/Perm)Multi-Level Tags, Userpic links to allpics.bml, Multiple Custom Text Widgets, additional security icon for Public entries DisabledTitle, Subtitle, Friends Page Title, Nav Text NotesThis design was originally intended to replace an old Component-based style on my personal journal. I was happy with it, and so decided to share :) Inspired by the song “Escapist” by Nightwish. Questions? F.A.Q. // Crediting // Original Entry Like this?Watch millenniumangel // More Layouts
Codes:
Basic/Plus CSS:
html { scrollbar-base-color: #32004b !important; scrollbar-track-color: #15081c !important; scrollbar-face-color: #32004b !important; scrollbar-highlight-color: #32004b !important; scrollbar-3dlight-color: #32004b !important; scrollbar-darkshadow-color: #32004b !important; scrollbar-shadow-color: #32004b !important; scrollbar-arrow-color: #662d91 !important; } body { font-family: lucida sans unicode, lucida sans, century gothic, trebuchet ms, tahoma, verdana, arial, helvetica, san-serif !important; font-size: 10pt !important; text-align: justify !important; cursor: crosshair !important; color: #ddb9f1 !important; background: url(http://yoururl.com/BACKGROUND.png) #15081c top left repeat fixed !important; background-image: url(http://yoururl.com/BACKGROUND.png) !important; background-color: #15081c !important; background-position: top left !important; background-attachment: fixed !important; background-repeat: repeat !important; } a, a:link, a:visited { text-decoration: none !important; color: #7c3aa7 !important; cursor: crosshair !important; } a:hover { cursor: move !important; color: #00a99d !important; text-decoration: overline underline !important; } b, strong { color: #c966fd !important; } .post-asset .asset-body table.djp { width: 90% !important; margin: 0 5% 0 5% !important; background-color: #15081c !important; border: 3px solid #32004b !important; } .post-asset .asset-body td.djp { background-color: #15081c !important; border: 1px solid #440e62 !important; } .noborder { border: 0px solid #15081c !important; } .bgcolour { background-color: #32004b !important; } .bgcolour-noborder { background-color: #32004b !important; border: 0px solid #32004b !important; } .post-asset .asset-body th.djp { font-style: italic; font-family: garamond, georgia, century schoolbook, palatino linotype, times new roman, serif !important; font-size: 14pt !important; font-weight: normal !important; color: #dbbaff !important; border-bottom: 1px solid #32004b !important; } .post-asset .asset-body table.noborders, .post-asset .asset-body th.noborders, .post-asset .asset-body td.noborders { border: 0px solid #15081c !important; } .post-asset .asset-body h1, .post-asset .asset-body h2, .post-asset .asset-body h3, .post-asset .asset-body h4, .post-asset .asset-body h5, .post-asset .asset-body h6 { font-family: garamond, georgia, century schoolbook, palatino linotype, times new roman, serif !important; color: #d9b7ff !important; font-weight: normal !important; font-style: italic !important; line-height: 80% !important; text-align: center !important; } .post-asset .asset-body h1 { font-size: 40pt !important; } .post-asset .asset-body h2 { font-size: 36pt !important; } .post-asset .asset-body h3 { font-size: 32pt !important; } .post-asset .asset-body h4 { font-size: 28pt !important; } .post-asset .asset-body h5 { font-size: 24pt !important; } .post-asset .asset-body h6 { font-size: 20pt !important; } .post-asset .asset-body ul { list-style: url(http://yoururl.com/BULLET.png) outside !important; margin-left: 40px !important; margin-top: -10px !important; margin-bottom: -10px !important; display: block !important; } .post-asset .asset-body ol { list-style: upper-roman inside !important; margin-left: 40px !important; margin-top: -10px !important; margin-bottom: -10px !important; display: block !important; } .post-asset .asset-body li { margin-left: 40px !important; } /* -------------------------------------- */ /* Kat's Custom Classes */ .coloured { color: #d3aded !important; } .notice { font-size: 12pt !important; font-family: trajan pro, sans-serif !important; font-weight: bold !important; color: #e07087 !important; text-transform: uppercase capitalize !important; } .sub-notice { font-weight: bold !important; color: #e07087 !important; } .post-asset .asset-body h1.sans, .post-asset .asset-body h2.sans, .post-asset .asset-body h3.sans, .post-asset .asset-body h4.sans, .post-asset .asset-body h5.sans, .post-asset .asset-body h6.sans { font-family: century gothic, trebuchet ms, sans-serif !important; font-style: normal !important; } /* -------------------------------------- */ /* Layout Style */ #container-inner { width: 950px !important; min-height: 100% !important; margin: 0 auto !important; text-align: left !important; } /* Added a Content Background because the images and background colour weren't showing up as the same on all monitors... */ #page { background: url(http://yoururl.com/CONTENT-BACKGROUND.png) repeat top left #15081c !important; } #content { margin-top: 50px !important; } .asset-inner { padding: 10px 0 10px 0 !important; } #header, .connections-view #header { background: no-repeat top center url(http://yoururl.com/HEADER.png) !important; height: 460px !important; z-index: 1 !important; padding-bottom: 50px !important; width: 950px !important; } #header-text { margin: 0 0 0 0 !important; float: left !important; min-height: 140px !important; color: #ffffff !important; width: 950px !important; z-index: 5 !important; } #header-inner, .connections-view #header-inner { background: url(http://yoururl.com/NAVBAR.png) no-repeat !important; z-index: 10 !important; width: 950px !important; height: 460px !important; } #header-text a { color: #ffffff !important; } #header a { font-weight: normal !important; } #header-name { display: none !important; } #header-description { display: none !important; } .nav { clear: both !important; display: block !important; position: relative !important; overflow: hidden !important; width: 950px !important; height: 460px !important; list-style: none !important; padding-top: 15px !important; z-index: 5 !important; } .nav .item { display: block !important; position: relative !important; float: left !important; clear: both !important; z-index: 5 !important; } .nav a { font-weight: normal !important; color: #a186be !important; text-decoration: none !important; border-left: 0px double #ffffff !important; font-size: 0pt !important; text-decoration: none !important; width: 300px !important; height: 50px !important; margin-left: 50px !important; display: block !important; position: relative !important; float: left !important; clear: both !important; z-index: 5 !important; } .nav .current a { font-weight: bold !important; text-decoration: none !important; color: #ffffff !important; z-index: 5 !important; } .asset-name { background-image: url(http://yoururl.com/ORNAMENT.png) !important; background-repeat: no-repeat !important; background-position: left !important; padding-left: 27px !important; } .lj-entry-securityicon, .subj-link { padding: 0 0 0 5px !important; } .asset-header { background: url(http://yoururl.com/SUBJECT-BORDER.png) no-repeat !important; height: 75px !important; padding: 15px 0 0 0 !important; overflow: hidden !important; } .asset-header-content-inner .asset-meta { text-align: right !important; } .asset-name a, .asset-name, .asset-stream-list .post-asset .asset-name a, .page-header1 { font-family: garamond, georgia, "palatino linotype", serif !important; font-size: 20pt !important; font-style: italic !important; font-weight: normal !important; text-decoration: none !important; color: #945eb1 !important; overflow: hidden !important; } .asset-name a:hover, .asset-stream-list .post-asset .asset-name a:hover { color: #00a99d !important; text-decoration: overline underline !important; } .post-asset .asset-body { text-align: justify !important; } .post-asset .asset-body blockquote, blockquote { border: 0px solid #342440 !important; background: url(http://yoururl.com/BLOCKQUOTE.png) top left no-repeat !important; padding-left: 40px !important; padding-bottom: 5px !important; padding-top: 5px !important; padding-right: 5px !important; width: 80% !important; margin: 0 10% 0 10% !important; font-family: garamond, georgia, "times new roman", serif !important; font-size: 14pt !important; font-style: italic !important; color: #c4a4d4 !important; min-height: 200px !important; } .asset-footer { background-image: url(http://yoururl.com/DIVIDER.png) !important; height: 56px !important; background-position: center !important; background-repeat: no-repeat !important; padding: 2px !important; } .asset-tags-list a:hover { color: #00a99d !important; background-color: #15081c !important; text-decoration: overline underline; } .post-asset .appwidget-qotd table tr td div { border: 1px solid #3f254d !important; } .post-asset .user-icon img { background-color: #1b0b23 !important; padding: 10px !important; border: 1px solid #3f254d !important; clear: both !important; } .post-asset .user-icon a img { border: 0px solid #3f254d !important; background-color: #15081c !important; padding: 16px 0 0 16px !important; } .post-asset .user-icon { background-color: #15081c !important; float: right !important; margin: 0px 0px 10px 10px !important; } .user-icon span { background-color: #15081c !important; } .widget-header { background-image: url(http://yoururl.com/ORNAMENT.png) !important; background-repeat: no-repeat !important; background-position: left !important; padding-left: 27px !important; } .widget-header, .widget-header a, .widget .widget-header a, .widget-header .edit a { color: #945eb1 !important; font-family: garamond, georgia, "palatino linotype", serif !important; font-style: italic !important; font-size: 20pt !important; text-transform: none !important; } .widget-header a:hover, .widget .widget-header a:hover. .widget-header .edit a:hover { color: #00a99d !important; text-decoration: overline underline !important; } .widget-content .user-icon a img { padding: 5px !important; margin: 5px 25px 5px 25px !important; background: #1b0b23 !important; border: 1px solid #3f254d !important; } .widget-content .user-icon a:hover img { background: #08181c !important; border: 1px solid #254d47 !important; } .comment-even { background-color: #15081c !important; border: 1px dotted #271232 !important; padding: 10px !important; } .categories-widget .widget-list .item { margin: 0 0 0 10px !important; } .archive-widget .widget-list .item, .typelist-widget .widget-list .item { list-style-image: url(http://yoururl.com/BULLET-SIDEBAR.png) !important; font-weight: normal !important; } /* -------------------------------------- */ /* Forms Styles */ #userpics select, select, select { color: #a186be !important; background-color: #15081c !important; border: 1px solid #662d91 !important; } textarea, input { background-color: #15081c !important; color: #a186be !important; border: 1px solid #662d91 !important; font-family: lucida sans unicode, lucida sans, century gothic, trebuchet ms, tahoma, verdana, arial, helvetica, san-serif; !important; font-size: 8pt !important; } #prop_opt_preformatted, #logincheck, #otherljuser, #talkpostfromanon, #talkpostfromoidlo, #spellcheck { color: #a186be !important; background-color: #440e62 !important; border: 1px solid #662d91 !important; font-family: lucida sans unicode, lucida sans, century gothic, trebuchet ms, tahoma, verdana, arial, helvetica, san-serif !important; font-size: 8pt !important; } /* -------------------------------------- */ /* Contextual Popup */ div.ContextualPopup { position: relative !important; margin: 5px 0 0 20px !important; font-weight: normal !important; font-size: 9pt !important; font-face: lucida sans unicode, lucida sans, century gothic, trebuchet ms, tahoma, verdana, arial, helvetica, san-serif; !important; } * html div.ContextualPopup { background: none !important !important; } div.ContextualPopup img { border: 0 !important; } div.ContextualPopup div.Inner { position: relative !important; top: -2px !important; left: -2px !important; background-color: #f5e6ff !important; color: #440e62 !important; border: 1px solid #662d91 !important; padding: 0px !important; width: 20em !important; } * html div.ContextualPopup div.Inner { top: 0px !important; left: 0px !important; } div.ContextualPopup .Content { padding: 2px 4px 6px 4px !important; margin-right: 50px !important; line-height: 1.4 !important; } div.ContextualPopup .Relation { font-weight: bold !important; } div.ContextualPopup .Content .OnlineStatus { font-weight: bold !important; } div.ContextualPopup .Content .GizmoBlurb { font-size: smaller !important; } div.ContextualPopup .Userpic { float: right !important; top: 0 !important; right: 0px !important; padding: 4px 4px 0 0 !important; } * html div.ContextualPopup .Userpic { top: 2px !important; } div.ContextualPopup .Userpic img { margin: 0 auto !important; max-width: 50px !important; width: 50px; /*IE Max-width */ height: auto !important; vertical-align: middle !important; } div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: underline !important; font-weight: bold !important; color: #662d91 !important; } /* -------------------------------------- */ /* Locked Icon */ * html span.lj-entry-securityicon img { visibility: hidden !important; } .lj-entry-securityicon img[src*="icon_protected.gif"] { width: 0; height: 0; background-image: url(http://yoururl.com/Icons/SEC_FRIENDS.png) !important; background-repeat: no-repeat; padding: 16px 16px 0 0 !important; } /* Private Icon */ .lj-entry-securityicon img[src*="icon_private.gif"] { width: 0; height: 0; background-image: url(http://yoururl.com/Icons/SEC_PRIVATE.png) !important; background-repeat: no-repeat; padding: 16px 16px 0 0 !important; } /* Group Icon */ .lj-entry-securityicon img[src*="icon_groups.gif"] { width: 0; height: 0; background-image: url(http://yoururl.com/Icons/SEC_GROUP.png) !important; background-repeat: no-repeat; padding: 16px 16px 0 0 !important; } /* so that IE users will see a new image */ * html span.ljuser { width: 0; height: 0; background-image: url(http://yoururl.com/Icons/USER_JOURNAL.png) !important; background-repeat: no-repeat; padding: 0px 16px 16px 0px !important; } * html span.ljuser img { visibility: hidden; } /* icon for users */ .ljuser img[src*="userinfo.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url(http://yoururl.com/Icons/USER_JOURNAL.png) !important; padding: 16px 16px 0 0 !important; } /* icon for communities */ .ljuser img[src*="community.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://yoururl.com/Icons/USER_COMMUNITY.png) !important; padding: 16px 16px 0 0 !important; } /* icon for sponsored communities */ .ljuser img[src*="sponcomm.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://yoururl.com/Icons/USER_SPONCOMM.png) !important; padding: 16px 16px 0 0 !important; } /* icon for syndicated */ .ljuser img[src*="syndicated.gif"] { width: 0; height: 0; background-repeat: no-repeat; background-image: url(http://yoururl.com/Icons/USER_SYNDICATED.png) !important; padding: 16px 16px 0 0 !important; } /* icon for news */ .ljuser img[src*="newsinfo.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://yoururl.com/Icons/USER_NEWS.png) !important; padding: 16px 16px 0 0 !important; } /* icon for open-id */ .ljuser img[src*="openid-profile.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(http://yoururl.com/Icons/USER_OPENID.png) !important; padding: 16px 16px 0 0 !important; }
.Zip Pack: Download @ Millennia Studios (.zip file)
Images:
RULES OF USE
1) Credit millenniumangel in your profile, links list, or both!
2) Upload ALL images to your own website or hosting space!
3) DO NOT claim as your own! I spent a long time working on this layout!
4) Comments and critiques are love, but not required. :)
5) Do not port to other blog systems!
Resources credited in the original entry
INSTALLATION INSTRUCTIONS
1. Download the .zip archive and extract OR copy the code in the textbox and save the images provided.
2. Upload all images to your own webspace!
3. Replace the links in the CSS file with the matching URLs on your webspace.
4. Go to the "Select Journal Style" page, type "Unstyled" in the search box, and select the Expressive Unstyled layout.
5. Now go to the "Customize Journal Style" page, click "Custom CSS", and copy-past everything in your CSS into the "Custom CSS" box.
6. Save the changes, and then go about customizing text as you see fit! :D