Hold Your Color [S2 Minimalism]

Dec 07, 2010 06:24

I kid you not, I have about ten unfinished layouts sitting on my computer.



Preview Image. | temporary live preview at yearzeta
featuring: custom icons, sidebar, comment page, calendar
layout by sulfuricfusion @ yearzeta

Hold Your Color
(Minimalism lyt for Aquatic Moon)Browser:

Firefox, Opera, Safari, Chrome, IE.
IE... the journal title and subtitle have conspicuously gone missing in IE, but other than that it's mostly good. As good as IE gets. (If anyone wants to take a peek and see if they can fix it, I'd love them forever. Forever.)

Screen:
Best viewed 1024x768+, but the only issue with smaller is the links at the bottom of the entries - they overlap.

Credits:
Icons from Some Random Dude and Dry Icons.

Notes:

This is best viewed with a short journal title/subtitle. If your journal title/subtitle get all mushed, you can change the size of the text. Find:

.header h2{
font-weight:bold;
font-size:60px;
color:#fff;
top:40px;
}
.header h3{
font-size:18px;
letter-spacing:3px;
color:#fff;
top:80px;
line-height:17px;
}
and replace the font-size:#px numbers with smaller numbers.

To Use:

1. Go to the customize page and type "Minimalism" into the search box.

2. Select the theme "Aquatic Moon." (This is important.)

3. Click customize your theme, then the custom CSS link.

4. Set both dropdown menus to NO, and leave the external stylesheet option empty.

5. Paste the code in the Custom Stylesheet space.

Code:

Preview Image.

/* HOLD YOUR COLOR
a Minimalism layout for Aquatic Moon
by sulfuricfusion@yearzeta
tinyicons from:
http://dryicons.com/free-icons/preview/symbolize-icons-set/
and http://somerandomdude.com/projects/iconic/ */

/* GENERAL PROPERTIES */

body {
background:url("") bottom center repeat-x #f3f3f3 fixed;
padding:0px;
margin:0px;
width:100%;
}
#page{
margin:0pX;
padding:0px;
font-family:arial, helvetica, "sans serif";
font-size:11px;
width:100%;
min-width:900px;
position:absolute;
top:0px;
left:0px;
}
div.layout{
margin:0px;
padding:0px;
font-family:arial, helvetica, "sans serif";
}
div.content{
position:absolute;
left:250px;
top:126px;
padding:20px 0px;
background:#f3f3f3;
}
.entry-wrap{
width:70%;
margin:0px 15%;
}
.sidebar{
width:251px;
background:#ededed url("http://i955.photobucket.com/albums/ae39/zheeer/lj/8102885b.png") repeat-y top right;
padding:0px 0px 0px 0px;
-moz-border-radius:0px 0px 15px 0px;
border-radius:0px 0px 15px 0px;
border-bottom:solid 1px #f9f9f9;
float:left;
}
.sidebar-inner{
overflow:hidden;
font-family:arial, helvetica, "sans serif";
}
.sidebar-block{
padding:0px;
margin-bottom:0px;
}
.entry-wrap{
background:#fff;
border:solid 1px #ececec;
margin:20px auto 50px auto;
}
.entry{
padding:10px 10px 2px 10px;
}
.hentry{
margin:0px;
}
.hr{
display:none;
}
ul.page-nav{
display:inline-block;
width:100%;
text-align:right;
list-style:none;
margin:0px 0px 5px -60px;
}
li.prev a.item, li.next a.item{
font-size:18px;
color:#9a9a9a;
text-transform:lowercase;
padding:5px;
background:#000;
-moz-border-radius:5px;
border-radius:5px;
}

/* HEADER INFORMATION */
.header{
margin:0px 0px -1px 0px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/55493b19.png") #ececec repeat-x bottom center;
padding:60px 10px 0px 0px;
border-left:solid 250px #000;
}
.header h2, .header h3{
display:block;
padding:0px;
line-height:0px;
margin:0px;
z-index:6;
width:250px;
text-align:center;
font-family:monospace;
position:absolute;
left:0px;
}
.header h2{
font-weight:bold;
font-size:60px;
color:#fff;
top:40px;
}
.header h3{
font-size:18px;
letter-spacing:3px;
color:#fff;
top:80px;
line-height:17px;
}
ul.nav{
padding:0px;
list-style: none;
background:transparent;
text-align:right;
margin:0px;
width:100%;
display:block;
height:48px;
}
ul.nav li{
display:inline-block;
float:right;
background:transparent url("http://i955.photobucket.com/albums/ae39/zheeer/lj/1b8b5668.png") repeat-x bottom center;
margin:0px 0px 0px 2px;
-moz-border-radius:5px 5px 0px 0px;
border-radius:5px 5px 0px 0px;
max-width:160px;
text-align:center;

}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{
font-size:14px;
text-shadow:1px 1px 0px #d2f78c;
text-transform:lowercase;
color:#000;
font-weight:normal;
letter-spacing:1px;
font-family:monospace;
display:block;
margin:15px 10px;
}
ul.nav li a:hover, ul.nav li a:active{
color:#fff;
font-style:italic;
}
.header .userpic, h1 span.ljuser, .header div.hr hr{
display:none ;
}

/* SIDEBAR */

.sidebar-block{
color:#666;
width:250px;
overflow:hidden;
padding:15px 1px 15px 0px;
margin:0px;
}
.sidebar-block dt{
font-size:20px;
text-transform:uppercase;
font-weight:bold;
line-height:25px;
letter-spacing:0.1em;
text-align:right;
font-family:monospace;
color:#fff;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/941347f5.png") no-repeat right bottom transparent;
padding-right:15px;
margin-bottom:15px;
}
.sidebar dd{
width:220px !important;
display:block;
margin:auto;
}
.sidebar-powered{
text-transform:lowercase;
color:#999;
font-size:12px;
text-align:center;
}
.sidebar-powered a{
font-size:12px;
}
.sidebar-links dd, .sidebar-summary li{
display:list-item;
list-style:none;
text-align:left;
margin-top:4px;
border-bottom:solid 1px #ccc;
line-height:18px;
}
.sidebar-summary ul, .sidebar-summary dd{
width:100%;
display:block;
margin:0px;
padding:0px;
}
.sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-links a:link, .sidebar-links a:visited, dd.tags a:link, dd.tags a:visited{
letter-spacing:-0.01em;
font-size:11px;
padding:0px;
line-height:17px;
font-weight:normal;
color:#555;
}
.sidebar-summary a:hover, .sidebar-summary a:active, .sidebar-links a:hover, .sidebar-links a:active, dd.tags a:hover, dd.tags a:active{
color:#999;
letter-spacing:0.01em;
}
.emdash, sidebar-block .comma{
color:#777;
}
dd.tags{
text-align:center;
}
.sidebar-block .comma{
color:#ccc;
}
.sidebar-custom{
text-align:center;
}
.sidebar-cal caption{
text-align:right;
line-height:14px;
}
.sidebar-cal .calendar-wrap caption a{
font-size:16px;
text-transform:uppercase;
font-weight:normal;
}

/* ENTRY AND FONTS */
dt.entry-title a.subj-link, .entry-title{
display:block;
color:#98ed03 !important;
font-family:monospace;
font-size:20px !important;
letter-spacing:.01em !important;
background-color:transparent;
text-align:left;
text-decoration:none;
text-transform:uppercase;
line-height:17px;
font-weight:bold;
}
.entry-title{
padding:6px;

}
dt.entry-title a{
padding:0px;
margin:0px;
}
dt.entry-title img{
margin-left:-34px;
float:left;
}
dt.entry-title a img{
margin:0px;
float:none;
}
.entry-text{
padding:7px;
min-height:160px;
margin:0px;
}
.entry-content{
color:#555;
line-height:18px;
font-size:12px;
clear:both;
padding-top:5px;
}
dl.vcard{
width:100%;
margin:0px 10px 50px 10px;
display:inline;
text-align:left;
}
dl.vcard dt{
display:block;
float:left;
margin-right:5px;
margin-bottom:5px;
}
dl.vcard dt img{
width:100px;
height:100px;
padding:8px;
-moz-border-radius:5px;
border-radius:5px;
background:#222;
}
dd.username{
display:block;
margin-bottom:2px;
}
dd.username .ljuser a:link b, dd.username .ljuser a:visited b{
font-size:11px;
text-transform:uppercase;
font-weight:normal;
color:#8b8c90;
}
dd.entry-date{
display:block;
text-indent:16px;
padding:2px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/0f8bba58.png") no-repeat transparent 16px 0px;
}
abbr.updated{
letter-spacing:.03em;
font-weight:100;
color:#8b8c90;
text-decoration:none;
font-size:11px;
text-transform:uppercase;
border-bottom:none !Important;
}
big{
font-size:150%;
letter-spacing:-1px;
}
small{
font-size:75%;
letter-spacing:0.04em;
}
blockquote{
border-left:8px solid #eee;
padding:10px;
margin:0px 30px;
}
textarea{
border:transparent;
font-size:12px;
line-height:15px;
letter-spacing:1px;
background:#fcfcfc;
border:solid 1px #f9f9f9;
color:#999;
}
input, select{
font-size:11px;
color:#747474;
text-transform:none;
letter-spacing:0px;
}
a:link, a:visited{
font-weight:bold;
color:#87e802;
font-style:normal;
text-decoration:none;
letter-spacing:0.03em;
}
a:hover, a:active{
color:#b3f404;
cursor:crosshair;
letter-spacing:0.05em;
}

/* METADATA */

div.metadata{
margin:0px;
line-height:15px;
}
dt.meta-location-label, dt.meta-mood-label, dt.meta-music-label, dt.meta-groups-label{
font-size:11px;
text-transform:lowercase;
font-weight:bold;
margin-right:5px;
display:inline;
color:#98ed03;
float:left;
}
dd.meta-mood-value, dd.meta-location-value, dd.meta-music-value, dd.meta-groups-value{
font-size:11px;
letter-spacing:0.02em;
text-transform:lowercase;
color:#333;
margin:0px;
line-height:16px;
}
dd.meta-location-value a{
font-size:11px;
color:#000;
text-transform:lowercase;
}
div.ljtags{
width:100%;
padding:3px;
font-size:0.01%;
border-left:solid 7px #98ed03;
margin:10px 0px;
background:#f9f9f9;
}
.ljtags:hover{
background:#f3f3f3;
border-left:solid 7px #71e201;
}
div.ljtags a:link, div.ljtags a:visited{
font-size:12px;
color:#999;
letter-spacing:0px;
text-decoration:none;
text-transform:lowercase;
font-weight:normal;
margin:2px 6px;
}
div.ljtags a:hover, div.ljtags a:active{
color:#111;
text-decoration:none;
font-style:italic;
}

/* ENTRYMENU LINKS */
.entrymenu, .entrysubmenu{
text-align:right;
margin:0px;
}
.entrymenu{
display:inline;
float:right;
}
dd.entrymenu ul, dd.entrysubmenu ul{
padding:0px;
margin:0px;
list-style:none;
margin-left:0px;
}
dd.entrymenu ul li, dd.entrysubmenu ul li{
display:inline;
padding:0px 2px;
}
.entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited{
font-size:12px;
font-weight:bold;
color:#666;
text-transform:lowercase;
font-family:monospace;
letter-spacing:-0.05em;
padding:2px;
background:#000;
-moz-border-radius:3px 3px 0px 0px;
border-radius:3px 3px 0px 0px;;
border-bottom:solid 2px #ccc;
}
.entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active{
color:#a5ef24;
border-bottom:solid 2px #a5ef24;
}

/* IMAGES */

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="community.gif"], .entry-title img[src*="icon_protected.gif"], .entry-title img[src*="icon_groups.gif"], .entry-title img[src*="icon_private.gif"]{
background-image:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/0f8bba58.png") !important;
background:transparent no-repeat;
width:0px;
height:0px;
padding:8px !Important;
}

.ljuser img[src*="userinfo.gif"]{
background-position:0px 0px !important;
}
.ljuser img[src*="community.gif"]{
background-position:-16px 0px !important;
}
.entry-title img[src*="icon_protected.gif"] {
background-position:-16px -32px;
}
.entry-title img[src*="icon_groups.gif"] {
background-position:-32px -32px;
}
.entry-title img[src*="icon_private.gif"] {
background-position:0px -32px;
}

/* FULL VIEW PAGE */
.entry-comments{
color:#888;
background:transparent;
padding:0px;
border:none;
}
.entry-comments .entry, .entry-comments .entry-text{
padding:0px;
}
#qrformdiv table{
border:none !important;
font-size:11px;
font-weight:100;
margin-bottom:20px;
}
div.comment-upic{
margin:5px 10px 5px 10px;
float:left;
width:auto;
}
.comment-upic img{
width:85px;
height:85px;
padding:6px;
background:#f3f3f3;
}
.entry-comments .ljuser a b{
font-size:12px;
}
div.comments-links{
padding:7px;
text-align:left;
text-transform:uppercase;
font-size:20px;
}
.replylink a{
font-size:20px;
text-transform:uppercase;
}
.comment-wrap{
font-size:11px;
letter-spacing:0.02em;
line-height:18px;
border:solid 1px #ececec;
background:#fff;
text-transform:none;
min-height:130px;
margin:15px 0px;
padding:8px 5px 0px 5px;
}
div.comment-text{
min-height:45px;
padding:9px;
}
div.comment-head-in{
display:block;
text-align:left;
margin-left:10px;
margin-top:10px;
line-height:10px;
padding:0px;
color:#333;
}
.comment-head-in p{
display:inline;
margin-right:5px;
}
.comment-head-in h3{
display:inline;
color:#999;
text-transform:none;
font-weight:normal;
font-style:italic;
margin-right:5px;
font-size:12px;
}
.comment-permalink:link, .comment-permalink:visited{
color:#ccc;
font-weight:normal;
}
.comment-permalink:hover, .comment-permalink:active{
color:#888;
font-style:italic;
}
div.comment-menu{
text-align:right;
margin:5px 0px
color:#fff;
font-size:0.01%;
}
.comment-menu a:link, comment-menu a:visited{
text-transform:uppercase;
font-size:13px;
margin:0px 5px;
background:#f3f3f3;
padding:3px;
-moz-border-radius:3px;
border-radius:3px;
}
textarea.textbox, input.textbox{
border:#ccc solid 1px;
letter-spacing:0px;
font-size:11px;
color:#888;
background:#fff;
}
.entry-linkbar{
display:block;
width:100%;
margin:0px;
text-align:center;
}

/* CALENDAR */
.view-archive .entry-text li{
display:inline;
padding:6px;
margin:0px 5px 5px 5px;
font-size:12px;
background:#fff;
}
li.active{
list-style:none;
font-size:16px;
}
.view-archive .entry-text li a:hover{
background:transparent;
padding:0px;
}
.view-archive .entry-wrap{
width:100%;
background:transparent;
border:none;
}
.view-archive .content{
margin:0px;
width:400px;
left:400px;
}
.entry-text .calendar-wrap caption a{
font-size:22px;
}
.calendar-wrap caption a{
font-size:22px;
text-transform:uppercase;
letter-spacing:-1px;
font-family:monospace;
}
caption a.month{
color:#000;
font-weight:normal;
}
caption a.year{
color:#000;
}
.entry-text div.calendar-wrap caption a:hover, .entry-text div.calendar-wrap caption:active{
background:transparent;
padding:0px;
}
.calendar-wrap caption{
text-align:right;
line-height:14px
}
.entry-text .calendar-wrap{
width:100%;
margin:40px auto;
}
.entry-text .calendar-wrap table{
width:100%;
text-align:right;
border-spacing:8px;
}
.sidebar-cal .calendar-wrap table{
border-spacing:3px;
width:100%;
text-align:right;
}
.entry-text .calendar-wrap td{
font-size:12px;
line-height:22px;
padding:4px;
width:40px;
background:#fff;
}
.calendar-wrap td{
text-align:center;
font-size:11px;
height:22px;
VERTICAL-ALIGN:bottom;
padding:3px;
line-height:px;
background:#fff;
}
.calendar-wrap thead{
display:none;
}
.calendar-wrap td a:link, .calendar-wrap td a:visited{
font-weight:normal;
text-align:center;
font-size:11px;

}
.entry-text .calendar-wrap td a:link, .entry-text .calendar-wrap td a:visited{
font-size:18px;
font-weight:normal;
line-height:30px;
text-align:center;
height:auto;
}
.entry-text .calendar-wrap td a:hover, .entry-text .calendar-wrap td a:active{
background:transparent;
padding:0px;
}

/* MISCELLANEOUS */
div.content-tags{
text-align:center;
}
div.content-tags .comma{
display:none;
}
a img{
border:none !important;
}
#lj_controlstrip{
background:url("") bottom left repeat-x #ddd !important;
height:43px !important;
z-index:3;
-moz-border-radius:0px 0px 0px 7px;
border-radius:0px 0px 0px 7px;;
width:65%;
min-width:500px;
position:absolute;
right:0px;
top:0px;
left:auto;
margin:auto;
}
#lj_controlstrip td{
border:none !important;
}
#lj_controlstrip_user{
display:none;
}
#lj_controlstrip_actionlinks{
width:250px;
}
#lj_controlstrip_userpic{
display:none;
}
#lj_controlstrip_search a{
display:none;
}
#lj_controlstrip_search table{
width:99% !important;
min-width:150px;
}
#lj_controlstrip span{
color:#fff;
padding:1px;
}
#lj_controlstrip a:link, #lj_controlstrip a:visited{
text-transform:lowercase;
color:#333 !important;
padding:1px;
}
#lj_controlstrip a:hover, #lj_controlstrip a:active{
color:#999 !important;
text-decoration:none;
}
#lj_controlstrip input{
background:#fff;
color:#999;
font-weight:bold;
border:none;
text-transform:lowercase;
}
input#lj_controlstrip_search_submit{
text-transform:uppercase;
font-weight:bold;
font-size:115%;
letter-spacing:-1px;
border:none;
color:#ccc;
}
#lj_controlstrip input:hover{
color:#333;
}
input#lj_controlstrip_search_input_text{
padding:2px;
letter-spacing:0.15em;
text-transform:none;
font-weight:normal;
}
input#lj_controlstrip_search_input_text:hover{
color:#333;
}
input#lj_controlstrip_search_submit{
padding:0px;
margin-left:5px;
}

If you find, bugs, glitches, and other unsightlies, please let me know! I'll get on fixing them asap.
Also, if you liked or used, I'd really like to know. It feeds my ego.
(And the obligatory: if you use, please link to yearzeta either in your sidebar or profile!)

maker: sulfuricfusion, style: minimalism

Previous post Next post
Up