s2 layout: dream dust for my pirate valentine [minmalism]

Feb 13, 2009 09:08

Valentine's day is tomorrow or something, so I pimped out some of my layouts with valentine versions. Firstly is Dream Dust for My Pirate Valentine, in minimalism. Most of this was pretty simple, except for the hours I spent getting the buttons to show up cross-browsers.



picture | livelayout: dream dust for my valentine pirate
style: minmalism
accounts: Basic, Paid, and Sponsored
features:custom comment pages, mini icons, sidebar
browsers: IE7, FF, Safari, Chrome, and Opera

/*
dream dust for my valentine pirate by milou veronica
*/

a:link, a:visited, .content .header .nav .item a, .page-nav a {color:#DF5353; border-bottom:none;text-decoration:none}
a:hover,.sidebar a:hover, .ljuser a b:hover, .content .entry .entry-text .author a { color:#DF7D7D; text-decoration:none}
b, u {color:#222222} i,s {color: #EFB8B8} .sidebar i, .sidebar s {color: #BB7B7B}
a img{border:none}
.content .header .hr, .content .header .userpic, .content .header h1 .ljuser.vcard,.content .header h1, .hr, hr, .content-tags .comma, .hide_date #page .entry .entry-date, .sidebar .hr, .hr hr, .sidebar .hr, #post-sticky.entry .entry-title{display:none}
.content .header h2, .header h3 {font-weight:normal;font-style:italic;letter-spacing:-.08em;color:#111111;font-size:2em;padding:0;margin:0;line-height:1} .header h3{color:#DF8181;font-size:1.3em;letter-spacing:-0.01em}

/* PAGE */
body {background-color:#FFC0C0; font-size:0.62em; font-family: Georgia, Times, serif; color: #555555; line-height:1.5; padding:0;margin:0} html, #page{min-width:764px}
.content {float:left; margin-right:-100%; width:100%}
.column-right .content-inner {margin:0 0 0 220px; padding-right: 0px}

/* HEADER */
.content .header {background-color:#FFC0C0;margin:0;position:relative}
.content .header .nav {position:relative; text-align:right; padding: 20px 10px 0 0; margin:0} .content .header .nav-sub {margin:0; width:0;padding: 25px 0px 28px 0px}
.content .header .nav .item {display:inline; line-height:33px; padding:1em; position:relative} .content .header .nav .item a {height: 0px; width: 0px; padding: 24px; background: transparent no-repeat scroll 0 0; font-size:0}
.content .header .nav li.item-recent a {background-image: url(http://i43.tinypic.com/2vaeb8k.png)}
.content .header .nav li.item-friends a {background-image: url(http://i42.tinypic.com/2lk88z8.png)}
.content .header .nav li.item-archive a {background-image: url(http://i39.tinypic.com/334k786.png)}
.content .header .nav li.item-profile a {background-image: url(http://i43.tinypic.com/hwx0ld.png)}
.content .header .nav .item-addfriend, .content .header .nav .item-rss {margin-left: 33px}
.content .header ul.nav-sub li.item-addfriend {height: 48px}
.content .header .nav li.item-addfriend, .content .header .nav li.item-rss {padding:0px; font-size:0}
#page .btn-add span span span {position:relative; top:25px;height: 48px; padding: 48px 24px 0 24px;font-size:0; background-position: 0 0; background-repeat:no-repeat; background-image:url(http://i43.tinypic.com/4kvf2c.png)}
#page .btn-rss { font-size:0; padding: 0px 0px 0px 10px!important} #page .btn-rss a {padding:0px; font-size:0}
#page .btn-rss span span span {position:relative; top:25px;height: 48px; width:14px; padding: 48px 0 0 48px; background-position: 0 0; background-image:url(http://i42.tinypic.com/34y75gy.png);background-repeat:no-repeat} #page .btn-add { margin: 0; font-size:0; padding:0 0 0 10px}

/* ENTIRES */
.content .entry {margin:0; overflow:hidden; position:relative; padding:0px}
.entry-title {color:#DF3737; font-size:3em;padding: 20px 10px 0; line-height:0.8;font-style: italic; letter-spacing:-0.1em;text-align:left; text-transform: lowercase}
.entry-title a {padding:7px 0 9px 48px;background: transparent url(http://i40.tinypic.com/10cqgw6.png) no-repeat scroll 0 50%; color:#DF3737} .entry-title img {padding-right: 0.5em} .ljuser a {background-image: none; padding-left:0}
.entry-wrap{background-color: #FFFFFF;margin:0px 10px 17px 0;border:1px solid #F7BABA}
.entry-text {clear:both; font-size:1.2em;color: #555555; margin:0; line-height:1.75; padding:1em 2em; position:static; border:0px solid #dddddd; border-bottom:none; min-height: 170px}
.entry-text .author {float:right; font-size:0.85em; margin: -3.5em 3em 1.2em 0em; max-width:120px; position:relative; text-align:center; z-index:10}
.entry-text .author * {margin-left:0px} .entry-text .author dt img {margin-left:0; border: 19px solid #F75959; padding:2px}
.entry-text ul li, .entry-text ol li, .entry-text dl dd {line-height:1.3; margin-bottom:0.3em; margin-left:1.5em} .entry-date, abbr[title], acronym[title] {border:none}
#post-sticky.entry .entry-text {color: #9B5C5C; font-style: italic;background-color:#FFD4D4; border:none;min-height:0; font-size:1.12em; line-height:1.5; padding: 5px}

.metadata {font-size:0.85em; margin: 0; padding:0 0 0 45px; text-transform: lowercase; color: #777777; overflow:hidden}
.metadata dl {padding-left: 18px;background: transparent no-repeat scroll 0 50%; margin:0; padding:2px 0; padding-left: 18px}
.content .entry .entry-text .metadata dt {display:none}.content .entry .entry-text .metadata dd {display:inline; margin-left:0}
dl.meta-location {background-image: url(http://i43.tinypic.com/2w2rh8o.png)}
dl.meta-mood {background-image: url(http://i44.tinypic.com/2nbzym8.png)}
dl.meta-groups {background-image: url(http://i42.tinypic.com/9gd07b.png)}
dl.meta-music {background-image: url(http://i40.tinypic.com/nyuqrl.png)}
.entry-content {padding: 10px 15px; margin:0}

blockquote{border:1px solid #eeeeee;background-image: url(http://i39.tinypic.com/17eq8n.png); line-height:1.75; color:#666666;padding:1em; margin: 10px}
code {display:block; padding:5px;border:1px dashed #DDDDDD;font-size:12px}
form#qrform table {border-width:0px !important}
input, textarea {font-family: Georgia,serif; font-size: 11px; background-image: url(http://i39.tinypic.com/17eq8n.png); border: 1px solid #eeeeee; color: #777777}

.ljtags {margin:1.5em 0; font-size:0.8em; text-transform:lowercase;padding-left: 18px; background: transparent url(http://i39.tinypic.com/2u4srhi.png) no-repeat scroll 0 50%}
.entrymenu {clear:both; padding: 0 10px 10px 0 !important; background-color: #fffff; margin: 0}
.entrymenu ul li { display:inline; padding:0;line-height:48px}
.entrymenu ul li a {background: transparent none no-repeat scroll 0 0}
.btn-comments span span span {padding: 26px 22px 32px 29px !important; background-image:url(http://i41.tinypic.com/ivwaw5.jpg);background-repeat:no-repeat}
#page .btn-comment span span span {height:0;width:0;padding: 24px 24px 24px 30px !important; background-image: url(http://i44.tinypic.com/xkn6ah.jpg);font-size:0;background-repeat:no-repeat}
ul li.edit_entry a, ul li.edit_tags a, ul li.mem_add a, ul li.tell_friend a, ul li.watch_comments a, ul li.flag a{ height:0;width:0; padding: 24px 12px 0px 12px !important; font-size:0;background-repeat:no-repeat}
ul li.edit_entry a{ background-image: url(http://i42.tinypic.com/2pzius4.jpg)}
ul li.edit_tags a{background-image: url(http://i44.tinypic.com/10gbojs.png)}li.comments,li.postcomment {float:right}
ul li.mem_add a{background-image:url(http://i40.tinypic.com/dyxcvr.png)}
ul li.tell_friend a{ background-image: url(http://i43.tinypic.com/jl2dna.png)}
ul li.watch_comments a { background-image:url(http://i42.tinypic.com/206yal4.png)}
ul li.flag a {background-image: url(http://i40.tinypic.com/2j1kemx.png)}
/* SIDEBARRR */
.sidebar {margin:0;padding: 0} .sidebar a {color:#ffffff}
.sidebar-inner {overflow:hidden; padding:0; position:relative; float:left; width: 200px; margin-left:10px; background-color:#EF9D9D}
.sidebar-tags .tags comma, .content-tags .comma {display:inline}
.sidebar-block dt {font-size:1.3em; line-height:1.1; margin:0; text-align:right; letter-spacing: -.01em;color: #1a1a1a; text-transform: lowercase; padding: 10px}
.sidebar .calendar-wrap {font-size:1em; height:auto; padding:0; width:auto; margin:0px}
.calendar-wrap table { border-collapse:separate; border-spacing:1px; width:100%}
.calendar-wrap table caption {padding: 0; text-align:center; text-transform: lowercase}
.calendar-wrap table thead th {font-weight:normal; text-align:center}
.calendar-wrap table td {background:#F7AAAA none repeat scroll 0 0; border-color:#eeeeee; font-weight:normal; padding:2px 4px; text-align:right}

.sidebar-summary ul, .sidebar-tags ul, .sidebar-links dd, .sidebar-summary dd {padding: 0; margin:0}
.sidebar-links dd, .sidebar-summary li, .sidebar-tags li {display:list-item; list-style:none; color:#555555; margin: 0; padding: 10px;border-bottom: 1px solid #E39696}
.sidebar-links dd:hover, .sidebar-summary li:hover, .sidebar-tags li:hover {background-color:#F7AAAA}

.sidebar-tags .tags, .content-tags {line-height:2em; position:relative; text-align:center; margin:0; padding:5px} .sidebar-tags li {text-align: left}
.sidebar-powered {text-align:center; background-color: transparent; padding-top:20px} .sidebar-custom dd {margin: 0; padding: 30px 15px; background-color:#F7AAAA}

/* ARCHIVE */
.entry-text .calendar-wrap {height:20em; padding:0 11px; width:100%; margin: 0 0 0 -11px}
.entry-text ul li.active{text-align: left; margin:0 0 0 10px; padding:0 0 0 19px; background: transparent url(http://i42.tinypic.com/2gtufj9.png) no-repeat scroll 0 50%;font-size: 1.4em}
.entry-text .calendar-wrap table {border-collapse:separate; border-spacing:1px}
.entry-text .calendar-wrap table thead th {background-color:#fafafa}
.entry-text .calendar-wrap table td, .entry-text .calendar-wrap table th {border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; color:#cccccc; font-size: 1em}.entry-text .calendar-wrap table td:hover, .entry-text .calendar-wrap table th:hover {border-color: #eeeeee; border-style:solid; border-width: 1px 0 0 1px}
.entry-text .calendar-wrap table td {background:#FFFFFF none repeat scroll 0 0; border-color:#eeeeee; font-size:1em; font-weight:normal; padding:2px 4px; text-align:right}
.entry-text .calendar-wrap table td:hover {background-color:#f8f8f8}

/* TAGS */
.tags-cloud .content-tags {padding: 15px; font-size:1.1em; line-height:1.8em; color:#aaaaaa}

/* FOOTER */
ul.page-nav {list-style:none; font-size: 1.1em; text-transform:lowercase; margin: 40px 0 0; letter-spacing: 2px;text-align:center;padding-bottom:21px}.page-nav li {display:inline}
li.prev a{height: 0px; width: 0px; padding: 22px 32px 32px; background: transparent url(http://i39.tinypic.com/2dgj1gw.png) no-repeat scroll 0 0; font-size:0}
li.next a{height: 0px; width: 0px; padding: 22px 32px 32px; background: transparent url(http://i40.tinypic.com/wuqhao.png) no-repeat scroll 0 0; font-size:0}

/* COMMENT PAGE */
.entry-linkbar { padding:10px 0 0; text-align:center}
.entry-linkbar a {background-image: none; padding:0px}
form#qrform, .replyform{background-color:#FFFFFF;border:1px solid #F7BABA;margin-top:1px}
.entry-comments .entry .entry-text{padding:0; margin:5px 0}.entry-comments-text {overflow-x:auto; overflow-y:hidden} .content .entry-comments {background-color: transparent; border: none}
.comment-wrap { margin-top:5px; padding: 0 0 5px;border: 1px solid #F7BABA; background-color:#FFFFFF} .comment-head {padding: 10px;font-style:italic; letter-spacing:-.07em;font-size:1.4em} .comment-head h3 {margin: 0;font-weight:normal}
.comment-upic img { float:left; vertical-align:bottom; border:1px solid #f7f7f7;background-color:#ffffff; padding:7px;margin: 0 6px 6px 0}
.comment-head p {display:inline; padding-right:10px;margin:0}
.comment-text { margin-left:105px; margin-top:0.4em; padding:5px; min-height: 110px}
.comment-menu {font-size:0.75em; padding-right: 10px;text-align:right}

/* ICONS */
.ljuser { white-space:nowrap} .ljuser a b{font-weight: normal; color: #DF3737; letter-spacing:0px;font-style:italic;font-family:georgia}
.ljuser .ico, .ljuser .ico img {border:0 none !important; margin-right:0em}

.ljuser img {width: 0; height: 0; background: transparent url(http://i43.tinypic.com/330h2s6.png) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i43.tinypic.com/330h2s6.png) no-repeat 0 0 !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url(http://i44.tinypic.com/256wh9l.png) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important}
HTML BODY img.i-ljuser-userhead {height:4px !important;width:0 !important}
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"] , img[src*="btn_del.gif"], img[src*="btn_edit.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*="anonymous.gif"], img[src*="openid-profile.gif"], form img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"] {height: 0px; width: 0px; padding: 0 2px 10px 10px !important; background: transparent none no-repeat scroll 0 0}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"] {padding: 0 2px 16px 16px !important}
img[src*="icon_protected.gif"]{background-image: url(http://i44.tinypic.com/2vkkzf4.png)}
img[src*="icon_private.gif"]{background-image: url(http://i40.tinypic.com/r9ifk8.png)}
img[src*="icon_groups.gif"] {background-image: url(http://i42.tinypic.com/24awvac.png)}
.ljuser img[src*="syndicated.gif"]{background-image: url(http://i40.tinypic.com/24q66pg.png) !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url(http://i43.tinypic.com/34479l0.png) !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url(http://i41.tinypic.com/sqo4f8.png) !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url(http://i43.tinypic.com/2d7sk6c.png) !important}
img[src*="btn_del.gif"] {background-image: url(http://i40.tinypic.com/33mszsl.png)}
img[src*="btn_scr.gif"] {background-image: url(http://i40.tinypic.com/301cx9h.png)}
img[src*="btn_unscr.gif"] {background-image: url(http://i40.tinypic.com/adye5t.png)}
img[src*="btn_freeze.gif"] {background-image: url(http://i41.tinypic.com/25znvuv.png)}
img[src*="btn_unfreeze.gif"] {background-image: url(http://i39.tinypic.com/2j122p1.png)}
img[src*="btn_track.gif"]{background-image: url(http://i39.tinypic.com/30vj5hl.png)}
img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] {background-image: url(http://i42.tinypic.com/e7bdc3.png)}
img[src*="anonymous.gif"] {background-image: url(http://i40.tinypic.com/2n7r5uo.png)}
img[src*="openid-profile.gif"] {background-image: url(http://i44.tinypic.com/15hijjm.png)}
form img[src*="userinfo.gif"] {background-image: url(http://i43.tinypic.com/330h2s6.png)}
img[src*="talk/none.gif"] {background-image: url(http://i44.tinypic.com/2s97z8l.png)}
img[src*="help.gif"] {background-image: url(http://i42.tinypic.com/2rlzuax.png)}
img[src*="pencil.gif"] {background-image: url(http://i39.tinypic.com/2dim8ae.png)}
img[src*="btn_edit.gif"] {background-image: url(http://i44.tinypic.com/205zkts.png)}
.Note .Inner { background-color: #FFFFFF; border: 1px solid #FBE8E8; color: #666666} .ippu .track_title {letter-spacing: 3px; color: #444444; font-weight: normal} div.ljcmtmanage {letter-spacing:0em;background-color: #FFFFFF; border: 1px solid #FBE8E8; padding:10px}

.entry-linkbar img {height:0;width:0;padding:0px 0px 24px 24px !important}
.entry-linkbar img[src*="btn_prev.gif"] {background:url(http://i43.tinypic.com/5oth5x.png)}
.entry-linkbar img[src*="btn_edit.gif"] {background:url(http://i42.tinypic.com/2pzius4.jpg)}
.entry-linkbar img[src*="btn_edittags.gif"] { background:url(http://i44.tinypic.com/10gbojs.jpg)}
.entry-linkbar img[src*="btn_memories.gif"] {background:url(http://i42.tinypic.com/ildevs.png)}
.entry-linkbar img[src*="btn_tellfriend.gif"] {background:url(http://i43.tinypic.com/jl2dna.jpg)}
.entry-linkbar img[src*="btn_tracking.gif"],.entry-linkbar img[src*="btn_track.gif"] {background:url(http://i41.tinypic.com/2148f9u.png)}
.entry-linkbar img[src*="button-flag.gif"] {background:url(http://i40.tinypic.com/2j1kemx.jpg)}
.entry-linkbar img[src*="btn_next.gif"] {background:url(http://i39.tinypic.com/2h7nxa8.png)}

/* MISC */
div.ContextualPopup {position: relative; margin:0 text-transform: lowercase}
div.ContextualPopup div.Inner {color: #888888 !important; border: none; background-color: transparent !important; width: 300px}
div.ContextualPopup .Userpic {padding: 12px; border: 1px solid #eeeeee; background-color: #ffffff}
div.ContextualPopup .Content { padding: 5px; background-color: #ffffff; border: 1px solid #eeeeee; margin: 0 80px 0 0}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited { text-decoration: none !important; font-weight: bold; color: #aaaaaa !important}
div.ContextualPopup .Relation {font-size: 1.3em; color:#1a1a1a}
#lj_controlstrip{background:#F79F9F url() repeat scroll 0 0} table#lj_controlstrip td { color: #666666;border: solid 0px #DF6161; border-left: none}
#lj_controlstrip a {color:#DF6161} #lj_controlstrip_statustext {color: #AF3636}

installation
01.
Choose Journal Style
02.
Select the minimalism theme Claret Mood in "Select a New Theme"
03.
In Choose a Page Setup, select 2 Column (sidebar on right)
04.
To have a sticky post, go to " Text ", and add your text/html into the box labelled Sticky post.
05.
Then go to the "Sidebars " section. If you wish, add your free text to Content of custom block.
06.
Still in "Customise your Theme", go to "Custom CSS ". Ensure Use layout's stylesheet(s) is set to no
07.
Paste code into the Custom Stylesheet box.

notes:Q&A
♚ mini icons by DryIcons and Pinvoke.
♚ Please address all questions to the F.A.Q.
♚ Adding a header image: #page .layout .layout-inner .content .content-inner{background: url(http://URL) top center no-repeat;padding-top: HEIGHTpx;}
♔ Commenting and crediting always appreciated, but not necessary

style: minimalism, wot: layout

Previous post Next post
Up