Dangerverse: Battery City [Minimalism]

Oct 26, 2010 04:01

Third in my Dangerverse layout series. Battery City!



Preview Image.
layout by sulfuricfusion @ yearzeta

Dangerverse: Battery City
(Minimalism lyt for Aquatic Moon)Browser:

Let me tell you something about this. I designed this with Firefox and, yeah, it looks best in Firefox. The only thing that's weird in the other browsers (Chrome, Safari, Opera) is a line-height issue in the metadata. Or something. I'm not sure. Those are basically the same. But IE's all stuffed up, as always. Hopefully it's small enough to not bother you.

Screen:
Fixed width a little over 800px. Should look fine.

Credits:
Icons from Dry Icons (symbolize and coquette) and graphic from Zex.

Notes:

Third part in the Dangerverse layout series. Map of Battery City, made by the lovely zeeexito. Total abuse of transparency here. And color. I tried something new with the metadata and mostly, it's cool.

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.

/* DANGERVERSE: BATTERY CITY a Minimalism layout intended for use with Aquatic Moon
by sulfuricfusion@yearzeta
tiny icons from dryicons.com (symbolize and coquette)
background graphic credit to lj user zeeexito */

/* GENERAL PROPERTIES */

body {
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/b1771001.png") left center repeat #000 fixed;
padding:0px;
margin:0px;
width:100%;
}
#page{
margin:0pX;
padding:0px;
font-family:arial, helvetica, "sans serif";
font-size:11px;
margin:0px;
width:880px;
margin:auto;
}
div.layout{
background:;
font-family:arial, helvetica, "sans serif";
}
div.content{
width:560px;
float:left;
}
.sidebar {
width:200px;
float:right;
padding:20px;
}
.sidebar-block{
padding:10px;
margin-bottom:30px;
margin-top:0px;
overflow:hidden;
}
.entry-wrap{
padding:20px;
margin-bottom:50px;
}
.entry{
padding:10px 10px 0px 10px;
}
.hentry{
margin:0px;
}
.hr hr{
display:none;
}
.content .hr{
margin:15px 0px;
height:10px;
display:none;
}
ul.page-nav{
display:inline-block;
width:100%;
text-align:right;
list-style:none;
margin-left:-60px;
}
li.prev a.item, li.next a.item{
font-size:19px;
text-transform:uppercase;
padding:5px;
}
.view-archive .entry-text li{
display:inline;
padding:6px;
margin:0px 5px 5px 5px;
font-size:12px;
}
li.active{
list-style:none;
font-size:16px;
}
.view-archive .entry-text li a:hover{
background:transparent;
padding:0px;
}

/* HEADER INFORMATION */
.header{
background:transparent;
margin:25px 0px 60px 0px;

}
.header h2, .header h3{
display:block;
padding:0px;
line-height:0px;;
text-transform:uppercase;
z-index:3;
text-indent:40px;
}
.header h2{
color:rgba(255,255,255,.9);
font-size:50px;
font-family:"arial black";
font-weight:bold;
}
.header h3{
color:#d4ff00;
font-size:30px;
color:rgba(255,255,255,.7)
}
ul.nav{
padding:0px;
margin:0px;
list-style: none;
text-align:right;
}
ul.nav li{
margin:0px 5px;
display:inline;
}
ul.nav li a:link, ul.nav li a:visited{
font-size:20px;
text-transform:uppercase;
color:#1d1f21;
line-height:20px;
font-weight:bold;
letter-spacing:-1px;
font-weight:bold;
padding:2px;
}
ul.nav li a:hover, ul.nav li a:active{
color:#d57a35;
letter-spacing:-1px;
}
li.item-selected{
color:#8b8c90;
font-size:20px;
text-transform:uppercase;
line-height:20px;
font-weight:bold;
letter-spacing:-1px;
padding:2px;
}
.header .userpic, h1 span.ljuser, .header div.hr hr{
display:none ;
}

/* SIDEBAR */

.sidebar-block{
color:#666;
}
.sidebar-block dt{
font-size:20px;
text-transform:uppercase;
font-weight:bold;
letter-spacing:-0.1em;
text-align:right;
}
.sidebar-cal dt{
color:#d57a35;
}
.sidebar-summary dt{
color:#9c59c1;
}
.sidebar-links dt{
color:#58d345;
}
.sidebar-tags dt{
color:#c40b80;
}
.sidebar dd{
width:100% !important;
display:block;
margin:0px;
padding:0px;
}
.sidebar-powered{
text-transform:lowercase;
color:#999;
font-size:12px;
}
.sidebar-powered a{
font-size:12px;
}
.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 #fff;
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;
color:#8b8c90;
font-weight:normal;
}
.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:#1d1f21;
letter-spacing:0.01em;
}
.emdash, sidebar-block .comma{
color:#777;
}
dd.tags{
text-align:left;
padding:0px;
}
.sidebar-block .comma{
display:block;
font-size:0.01%;
color:#ccc;
height:1px;
background:#fff;
margin:2px 0px;
}
.sidebar-cal caption{
text-align:right;
line-height:14px;
}
.sidebar-cal .calendar-wrap caption a{
font-size:16px;
text-transform:uppercase;
font-weight:normal;
}
.sidebar-cal .calendar-wrap a.year{
text-align:right;
}
.sidebar-cal .calendar-wrap a.month{
float:left;
}

/* ENTRY AND FONTS */
dt.entry-title a.subj-link, .entry-title{
display:block;
color:#1d1f21 !important;
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:#1d1f21;
line-height:18px;
font-size:12px;
clear:both;
border-top:solid 1px #fff;
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:6px;
}
dd.username{
display:block;
}
dd.username .ljuser a:link b, dd.username .ljuser a:visited b{
font-size:12px;
text-transform:uppercase;
font-weight:normal;
color:#8b8c90;
}
dd.entry-date{
display:block;
margin-bottom:-10px;
text-indent:16px;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/01590feb.png") no-repeat transparent 75px -32px;
}
abbr.updated{
letter-spacing:.03em;
font-weight:100;
color:#8b8c90;
text-decoration:none;
font-size:12px;
text-transform:uppercase;
border-bottom:none !Important;
}
.ljuser a:link b, .ljuser a:visited b{
color:#58d345;
}
.ljuser a:hover b, .ljuser a:active b{
color:#c5d94c;
}
big{
font-size:150%;
letter-spacing:-1px;
}
small{
font-size:75%;
letter-spacing:0.04em;
}
blockquote{
border-top:3px #fff solid;
border-bottom:3px solid #fff;
padding:10px;
margin:0px 30px;
}
textarea{
border:transparent;
font-size:12px;
line-height:15px;
letter-spacing:1px;
background:#fff;
color:#c40b80;
}
input, select{
font-size:11px;
color:#747474;
text-transform:none;
letter-spacing:0px;
}
code, pre{
color:#8b8c90;
}
a:link, a:visited{
font-weight:bold;
color:#5db0d6;
font-style:normal;
text-decoration:none;
letter-spacing:0.03em;
}
a:hover, a:active{
color:#4ba2d0;
cursor:crosshair;
letter-spacing:0.05em;
padding:2px;
}
.entry a:hover, .entry a:active{
background:#fff;
}

/* METADATA */

div.metadata{
margin:0px;
}
dt.meta-location-label, dt.meta-mood-label, dt.meta-music-label, dt.meta-groups-label{
font-size:12px;
text-transform:uppercase;
font-weight:bold;
margin-right:5px;
display:inline;
float:left;
}
dt.meta-location-label{
color:#9c59c1;
}
dt.meta-mood-label{
color:#58d345;
}
dt.meta-music-label{
color:#c40b80;
}
dt.meta-groups-label{
color:#d57a35;
}
dd.meta-mood-value, dd.meta-location-value, dd.meta-music-value, dd.meta-groups-value{
font-size:12px;
letter-spacing:0.02em;
text-transform:lowercase;
color:#1d1f21;
margin:0px;
line-height:16px;
}
dd.meta-location-value a{
font-size:11px;
text-transform:lowercase;
}
div.ljtags{
width:100%;
padding:3px;
font-size:0.01%;
border-left:solid 7px #58d345;
margin:10px 0px;
}
.ljtags:hover{
background:#fff;
border-left:solid 7px #9c59c1;
}
div.ljtags a:link, div.ljtags a:visited{
font-size:12px;
color:#8b8c90;
letter-spacing:0px;
text-decoration:none;
text-transform:lowercase;
font-weight:normal;
margin:2px 6px;
}
div.ljtags a:hover, div.ljtags a:active{
color:#1d1f21;
text-decoration:none;
font-style:italic;
}

/* ENTRYMENU LINKS */
.entrymenu, .entrysubmenu{
display:block;
text-align:left;
border-bottom:solid 1px #eee;
margin:0px;
padding:2px;
width:515px;
margin-left:-10px;
}
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 4px;
}
.entrymenu a:link, .entrymenu a:visited, .entrysubmenu a:link, .entrysubmenu a:visited{
font-size:13px;
font-weight:bold;
color:#8748b7;
text-transform:uppercase;
letter-spacing:0px;
}
.entrymenu a:hover, .entrymenu a:active, .entrysubmenu a:hover, .entrysubmenu a:active{
color:#c40b80;
padding:0px;
background:transparent;
}

/* 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/01590feb.png") !important;
background:transparent no-repeat;
width:0px;
height:0px;
padding:8px !Important;
}

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

/* FULL VIEW PAGE */
.entry-comments{
color:#8b8c90;
}
.entry-comments .hr{
display:none;
}
#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;
}
.entry-comments .ljuser a b{
font-size:12px;
}
div.comments-links{
padding:7px;
text-align:center;
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-bottom:solid 2px #fff;
text-transform:none;
min-height:130px;
margin:15px 0px;
padding:8px 5px;
}
div.comment-text{
min-height:45px;
padding:9px;
color:#1d1f21;
}
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:#8b8c90;
text-transform:none;
font-weight:normal;
font-style:italic;
margin-right:5px;
font-size:12px;
}
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;
}
textarea.textbox, input.textbox{
border:#ccc solid 1px;
letter-spacing:0px;
font-size:11px;
color:#8b8c90;
background:#ffffff;
}
.entry-linkbar{
display:block;
width:100;
padding:0px 60px;
margin:0px;
text-align:right;
}

/* CALENDAR */

.entry-text div.calendar-wrap caption a{
font-size:22px;
text-transform:uppercase;
letter-spacing:-1px;
}
caption a.month{
color:#8b8c90;
}
caption a.year{
float:right;
color:#1d1f21;
}

.entry-text div.calendar-wrap caption a:hover, .entry-text div.calendar-wrap caption:active{
background:transparent;
padding:0px;
}
.entry-text .calendar-wrap caption{
text-align:left;
line-height:14px
}
.entry-text .calendar-wrap{
width:80%;
margin:40px auto;
border-bottom:solid 1px #fff;
}
.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;
}
.calendar-wrap td{
text-align:center;
font-size:11px;
height:22px;
VERTICAL-ALIGN:bottom;
color:#8b8c90;
padding:3px;
line-height:px;
}
.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-image:none !important;
background:#000;;
height:43px;
}
#lj_controlstrip td{
border-color:#111 !important;
}
#lj_controlstrip span{
color:#777;
}
#lj_controlstrip a:link, #lj_controlstrip a:visited{
text-transform:lowercase;
color:#fff !important;
}
#lj_controlstrip a:hover, #lj_controlstrip a:active{
color:#8b8c90 !important;
text-decoration:none;
}
#lj_controlstrip input{
background:transparent;
color:#555;
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;
background:transparent !important;
border:none;
color:#999;
}
#lj_controlstrip input:hover{
color:#fff;
}
input#lj_controlstrip_search_input_text{
color:#999;
border-bottom:dotted 1px #bbb;
padding:2px;
letter-spacing:0.15em;
text-transform:none;
font-weight:normal;
background:transparent !important;
}
input#lj_controlstrip_search_input_text:hover{
color:#fff;
border-bottom:solid 2px #fff;
}
input#lj_controlstrip_search_submit{
padding:0px;
margin-left:5px;
}

/* RGBA REPLACEMENT IMGS */
.sidebar, .entry-wrap, div.ljtags, .calendar-wrap td{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/3670e3d6.png") repeat transparent;
}
.entry-wrap:hover, .view-archive .entry-text li, dl.vcard dt img, blockquote, .comment-upic img{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/cfc3983a.png") repeat transparent;
}
.sidebar-block, .entry{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/ce1e2d48.png") repeat transparent;
}
.entrymenu, .entrysubmenu{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/f0c90559.png") repeat transparent;
}
li.prev a.item, li.next a.item, ul.nav li a:link, ul.nav li a:visited, li.item-selected, li.item-selected a:hover, li.item-selected a:active{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/5578e26d.png") repeat transparent;
}

So! If you find bugs and whatnot, please let me know so I can try to fix them asap.
&if you liked and/or used, please comment! Those things make my day.
(and the obligatory: if you use this, please link to yearzeta in either your profile or sidebar.)

maker: sulfuricfusion, style: minimalism

Previous post Next post
Up