Preview Image.layout by
sulfuricfusion @
yearzeta too corporate
(yet another Minimalism layout for Aquatic Moon)Browser:
Firefox, Opera, Safari, Chrome, IE. I am finally satisfied. It's a little uneven and just odd in IE. Nothing too painful, though.
Screen:
800x600 is ridiculously cramped and a little awkward, but not unusable. Percent based again.
Credits:
Icons from
Pinvoke? Maybe? and
Dry Icons.
Notes:
I'm... not really sure. I have no idea how I feel about the ljbar at the bottom, and someplaces the colours look out of place. Mostly, I want this off my harddrive. Take it away.
If you dislike the ljbar at the bottom, I'll post an alternative.
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. /* TOO CORPORATE, ZHER... a Minimalism layout for Aquatic Moon
by sulfuricfusion@yearzeta
tiny icons: fugue by ...pinvoke? the site moved. (
http://p.yusukekamiyamane.com/) */
/* GENERAL PROPERTIES */
body {
background:#eee;
padding:0px;
margin:0px;
width:100%;
}
#page{
font-family:arial, helvetica, "sans serif";
font-size:12px;
letter-spacing:0px;
border:none;
padding:0px;
margin:-45px auto 45px auto;
}
div.content{
float:left;
width:50%;
margin-top:25px;
margin-left:13%;
margin-bottom:40px;
}
.sidebar-inner{
float:right;
width:20%;
margin-right:13%;
margin-top:13px;
min-width:180px;
}
.sidebar-block{
overflow:auto;
padding:15px;
margin-bottom:40px;
background:#fff;
border-top:solid 10px #000;
border-bottom:solid 10px #000;
}
.entry-wrap{
border-top:solid 10px #000;
border-bottom:solid 10px #000;
margin-bottom:40px;
position:relative;
z-index:5;
background:#ffffff;
padding:10px 10px 23px 10px;
}
.entry{
padding:5px 0px;
position:relative;
z-index:5;
}
.hr, hr{
display:none;
}
ul.page-nav{
display:inline-block;
text-align:right;
list-style:none;
margin-left:-45px;
width:100%;
}
li.prev a.item, li.next a.item{
font-size:13px;
color:#000;
text-transform:uppercase;
font-weight:normal;
background:#ffffff;
padding:8px;
}
li.prev a.item:hover, li.prev a.item:active{
color:#37d7ef;
background:#e5e5e5;
}
.entry-text ul{
font-size:0.01%;
}
.view-archive .entry-text li{
display:inline;
padding:6px;
margin:0px 5px 5px 5px;
font-size:12px;
}
li.active{
list-style:none;
font-size:12px;
color:#000;
}
/* HEADER INFORMATION */
.header{
background:url("") no-repeat bottom center #000;
margin:auto;
width:100%;
display:block;
padding:10px 0px;
}
.header h2, .header h3{
margin:0px 5px;
line-height:80%;
letter-spacing:-0.02em;
display:inline;
}
.header h2{
color:#777;
font-weight:normal;
font-size:20px;
}
.header h3{
color:#555;
font-weight:normal;
font-size:20px;
text-transform:lowercase;
}
ul.nav{
width:470px;
list-style:none;
text-align:right;
margin:0px 0px 10px auto;;
overflow:hidden;
float:right;
height:30px;
padding-right:15px;
margin-top:-6px;
}
ul.nav li{
display:inline;
font-size:0.01%;
}
ul.nav li a{
font-size:17px;
vertical-align:baseline;
text-transform:lowercase;
letter-spacing:-0.04em;
line-height:25px;
padding:2px 4px;
margin:0px 6px;
color:#fff;
border-bottom:solid 1px #fff;
}
ul.nav li a:hover, ul.nav li a:active{
color:#14ceea;
letter-spacing:-.02em;
padding:5px;
border-color:#14ceea;
}
.nav li.item-selected a{
color:#edff2a;
border-bottom:#edff2a solid 1px;
}
.header .userpic, h1 span.ljuser, .header div.hr hr{
display:none ;
}
/* SIDEBAR */
.sidebar-block{
color:#9a9a9a;
overflow:hidden;
}
.sidebar-block dt{
text-transform:none;
font-size:20px;
letter-spacing:-.01em;
color:#000;
font-weight:normal;
margin-left:-5px;
text-align:left;
margin-bottom:5px;
}
.sidebar dd{
width:100% !important;
display:block;
margin:0px;
padding:0px;
}
.sidebar-powered{
text-transform:uppercase;
color:#cbcbcb;
font-size:13px;
}
.sidebar-powered a{
font-size:13px;
}
.sidebar-links dd, .sidebar-summary li{
display:list-item;
list-style:none;
margin:0px;
text-align:left;
margin-top:4px;
padding:0px;
border-bottom:solid 1px #eee;
line-height:18px;
}
.sidebar-summary ul, .sidebar-summary dd{
width:100%;
display:block;
margin:0px;
padding:0px;
}
.sidebar-summary a{
text-indent:7px;
}
.sidebar-summary a:link, .sidebar-summary a:visited, .sidebar-links a:link, .sidebar-links a:visited, dd.tags a:link, dd.tags a:visited{
color:#555;
font-weight:normal;
letter-spacing:-0.01em;
font-size:12px;
padding:0px 5px;
}
.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:#222;
}
.emdash, sidebar-block .comma{
color:#555;
}
dd.tags{
text-align:left;
padding:0px;
}
.sidebar-block .comma{
display:block;
width:100%;
height:1px;
background:#eee;
font-size:0.01%;
color:#fff;
margin:4px 0px;
}
.sidebar-cal caption{
text-align:right;
line-height:14px;
}
.sidebar-cal .calendar-wrap caption a{
font-size:16px;
text-transform:lowercase;
font-weight:normal;
}
.sidebar-cal .calendar-wrap caption a:hover, .sidebar-cal .calendar-wrap caption a:active{
color:#222;
}
.sidebar-cal .calendar-wrap a.year{
color:#ccc;
}
.sidebar-cal a.month{
color:#333;
}
/* ENTRY AND FONTS */
dt.entry-title a.subj-link, .entry-title{
display:block;
color:#000 !important;
font-size:25px !important;
letter-spacing:-.01em !important;
text-align:left;
text-decoration:none;
line-height:25px;
font-weight:normal;
}
.entry-title{
padding:0px 0px 3px 0px;
margin-bottom:10px;
}
.hentry, .entry{
margin:0px;
}
dt.entry-title a{
padding:0px;
margin:0px;
}
dt.entry-title img{
margin-right:-40px;
float:right;
}
dt.entry-title a img{
margin:0px;
float:none;
position:static;
}
.entry-text{
padding:0px 15px;
min-height:160px;
margin:0px;
}
.entry-content{
color:#333;
line-height:20px;
font-size:12px;
margin-top:15px;
text-align:left;
}
dl.vcard{
width:100px;
float:right;
margin:5px 0px 5px 10px;
}
dl.vcard dt img{
position:relative;
z-index:3;
width:100px;
height:100px;
padding:1px;
background:#fff;
border:solid 7px #eee;
}
dd.username{
padding:1px;
text-align:center;
margin:-27px 0px 0px 8px;
background:#000;
position:relative;
z-index:5;
width:98px;
}
dd.username img{
display:none;
}
dd.username .ljuser a:link b, dd.username .ljuser a:visited b{
font-size:11px;
color:#edff2a;
font-weight:normal;
}
dd.entry-date{
margin-left:0px;
margin-top:7px;
padding:0px;
}
abbr.updated{
letter-spacing:.03em;
font-weight:100;
color:#9a9a9a;
text-decoration:none;
font-size:10px;
width:116px;
text-align:center;
display:inline-block;
text-transform:uppercase;
border-bottom:none !Important;
padding:0px;
}
.ljuser a:link b, .ljuser a:visited b{
font-weight:bold;
font-size:12px;
color:#14ceea;
}
.ljuser a:hover b, .ljuser a:active b, dd.username .ljuser a:hover b, dd.username .ljuser a:active b{
color:#08abc3;
}
b, strong{
font-weight:bold;
letter-spacing:0.01em;
color:#000000;
}
i, em{
color:#555;
}
strike{
color:#aaa;
}
big{
font-size:140%;
}
small{
font-size:80%;
letter-spacing:0.06em;
}
blockquote{
border-left:solid 5px #ddd;
padding:10px;
margin:0px 30px;
}
textarea{
border:solid 1px #ccc;
font-size:12px;
line-height:15px;
letter-spacing:1px;
background:#fff;
color:#9a9a9a;
width:200px;
}
input, select{
font-size:11px;
color:#565656;
}
code, pre{
color:#ababab;
}
pre{
margin-bottom:-15px;
}
a:link, a:visited{
font-weight:100;
color:#14ceea;
font-style:normal;
text-decoration:none;
}
a:hover, a:active{
color:#45bbcd;
cursor:crosshair;
font-weight:400;
}
/* METADATA */
div.metadata{
margin:10px 0px 5px 20px;
}
dt.meta-location-label, dt.meta-mood-label, dt.meta-music-label, dt.meta-groups-label, div.ljtags{
font-size:12px;
text-transform:lowercase;
color:#343434;
font-weight:bold;
margin:0px;
}
dt.meta-location-label, dt.meta-mood-label, dt.meta-music-label, dt.meta-groups-label{
display:inline;
float:left;
margin-right:3px;
}
dd.meta-mood-value, dd.meta-location-value, dd.meta-music-value, dd.meta-groups-value{
font-size:12px;
letter-spacing:0.01em;
text-transform:none;
color:#ababab;
margin:0px;
line-height:15px;
text-transform:lowercase;
}
div.ljtags{
line-height:20px;
margin:15px 0px 10px 20px;
padding:0px 75px 0px 0px;
}
div.ljtags a:link, div.ljtags a:visited{
font-size:12px;
color:#ababab;
letter-spacing:0.01em;
text-decoration:none;
line-height:10px;
font-family:arial, helvetica, "sans serif";
}
div.ljtags a:hover, div.ljtags a:active{
color:#000000;
}
/* ENTRYMENU LINKS */
.entrymenu, .entrysubmenu{
position:relative;
float:right;
margin:0px;
}
dd.entrymenu ul, dd.entrysubmenu ul{
padding:0px;
margin:0px;
list-style:none;
}
dd.entrymenu ul li, dd.entrysubmenu ul li{
display:inline;
}
.entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited{
font-size:11px;
letter-spacing:.02em;
color:#000000;
font-family:arial;
text-transform:lowercase;
padding:0px 4px;
line-height:15px;
display:inline-block;
}
.entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active{
color:#787878;
font-weight:bold;
}
/* IMAGES */
.entry-linkbar img, .comment-head-in img{
width:18px;
height:18px;
}
.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/f0f872af.png") !important;
background:transparent no-repeat;
width:0px;
height:0px;
padding:8px;
}
.ljuser img[src*="userinfo.gif"]{
background-position:-96px -32px !important;
padding:10px 8px !important;
}
.ljuser img[src*="community.gif"]{
background-position:-64px -32px;
padding:10px 8px !important;
}
.entry-title img[src*="icon_protected.gif"] {
background-position:-48px 0px;
padding:12px;
}
.entry-title img[src*="icon_groups.gif"] {
background-position:-24px 0px;
padding:12px;
}
.entry-title img[src*="icon_private.gif"] {
background-position:0px 0px;
padding:12px;
}
/* FULL ENTRY AND COMMENTS */
.view-entry .updated{
top:-175px;
}
.entry-comments{
color:#9a9a9a;
margin:0px 0px 5px 0px;
padding:0px;
}
.entry-comments .hr{
display:block;
height:15px;
}
.entry-comments .comment-wrap .hr{
display:none;
}
#qrformdiv table{
border:none !important;
font-size:11px;
font-weight:100;
color:#787878;
margin-bottom:20px;
}
div.comment-upic{
margin:5px 10px 5px 10px;
float:left;
width:auto;
padding:1px;
background:#fff;
border:solid 6px #eee;
}
.comment-upic img{
width:85px;
height:85px;
}
.entry-comments .ljuser a b{
font-size:12px;
}
div.comments-links{
color:#9a9a9a;
padding:7px;
text-align:right;
text-transform:lowercase;
font-size:20px;
}
.replylink a{
font-size:20px;
text-transform:lowercase;
}
.comment-wrap{
font-size:11px;
letter-spacing:0.02em;
line-height:18px;
border-bottom:solid 1px #eee;
border-top:solid 1px #eee;
text-transform:none;
min-height:130px;
margin-top:-1px;
padding:10px 5px;
}
div.comment-text{
min-height:45px;
padding:9px;
color:#666666;
}
div.comment-head-in{
display:block;
text-align:left;
margin-left:10px;
margin-top:10px;
line-height:10px;
padding:0px;
color:#000000;
}
.comment-head-in p{
display:inline;
margin-right:5px;
}
.comment-head-in h3{
display:inline;
color:#000000;
text-transform:none;
font-weight:normal;
}
a.comment-permalink:link, a.comment-permalink:visited{
color:#000000;
font-weight:bold;
}
a.comment-permalink:hover, a.comment-permalink:active{
color:#ababab;
}
div.comment-menu{
text-align:right;
margin:5px 0px;
color:#ffffff;
font-size:0.50%;
}
.comment-menu a:link, comment-menu a:visited{
text-transform:lowercase;
font-size:14px;
color:#343434;
}
.comment-menu a:hover, .comment-menu a:active{
color:#121212;
}
textarea.textbox, input.textbox{
border:#bcbcbc solid 1px;
letter-spacing:0px;
font-size:11px;
color:#9a9a9a;
background:#ffffff;
}
.entry-linkbar{
display:block;
width:86%;
padding:0px 60px;
margin:0px;
text-align:right;
}
.entry-linkbar img{
margin-right:5px !important;
}
/* CALENDAR */
.view-archive .entry-wrap{
padding:0px;
}
.view-archive .entry-wrap .entry-title{
display:none;
}
.entry-text div.calendar-wrap caption a{
font-size:22px;
margin:0px;
text-transform:lowercase;
letter-spacing:-1px;
}
caption a.month{
color:#14ceea;
font-weight:bold;
}
caption a.year{
color:#edff2a;
font-weight:normal;
}
.entry-text div.calendar-wrap caption a:hover, .entry-text div.calendar-wrap caption:active{
color:#454545;
}
.entry-text .calendar-wrap caption{
text-align:right;
line-height:14px;
margin-bottom:-10px;
padding-right:5px;
}
.entry-text .calendar-wrap{
width:80%;
margin:40px auto;
}
.entry-text .calendar-wrap td{
height:40px;
width:40px;
}
.calendar-wrap table{
width:100%;
text-align:right;
}
.entry-text .calendar-wrap td{
font-size:12px;
line-height:22px;
padding:4px;
border:solid 4px #ffffff;
background:#f4f4f4;
}
.calendar-wrap td{
text-align:center;
color:#999;
font-size:11px;
height:22px;
VERTICAL-ALIGN:bottom;
padding:3px;
background:#f4f4f4;
line-height:px;
border:solid 2px #fff;
}
.calendar-wrap thead{
display:none;
}
.calendar-wrap td a:link, .calendar-wrap td a:visited{
line-height:22px;
text-align:center;
font-size:12px;
display:block;
height:20px;
}
.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;
}
/* MISCELLANEOUS */
div.content-tags{
text-align:center;
}
div.content-tags .comma{
display:none;
}
a img{
border:none !important;
}
#lj_controlstrip{
background-image:url("
http://i955.photobucket.com/albums/ae39/zheeer/lj/7987427b.png") !important;
background:repeat-x;
background:transparent
height:46px;
z-index:7;
position:fixed;
top:100%;
margin-top:-43px;
padding-top:3px;
}
#lj_controlstrip img{
display:none;
}
#lj_controlstrip td{
border-color:#bbb !important;
}
#lj_controlstrip span{
color:#898989;
}
#lj_controlstrip .ljuser a:link b, #lj_controlstrip .ljuser a:visited b{
color:#;
}
#lj_controlstrip a:link, #lj_controlstrip a:visited{
text-transform:lowercase;
color:#aaa !important;
}
#lj_controlstrip a:hover, #lj_controlstrip a:active{
text-decoration:none !important;
color:#000 !important;
}
#lj_controlstrip input{
background:transparent;
color:#555;
border:none;
text-transform:lowercase;
}
input#lj_controlstrip_search_submit{
text-transform:uppercase;
font-weight:bold;
font-size:115%;
letter-spacing:-1px;
background:transparent !important;
border:none;
color:#999;
}
#lj_controlstrip input:hover{
color:#000;
}
input#lj_controlstrip_search_input_text{
color:#999;
border-bottom:dotted 1px #bbb;
padding:2px;
letter-spacing:0.15em;
text-transform:none;
background:transparent !important;
}
input#lj_controlstrip_search_input_text:hover{
color:#000;
border-bottom:solid 2px #000;
}
input#lj_controlstrip_search_submit{
padding:0px;
margin-left:5px;
}
As usual, please tell me if you find any bugs; I'll get right on correcting that. I'd love to hear if you liked or used, mmkay?
(And the obligatory: if you use, please credit me in your sidebar or profile.)