s2 minimalism: sinners at the synapse

Apr 17, 2009 22:37

So, Minimalism is my new favourite style. Hahaha.



Live || Preview



**NOTE: IF THIS LAYOUT ISN'T WORKING FOR YOU, PLEASE CHOOSE 'DEEP OCEAN' AS A MINIMALISM THEME. I TOTALLY FORGOT TO INCLUDE THIS IN THE INSTALLATION INSTRUCTIONS /OTL

STYLESHEET OVERVIEWS2 STYLEMINIMALISM ► SINNERS AT THE SYNAPSEBROWSERIE7 ➝ Something's off with the padding of the header icons; I'll try to remedy this for the next minimalism layout.

Mozilla Firefox, Opera (1024x768+)ACCOUNT TYPESBasic, Plus, PaidDISABLEDTitle/subtitleADD-ONSTiny icons, custom comment pagesNAVIGATION STRIPCompatible

INSTALLATION INSTRUCTIONSCODES
/* ---------------------------------------------------
--------- MINIMALISM: SINNERS AT THE SYNAPSE -------
- STYLESHEET AVAILABLE (@) UNEQUALLY.LIVEJOURNAL.COM -
--------- ( PLEASE DO NOT REDISTRIBUTE) --------------
------------------------------------------------------ */

/* -------------------- BODY -------------------- */

body {
background:#eee url('http://tinyurl.com/dzyr4e') repeat fixed 0 0;
font: 0.55em "lucida sans unicode", serif;
color:#000;
line-height:1.5;
padding:0;
margin:0;
}
a, a:visited {color:#00FFDD;
text-decoration:none;
}
a:hover, a:visited:hover {color:#777;
text-decoration:none;
}
textarea, input, select, #username.textbox {border:1px solid #aaa;
background:#fafafa !important;
font:9pt "cambria", "lucida sans unicode", sans-serif !important;
padding:0 !important;
color:#333 !important;
}
textarea, select, #username.textbox {min-width:128px;
}
table {border-collapse:collapse;
border-spacing:0;
}

/* -------------------- PAGE -------------------- */

#page {font-size: 1.3em; }

.layout {
margin: 0px auto;
background: transparent;
color: #3B393A;
text-align: left;
}

.layout-inner {
background: #3f3f3f url('http://i39.tinypic.com/2a9cun5.jpg') bottom repeat-x;
border-bottom:18px solid #111;
height:125px;
width:100%;
padding-top:45px;
position:absolute;
top:0;
}

.content {color:#333;
}
.header {display:inline;
height:auto;
}
.sidebar {width:25%;
float:right;
padding:10px;
background:transparent url('http://img245.imageshack.us/img245/8028/woodiness4.png') top right repeat;
}.entry-content {padding:15px 0 15px 0;
margin-left:-20px;
min-height:150px;
}
.entry a {color:#008e97;
}
.entry a:hover {color:#777;
}
.content-inner {position:absolute;
width:65%;
padding:0 0 0 50px;}

div.entry-wrap disabledcomments {display:none;}

/* ------------------ HEADER -------------------- */
.header .userpic-in, .header .vcard, .userpic {display:none;}
.header-in {text-align:center;
padding:0;
margin:0 auto;
height:143px;
width:690px;
}
.header ul {padding:0;
margin:0px;
list-style-type:none;
height:143px;
float:left;
}
.header ul li.item {padding:0px 5px;
text-align:center;
display:inline-block;
height:auto;
float:left;
}
.header ul li.item a {font-size:0px;
text-transform:uppercase;
text-decoration:none;
letter-spacing:1px;
width:128px;
height:128px;
display:inline-block;
line-height:0px;
position:relative;
top:12px;
}
@-moz-document url-prefix(){.header ul li.item a {top:0;}
}
.header li.item-recent a {
background:transparent url(http://tinyurl.com/cn7e5g) no-repeat scroll 0 0;
}
.header li.item-friends a {
background:transparent url(http://tinyurl.com/d4pygz) no-repeat scroll 0 0;
}
.header li.item-archive a {
background:transparent url(http://tinyurl.com/ccer2a) no-repeat scroll 0 0;
}
.header li.item-profile a {
background:transparent url(http://tinyurl.com/cr7l73) no-repeat scroll 0 0;
}
.header li.item-addfriend, .header li.item-addfriend a {display:none !important;}
.header li.item-rss a {
background:transparent url(http://tinyurl.com/cb8k6k) no-repeat scroll 0 0;
}
.header ul li.item a:hover {text-decoration: none;}
ul.nav-sub {text-align:right;
width:138px;
padding:0;
margin:0;
}

/* HEADER: EXTRAS */
.header H1, .header H2, .header H3 {display:none;}

/* ------------------ FOOTER -------------------- */
ul.page-nav {
list-style: none;
font-size: 0pt;
text-align: center;
}

.page-nav li {display: inline;}

li.prev a{height: 0; width: 0;
padding: 32px;
background: url(http://i39.tinypic.com/2a5nhwx.png) no-repeat;}

li.next a{
height: 0px; width: 0px;
padding: 32px;
background: url(http://tinyurl.com/ccxtxo) no-repeat;}

/*-------------------- ENTRY -------------------*/

.view-month .content-inner, .view-tags .content-inner, .view-entry .content-inner {padding-bottom: 50px;}

.entry-wrap {
background:#fff url('http://i44.tinypic.com/2n9jez9.png') repeat-x; padding: 20px;
-moz-border-radius: 0 0 8% 8%; margin-bottom: 50px;}

.view-entry .entry-wrap, .view-reply .entry-wrap {-moz-border-radius:0;
}
.entry-comments {position:relative;
top:-50px;
background:#fff;
-moz-border-radius:0 0 8% 8% !important;
}
.entry-content textarea{width:430px;
height:120px;
font-family:courier new !important;
}
.entry blockquote {border:3px double #eee;
padding:5px;
}
/* ENTRY: USERPIC */
.content .entry .entry-text .author {position:relative;
font-size:0.85em;
text-align:center;
text-transform:uppercase;
z-index:10;
}
dl.vcard dt img {border:1px solid #eee;
padding:3px;
background:#fafafa;
}
dl.vcard {width:108px;
display:inline;
float:right;
margin:0px 0px 5px 0px;
text-align:center;
color:#aaa;
padding:0;
}
dd.username, dd.entry-date {width:auto;
margin:0;
}
.ljuser img {vertical-align:middle !important;
}
.ljuser a {color:#008e97;
text-decoration:none;
}
.ljuser .ico img {display:none;
}
dd.entry-date {font-size:0.9em;
border-bottom:10px solid #e1e1e1;
background:#eee;
padding:4px;
}
abbr.updated {border:none;
color:#666;
font-weight:bold;
font-family:"arial", sans-serif;
}

/* ---------- ENTRY SUBJECT ----------- */

.content .entry .entry-title {font-size:1.4em;
margin-bottom: 15px;
line-height:2em;}

.entry-title A:link,
.entry-title A:visited {
color:#00FFDD;
font-size: 2em;
letter-spacing: -2pt;
font-weight: bold;
font-family: arial;
text-decoration:none;
border-bottom:none;}

.entry-title A:link:hover, .entry-title A:visited:hover, .entry-title A:link:active, .entry-title A:visited:active {text-decoration:none; color:#d1d1d1;}

.entry-title + .entry-title {color:#00FFDD;
font-size:2.8em !important;
font-family:arial;
letter-spacing:-2pt;
font-weight:bold;
}

/* SUBJECT IMAGES: LOCKED/GROUPS */
.content .entry .entry-title IMG {
padding-right:.5em;}

/*------------------ METADATA ------------------*/
.entry-text .ljtags {margin:1.2em 0;}
.entry-text .ljtags a {color:#aaa; text-decoration: none; font-weight: normal;}
.content .entry .entry-text .metadata DL {margin:0;display:block;}
.content .entry .entry-text .metadata DT, .content .entry .entry-text .metadata DD {
display:inline;
margin-left:0;
font: 8pt franklin gothic medium;
color:#444;}

.ljtags a:hover {color:#00A87E;
}
.ljtags {margin:1.5em 0;
font-size:0.8em;
font-weight:bold;
color:#333;
padding-left:28px;
padding-bottom:4px;
line-height:200%;
background:transparent url('http://tinyurl.com/dg3lua') no-repeat scroll;}

/* -- METADATA: STRONG -- */
.content .entry .entry-text .metadata DT {display:none;}

.entry-text .ljtags {margin:1em 0;text-decoration: none;}

dl.meta-location {background: transparent url('http://tinyurl.com/cgkuq5') no-repeat scroll 0 50%;
padding-left: 17px;}

dl.meta-mood {background: transparent url('http://tinyurl.com/cedwjj') no-repeat scroll 0 50%;
padding-left: 17px;}

dl.meta-groups {background: transparent url('http://tinyurl.com/dhpvxn') no-repeat scroll 0 50%;padding-left: 17px;}

dl.meta-music {background: transparent url('http://tinyurl.com/djbx2x') no-repeat scroll 0 50%;padding-left: 17px;}

/* - METADATA: COMMENT LINKS - */
.entrymenu {clear:both;
padding:5px;
height:45px;
margin:0;
}
dd.entrymenu ul {position:relative;
height:60px;
padding:10px 0 0 0;
border-top:1px solid #eee;
text-transform:lowercase;
list-style-type:none;
margin:10px 0 0 0;
}
dd.entrymenu ul li {float:left;
font-size:0px;
height:25px;
display:inline;
}
dd.entrymenu ul li a {padding:2px 1px 3px 0;
text-decoration:none;
}
dd.entrymenu ul li a:hover {text-decoration:none;
}
dd.entrymenu li.comments {background:transparent url(http://img245.imageshack.us/img245/286/commentbubble.png) no-repeat scroll 0 0;
display:block;
float:left;
line-height:15px;
text-align:center;
height:48px;
width:48px;
}
dd.entrymenu ul li.comments a {display:block;
color:#fff;
font-size:11pt;
margin:20% 11%;
text-align:center;
width:78%;
height:50%;
font-family:"georgia",sans-serif;
padding:0 1px;
}
dd.entrymenu li.postcomment {background:transparent url(http://img245.imageshack.us/img245/6215/additem1.png) no-repeat scroll 0 0;
display:block;
float:left;
height:31px;
margin-right:25px;
width:32px;
}
dd.entrymenu li.postcomment a {color:#fff;
margin-left:0;
padding:0;
width:100%;
height:100%;
display:block;
}
li.edit_entry a, li.edit_tags a, li.mem_add a, li.tell_friend a, li.watch_comments a, li.flag a {display:block;
height:20px;
width:25px;
overflow:hidden;
}
li.postcomment a span, li.edit_entry a span, li.edit_tags a span, li.mem_add a span, li.tell_friend a span, li.watch_comments a span, li.flag a span {display:none;
}
li.edit_entry a, img[src*="btn_edit.gif"]{ background-image: url(http://tinyurl.com/co6sv8);}
li.edit_tags a,img[src*="btn_edittags.gif"]{background-image: url(http://tinyurl.com/ce9hl4);}
li.mem_add a,img[src*="btn_memories.gif"]{ background-image: url(http://tinyurl.com/dkwtpm); }
li.tell_friend a,img[src*="btn_tellfriend.gif"]{ background-image: url(http://tinyurl.com/cpzl5s);}
li.watch_comments a,img[src*="btn_track.gif"] { background-image: url(http://tinyurl.com/czzyaz);}
li.flag a,img[src*="button-flag.gif"] {background-image: url(http://tinyurl.com/cwqhou);}

/*----------------- STICKY POST ---------------- */
#post-sticky.entry .entry-text {color: #222;font-size:1em;line-height:100%;}

/* -------------------- SIDEBAR -----------------*/

.sidebar {margin:0; padding: 0; color:#000; -moz-border-radius: 0 0 15% 15%;}
.sidebar-inner {padding:0; overflow: hidden; position:relative;}
.sidebar a {text-decoration: none; color:#444;}
.sidebar a:hover {text-decoration: none;}

.sidebar-block {margin:0 1px 1em; padding: 0px;overflow:hidden;}

.sidebar-block ul {list-style-type: none; background:#fff; -moz-opacity:.7; filter: alpha(opacity=70); padding: 10px 0; -moz-border-radius: 5%;}
.sidebar-block DT {
font-size:1.5em;
font-weight: bold;
border-bottom: 1px dashed #888;
letter-spacing: -1pt;
font-style: italic;
color:#111;
font-family: georgia;
line-height:1.1;
text-align:left;
padding-left: 15px;
margin-bottom:.4em;}

.sidebar-block dd {padding: 0px; margin:0;}

/* SIDEBAR: SUMMARY */
.sidebar-summary {margin: 15px;}
.sidebar-summary li {padding: 0px; margin:10px;}
.sidebar-summary li a {color:#333;}
.sidebar-summary li a:hover {color:#00A87E;}

/* SIDEBAR: LINKS LIST */
.sidebar-links {width: auto; }
.sidebar-links dd { border-bottom: 1px dotted #888; padding: 10px 0;}
.sidebar-links a {color:#000; padding-left: 15px;}
.sidebar-links dt {padding: 15px; border-bottom: 3px double #777;}
.sidebar-links a:hover {text-decoration: none; }
.sidebar-tags .tags {position:relative;
font-size:1.2em;
line-height:2em;
padding:10px;}

span.comma {color:inherit;}

.sidebar-tags a {padding:0 .1em; color:#444;
border:0 !important; text-decoration:none !important;
font-size:.8em !important;}

.sidebar-tags a:hover {color:#00A87E;}

/* SIDEBAR: CUSTOM BOX */
.sidebar-custom {padding: 25px;}

.sidebar-powered {
text-align:center;
margin-top:4.2em;
padding-bottom: 25px;
}

/* CALENDAR */
.view-archive .entry-text{width:100%;text-align:center;}
.view-archive .entry-text ul{text-align:left;}
.sidebar-cal DT {display:none;}
.content-inner .calendar-wrap {padding:0;
display:inline-block;
height:280px;
width:46%;
margin:1%;
}
.calendar-wrap table {width:100%;}
.sidebar .calendar-wrap table {border-collapse:separate;border-spacing:0px;}
/* SEPARATE ARCHIVES */
.calendar-wrap table caption {padding-bottom:0.5em;
text-align:right;
font-size:1.2em;
text-transform:uppercase;
}
.calendar-wrap table caption a {color:#222;
font-size:2em;
font-weight:bold;
font-family:"cambria", "georgia", serif;
letter-spacing:-.5pt;
text-decoration:none;
}
.calendar-wrap table caption a:hover {text-decoration:none;color:#00FFDD;}
.calendar-wrap table thead {border-top:1px solid #00d2f9; border-bottom:1px double #9E8B2F;}
.calendar-wrap table thead th {padding:3px 0px 1px 0px;
background:#111;
color:#00FFDD;
text-align:center;
font-weight:normal;
}
.calendar-wrap table tbody {border:none;
border-top:0px;
}
.calendar-wrap table tbody td {padding:3px 4px;
font-size:1.1em;
background:#eee;
line-height:29px;
text-align:center;
}
.calendar-wrap table tbody td a {display:block;
padding:2px 4px;
border:0;
margin:-2px -3px;
text-align:center;
text-decoration:none;
color:#888;
}
.calendar-wrap table tbody td a:hover {background:#ddd;
text-decoration:none;
color:#fff;}
.view-archive .content-inner ul {margin-bottom:20px;list-style-type:none;}
.view-archive .content-inner li {display:inline;padding:0px;}
.entry-title form{text-align:center;}
.entry-title form select, .entry-title form input{background:#eee !important;}
.entry-title form a, .entry-title form a:visited{color:#008E97 !important;}
.entry-title form a:hover{color:#777 !important;}

/*-------------------- MISC --------------------*/
div.hr {clear: both;}
div.hr hr {display: none;}

/* ---------------- CUSTOM COMMENTS ------------- */
.entry-comments-text {overflow: auto; overflow-y: hidden; text-align: center;}
.comment-wrap {padding: 1em 0; border-top: 1px dotted #eee; text-align: justify; }
.comment-head {margin-bottom: 1em; padding: 0.5em;}
.comment-head h3 {font-size: 2em;}
.cwoup .comment-head-in {display:none;}
.comment-head .comment-upic {float: left; display: inline; padding: 0px 10px 5px 0px;}
.comment-head .comment-upic img {float: left; border: 1px solid #e1e1e1; padding: 3px;}
.comment-head p, .comment-head img {vertical-align: bottom;}
.comment-text {padding: 0px 0px 0px 10px;}
.comment-menu {padding: 0px 0px 0px 10px; text-align: right;}
.comment-wrap .comment-text .hr {display: none;}
.entry-linkbar { padding:2px; text-align:center; }
form#qrform {border:1px solid #ee0;
}

#qrdiv form {display:block;
padding:5px;
border:1px solid #ddd;
margin:5px 1px 1px; }
#qrdiv #subject {margin:3px 0; }
#qrdiv table {border:none !important; }
.replyform table td {padding-right:.4em; vertical-align:top; }
.replyform textarea {width:90%; }
.replyform img[src*="anonymous.gif"], .replyform img[src*="openid-profile.gif"], .replyform img[src*="userinfo.gif"], .replyform img[src*="pencil.gif"]{display:none;}

/*------------------- TINY ICONS ---------------*/
img[src*="icon_protected.gif"], img[src*=icon_groups.gif"]{
background: url('http://tinyurl.com/d28u9f') no-repeat;
padding: 16px 25px;
height: 0; width: 0;
}
img[src*="icon_private.gif"]{
background: url('http://tinyurl.com/cbb9bn') no-repeat;
padding: 16px 25px;
height: 0; width: 0;
}
img[src*="userinfo.gif"]{
background: url('http://tinyurl.com/cle36l') no-repeat;
padding: 11px 21px;
height: 0; width: 0;
}
img[src*="community.gif"]{
background: url('http://tinyurl.com/dnf9a7') no-repeat;
padding: 12px 22px;
height: 0; width: 0;
}
img[src*="btn_edit"],img[src*="btn_edittags.gif"], img[src*="button-flag.gif"], img[src*="btn_memories.gif"], img[src*="btn_tellfriend.gif"], img[src*="btn_track.gif"], img[src*="newsinfo.gif"], img[src*="syndicated.gif"] {
padding:11px 14px;
height:0px; width:0px;
}
img[src*="newsinfo.gif"]{background-image: url('http://i43.tinypic.com/30j48lv.png');
}
img[src*="syndicated.gif"]{background-image: url('http://i39.tinypic.com/ekncn.png');
}
iimg[src*="btn_del.gif"], img[src*="btn_prev.gif"], img[src*="btn_next.gif"], img[src*="btn_scr.gif"], img[src*="btn_freeze.gif"], img[src*="help.gif"] {padding:8px;
height:0;
width:0;
}
img[src*="btn_prev.gif"]{background-image: url('http://i44.tinypic.com/15d78cy.png')no-repeat center;}
img[src*="btn_next.gif"]{background-image: url('http://i42.tinypic.com/23vdq21.png')no-repeat center;}
img[src*="btn_memories.gif"]{background-image: url('http://tinyurl.com/dkwtpm')no-repeat center;}
img[src*="btn_tellfriend.gif"]{background-image: url('http://tinyurl.com/cpzl5s');no-repeat}
img[src*="btn_track.gif"]{background-image: url('http://tinyurl.com/czzyaz')no-repeat;}
img[src*="btn_edit.gif"]{background-image: url('http://tinyurl.com/co6sv8')no-repeat;}
img[src*="btn_edittags.gif"]{background-image: url('http://tinyurl.com/ce9hl4')no-repeat;}img[src*="btn_del.gif"]{background-image: url('http://tinyurl.com/dl4vfp')no-repeat;}
img[src*="btn_scr.gif"]{background-image: url('http://tinyurl.com/cej7k5')no-repeat;}
img[src*="btn_freeze.gif"]{background-image: url('http://tinyurl.com/cajulh')no-repeat;}
img[src*="help.gif"]{background-image: url('http://tinyurl.com/c8nuhj')no-repeat;}

/* CONTEXTUAL HOVER */
div.ContextualPopup div.Inner {color:#333 !important;
border:3px double #eee;
padding:10px;
width:250px;
}
div.ContextualPopup .Userpic {float:right !important;}
div.ContextualPopup .Userpic img {width:50px;height:50px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration:none !important;
font-weight:normal;
color:#008e97 !important;
}
div.ContextualPopup div.Inner a:hover {color:#777 !important;}
div.ContextualPopup .Relation {padding:3px;border-bottom:3px double #eee;}

Brilliant redux of the layout for all browsers was edited by wekhter!
S2 STYLECUSTOMIZE ► S2 MINIMALISM (SELECT DEEP OCEAN)DISPLAY
  • Show meta (mood, music, location etc.) on Recent Entries page? Yes
  • Show dates on Recent Entries page? Yes
SIDEBAR
  • Enabled: Everything. There is a FREE TEXT (html enabled) custom block, which is also enabled but you don't need it.
HEADER
If you want to use a header image, find .layout-inner and replace it with your own customizations:

.layout-inner {
background: #2b2b2b url('http://i39.tinypic.com/2a9cun5.jpg') repeat-x scroll;
border-bottom: 18px solid #111;
padding-top: ###px;
}

^ Change the padding to reflect how high your image is. Your banner will go BEHIND the header icons, so make sure the padding takes that in consideration.

As always, replace the teal parts with your own customizations.
CUSTOM CSS MENUS
  • Set all drop-down menus on the custom css page to NO
    !important 
  • Copy & paste the CSS codes into 'Custom stylesheet'
  • Hit 'save changes' & you're done!
EXTERNAL GRAPHICS( tiny icons → dryicons. )
( icons in respective order → gyaku, lucific & lazygraphics )CREDITPlease credit unequally and/or introject!QUESTIONS?This is my first rummaging around with minimalism, so please tell me if something's strange looking. Please remember it's best viewed in Firefox, so it may be browser issues that I'm trying to resolve. :)

If you like what you see, why not take a peek over at unequally?

style: minimalism, maker: introject

Previous post Next post
Up