Minimalism: Layers Pt1
Preview Image.
featuring: custom icons, partial sidebar, comment page, calendar
layout by sulfuricfusion @ yearzeta
Layers pt1
(Minimalism lyt for Aquatic Moon)Browser:
Firefox, Chrome, IE. Trusting Opera and Safari won't be too different, but if you run into troubles with those browsers, let me know and I'll check it out.
Screen:
percent-based, so it should be safe for most screens.
Credits:
Icons from Some Random Dude.
Notes:
IE doesn't cooperate at all - there's a stray pixel somewhere so the entries don't float, but I don't think that's necessarily a big deal.
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.
/* LAYERS PT1
a Minimalism layout for Aquatic Moon
by sulfuricfusion@yearzeta
icons from http://somerandomdude.com/projects/iconic */
/* GENERAL PROPERTIES */
body {
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/edb7592e.gif") top center repeat-y #eee fixed;
padding:0px;
width:100%;
margin:0px;
}
#page{
margin:0px;
padding:0px;
font-family:arial, helvetica, "sans serif";
font-size:11px;
width:100%;
}
div.layout{
margin:0px;
margin-top:-2px;
padding:0px;
font-family:arial, helvetica, "sans serif";
}
div.content{
width:100%;
padding:0px 0px;
background:transparent;
margin:auto;
}
.entry-wrap{
width:50%;
float:left;
margin:0px 0px 10px 0px;
padding:10px 0px;
}
.sidebar{
height:220px;
width:50%;
overflow:hidden;
padding:0px;
position:absolute;
top:43px;
right:0px;
}
.sidebar-inner{
overflow:hidden;
font-family:arial, helvetica, "sans serif";
}
.sidebar-block{
float:left;
margin:0px 3%;
padding:10px 1%;
width:40%;
overflow:hidden;
}
.entry{
padding:10px 10px 0px 10px;
z-index:7;
position:relative;
}
.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:#000;
text-transform:lowercase;
padding:5px;
-moz-border-radius:5px;
border-radius:5px;
}
/* HEADER INFORMATION */
.header{
margin:0px;
padding:30px 0px;
height:160px;
}
.header h2, .header h3{
display:block;
padding:0px;
margin:0px;
z-index:6;
text-align:center;
font-family:arial;
width:50%;
float:left;
margin-left:0px;
}
.header h2{
font-weight:bold;
font-size:80px;
color:#fff;
margin-right:50%;
}
.header h3{
font-size:18px;
letter-spacing:3px;
color:#fff;
}
ul.nav{
padding:0px;
list-style: none;
width:50%;
float:left;
text-align:center;
margin:-15px 0px 15px 0px;
}
ul.nav li{
display:inline;
background:#;
margin:10px;
}
ul.nav li a, ul.nav li a:link, ul.nav li a:visited{
font-size:14px;
text-transform:uppercase;
color:#444;
padding:6px;
}
ul.nav li a:hover, ul.nav li a:active{
padding:10px;
}
.header .userpic, h1 span.ljuser, .header div.hr hr{
display:none ;
}
/* SIDEBAR */
.sidebar-block{
color:#ede8d5;
display:none;
}
.sidebar-cal, .sidebar-links{
display:inline;
}
.sidebar-block dt{
display:none;
}
.sidebar dd{
padding:10px 1%;
}
.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:right;
margin:0px;
}
.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:14px;
text-transform:uppercase;
line-height:17px;
font-weight:bold;
color:#333;
padding:6px 15px;
}
.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:#fff;
letter-spacing:0.01em;
font-style:italic;
text-indent:15px;
padding:10px 20px;;
}
.emdash, sidebar-block .comma{
color:#777;
}
.sidebar-custom{
text-align:center;
}
.sidebar-cal caption{
text-align:right;
line-height:14px;
}
.sidebar-cal .calendar-wrap caption a{
font-size:18px;
}
/* ENTRY AND FONTS */
dt.entry-title a.subj-link, .entry-title{
display:block;
color:#000 !important;
font-family:arial;
font-size:30px !important;
letter-spacing:-.08em !important;
background-color:transparent;
text-align:left;
text-decoration:none;
text-transform:uppercase;
line-height:30px;
font-weight:bold;
margin-bottom:13px;
}
.entry-title{
padding:0px;
}
dt.entry-title a{
padding:0px;
margin:0px;
}
dt.entry-title img{
float:left;
margin-right:5px;
}
dt.entry-title a img{
margin:0px;
float:none;
}
.entry-text{
padding:7px 7px 0px 7px;
margin:0px;
}
.entry-content{
color:#111;
line-height:22px;
font-size:13px;
}
dl.vcard dt img{
width:100px;
height:100px;
padding:13px;
background:#000;
-moz-border-radius:3px;
border-radius:3px;
float:left;
margin:10px;
}
dd.username .ljuser a:link b, dd.username .ljuser a:visited b{
font-size:12px;
}
dd.entry-date{
display:block;
padding:0px;
text-align:;
text-transform:lowercase;
position:relative;
margin-top:-20px;
margin-left:-135px;
height:20px;
}
dd.entry-date{
float:left;
width:300px;
text-align:left;
}
dd.username{
float:right;
width:100px;
text-align:right;
margin-top:-15px;
}
abbr.updated{
letter-spacing:-.05em;
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-weight:;
font-size:23px;
border-bottom:none !Important;
font-style:italic;
}
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:#ff00a8;
font-style:normal;
text-decoration:none;
letter-spacing:0.03em;
line-height:12px;
}
a:hover, a:active{
color:#ff58c6;
cursor:crosshair;
letter-spacing:0.07em;
}
/* METADATA */
div.metadata{
margin:15px 0px 10px 0px;
padding:0px;
border-bottom:solid 5px rgba(0,0,0,.1);
}
dt.meta-location-label, dt.meta-mood-label, dt.meta-music-label, dt.meta-groups-label{
font-size:15px;
text-transform:lowercase;
font-weight:bold;
margin-right:5px;
letter-spacing:-0.05em;
color:#000;
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-bottom:5px;
line-height:px;
padding:2px 2px 2px 10px;
}
dd.meta-location-value a{
font-size:11px;
text-transform:lowercase;
}
div.ljtags{
font-size:15px;
text-transform:lowercase;
font-weight:bold;
letter-spacing:-0.05em;
color:#000;
clear:both;
margin:15px 0px;
border-left:solid 8px #fff;
-moz-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;
padding:4px;
}
div.ljtags a:link, div.ljtags a:visited{
font-size:12px;
color:#333;
letter-spacing:0px;
text-decoration:none;
text-transform:lowercase;
font-weight:normal;
}
div.ljtags a:hover, div.ljtags a:active{
color:#111;
text-decoration:none;
font-style:italic;
}
/* ENTRYMENU LINKS */
.entrymenu, .entrysubmenu{
text-align:center;
margin:0px;
z-index:6;
float:right;
display:inline;
padding:0px;
}
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;
}
.entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited{
font-size:14px;
font-weight:bold;
text-align:center;
color:#999;
text-transform:uppercase;
letter-spacing:-0.05em;
padding:0px;
display:block;
float:right;
margin:0px 4px;
}
.entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active{
}
/* 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/c9a3cece.png") !important;
background:transparent no-repeat;
width:0px;
height:0px;
}
.ljuser img{
margin-right:2px;
}
.ljuser img[src*="userinfo.gif"]{
background-position:1px 0px;
padding:8px 5px !Important;
}
.ljuser img[src*="community.gif"]{
background-position:-12px 0px;
padding:8px 6px !important;
}
.entry-title img[src*="icon_protected.gif"] {
background-position:-24px -36px;
padding:12px !important;
}
.entry-title img[src*="icon_groups.gif"] {
background-position:-48px -36px;
padding:12px !important;
}
.entry-title img[src*="icon_private.gif"] {
background-position:0px -36px;
padding:12px !important;
}
/* FULL VIEW PAGE */
.entry-comments{
color:#fff;
background-image:none !important;
border:none;
}
.entry-comments .entry, .entry-comments .entry-text{
}
#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:8px;
background:#000;
-moz-border-radius:3px;
border-radius:3px;
}
.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;
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:#333;
text-transform:none;
font-weight:normal;
font-style:italic;
margin-right:5px;
font-size:12px;
}
.comment-permalink:link, .comment-permalink:visited{
color:#000;
font-weight:normal;
}
.comment-permalink:hover, .comment-permalink:active{
color:#fff;
font-style:italic;
}
div.comment-menu{
text-align:right;
margin:10px 0px;
color:#fff;
font-size:0.01%;
}
.comment-menu a:link, comment-menu a:visited{
text-transform:uppercase;
letter-spacing:-0.05em;
margin:0px 5px;
padding:3px;
font-weight:normal;
font-size:14px;
color:#333;
}
.comment-menu a:hover, .comment-menu a:active{
color:#000;
font-style:italic;
}
textarea.textbox, input.textbox{
border:#ccc solid 1px;
letter-spacing:0px;
font-size:11px;
color:#333;
}
.entry-linkbar{
display:block;
width:100%;
margin:0px 0px 15px 0px;
text-align:center;
}
/* CALENDAR */
.view-archive .entry-text li{
display:inline;
padding:10px;
margin:0px 5px 5px 5px;
font-size:15px;
}
li.active{
list-style:none;
font-size:16px;
}
.view-archive .entry-text li a{
font-weight:normal;
}
.view-archive .entry-text li a:hover{
padding:5px;
}
.view-archive .entry-wrap{
width:100%;
background:transparent;
border:none;
}
.view-archive .content{
margin:0px;
}
.entry-text .calendar-wrap caption a{
font-size:22px;
}
.calendar-wrap caption a{
font-size:22px;
text-transform:uppercase;
color:#000;
font-weight:bold;
letter-spacing:-0.1em;
}
caption a.month{
font-weight:normal;
}
caption a.year{
}
.calendar-wrap caption a:hover, .calendar-wrap caption:active{
color:#fff;
font-style:italic;
}
.calendar-wrap caption{
text-align:right;
line-height:14px
}
.calendar-wrap{
margin:0px 10px;
}
.entry-text .calendar-wrap{
width:40%;
margin:40px 5%;
float:left;
height:250px;
}
.entry-text .calendar-wrap table{
width:100%;
text-align:right;
border-spacing:8px;
}
.sidebar-cal .calendar-wrap table{
border-spacing:5px;
width:100%;
text-align:right;
}
.entry-text .calendar-wrap td{
font-size:12px;
line-height:22px;
padding:4px;
width:40px;
}
.calendar-wrap td{
text-align:center;
font-size:11px;
VERTICAL-ALIGN:bottom;
padding:4px;
line-height:15px;
color:#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;
color:#000;
}
.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 #000 !important;
height:43px !important;
z-index:3;
}
#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:#666 !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;
}
/* FIVE PERCENT BLACK BG */
.entry-wrap, .sidebar-links a:link, .sidebar-links a:visited, div.ljtags, textarea.textbox, input.textbox, li.prev a.item, li.next a.item{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/a518f451.png") transparent repeat;
}
/* TEN PERCENT BLACK BG */
.header, ul.nav li a, ul.nav li a:link, ul.nav li a:visited, .comment-wrap, .view-archive .entry-text li, .calendar-wrap td{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/529e15be.png") transparent repeat;
}
If you find bugs or glitches, please let me know so I can fix it asap.
And if you liked or used, please let me know!
(obligatory: if you use, please link to yearzeta either in your sidebar or profile.)