Dangerverse: Widow [Flexible Squares]

Oct 19, 2010 05:11

First in a series of the new MCR Dangerverse inspired layouts.



Preview Image.
layout by sulfuricfusion @ yearzeta

Dangerverse: Widow
(oh! a Flexible Squares layout for Blue Gray)Browser:

Firefox, Opera, Safari, Chrome, IE.

Screen:
800x600 is fine, but bigger screens look better.

Credits:
Icons from Some Random Dude. Background made from a texture by Dierat on dA. And of course, MCR graphics via the lovely Zex (zeeexito, dA).

Notes:

First in a series of Dangerverse inspired MCR layouts. Collab of Zeeexito and Zher. Also, this was my first try on Flexible Squares.

*Ljbar is hidden because it didn't look right, but if someone wants it, I'll, you know, get on that.

To Use:
1. Go to the customize page and type "Flexible Squares" into the search box.
2. Select the theme "Blue Gray." (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: WIDOW, a MCR layout
intended for Flexible Squares Blue Gray
by sulfuricfusion@yearzeta
icons from http://somerandomdude.com/projects/iconic/
bg from http://dierat.deviantart.com/art/Paper-Pack-3-182473365
MCR graphics from http://alexx-x3.deviantart.com/ */

body{
background:#f1f1f1 url("http://i955.photobucket.com/albums/ae39/zheeer/lj/e5d39100.jpg") repeat fixed;
padding:0px;
margin:0px;
font-family:tahoma, arial, helvetica, "sans serif";
font-size:11px;
line-height:17px;
}
#content{
width:100%;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/5cc9a78e.png") no-repeat 0px 150px transparent fixed;
margin-top:80px;
}

/* SIDEBAR */

#sidebar{
width:50%;
min-width:500px;
overflow:hidden;
max-height:180px;
padding:20px 0px 0px 0px;
margin:20px 25px 40px auto;
}
#sidebar_linklist ul{
list-style:bullet;
text-align:left
}
.sbarbody, .sbarbody2{
max-width:150px;
max-height:160px;
min-height:150px;
overflow-y:auto;
overflow-x:hidden;
color:#666;
float:left;
margin:0px 10px 30px 20px;
padding:0px;
}
.sbarbody li, .sbarcontent, .sbarcontent li{
width:100%;
padding:0px;
}
table.calendar{
border-spacing:3px;
}
td.sbarcalendar, td.sbarcalendarposts{
padding:3px;
text-align:center;
color:#999;
}
.sbarbody, .sbartitle{
display:none;
}
#sidebar_calendar, #sidebar_linklist{
display:inline;
}

ul.sbarlist{
list-style:none;
display:-block;
margin:0px;
width:100%;
}
.defaultuserpic{
float:left;
padding-top:20px;
padding-left:20px;
}
.defaultuserpic img{
padding:10px;
}
#maincontent{
width:50%;
min-width:500px;
margin:auto 25px auto auto;
padding:0px;
}

/* HEADER */

#header{
display:block;
width:100%;
background:transparent url("http://i955.photobucket.com/albums/ae39/zheeer/lj/c3d63b70.png") repeat-x bottom;
padding:0px;
width:100%;
margin:0px;
height:80px;
position:fixed;
top:0px;
z-index:10;
overflow:hidden;
left:0px;
padding-bottom:5px;
}
#header .title, #header .subtitle{
text-transform:uppercase;
line-height:30px;
width:50%;
letter-spacing:.5em;
font-family:arial;
display:block;
padding-left:10px;
}
#header .title{
color:#ffa800;
font-size:40px;
letter-spacing:0px;
font-weight:bold;
font-family:"arial black";
margin-top:15px;
}
#header .subtitle{
font-style:italic;
color:#000;
font-size: 22px;
letter-spacing:4px;
}
.navheader{
text-align:left;
margin-top:30px;
padding:0px;
display:block;
float:right;
width:420px;
margin-right:0px;
margin-left:auto;
}
.navheader li{
list-style:none;
display:inline;
}
.navheader li a, .navheader li.view{
display:inline;
font-weight:bold;
font-size:15px;
font-family:arial;
text-transform:uppercase;
margin:5px;
color:#000;
border-bottom:2px solid #000;
}
.navheader li a{
filter:alpha(opacity=50);
opacity:.5;
}
.navheader li a:hover, .navheader li a:active{
color:#fff;
border-bottom:none;
opacity:1;
}

/* ENTRIES */

.subcontent{
margin:20px auto;
width:100%;
padding:0px;
}
.entry{
padding:20px;
border-top:solid 2px #ddd;
border-bottom:solid 2px #ddd;
position:relative;
z-index:3;
font-size:12px;
color:#333;
letter-spacing:0.02em;
line-height:18px;
}
.subcontent .userpic, .userpicfriends{
padding:10px;
text-align:center;
float:left;
margin-left:-150px;
margin-top:30px;
z-index:1;
position:relative;

}
.subcontent .userpic img, .userpicfriends img{
width:100px;
height:100px;
padding:1px;
background:#ddd;
}
.datesubject{
padding:10px 5px 5px 5px;
line-height:15px;
}
.subject img{
float:left;
}
.subject a, .datesubject, .subject{

text-align:right;
text-transform:uppercase;
}
.subject a.subj-link, .subject{
width:100%;
display:block;
line-height:15px;
text-decoration:none;
font-family:"arial black";
font-size:25px;
letter-spacing:-1px;
padding:0px;
color:rgba(255,255,255,.8);
}
.datesubject .date{
font-size:13px;
color:#999;
letter-spacing:5px;
}

/* FONTS AND SUCH */

a:link, a:visited{
text-decoration:none;
color:#f69600;
font-weight:bold;
letter-spacing:0.01em;
text-shadow:0px 1px 0px #ccc;
}
a:hover, a:active{
color:#fff000;
}
.ljuser a:link b, .ljuser a:visited b{
color:#db0000;
margin-left:2px;
}
.ljuser a:hover b, .ljuser a:active b{
color:#a70000;
}
pre, code{
margin:0px;
color:#333;
}
blockquote{
color:#111;
margin:0px 20px;
padding:10px;
border-top:solid 2px #eee;
border-bottom:solid 2px #eee;
}
textarea{
color:#aaa;
font-size:12px;
letter-spacing:1px;
border:1px;
}

/* METADATA */

div.entry .clear{
display:none;
}
.currents{
margin-bottom:15px;
line-height:25px;
font-size:11px;
color:#888;
text-align:left;
padding-left:15px;
}
.currents a{
font-size:11px;
font-weight:normal;
}
.ljtags a{
font-size:11px;
font-weight:normal;
margin:0px 3px;
}
.currentlocation strong, .currentmood strong, .currentmusic strong, .currentgroups strong{
font-size: 0.01% !important;
color:rgba(255,255,255,.0);
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/5b76f42f.png") transparent no-repeat;
display:block;
width:16px;
height:16px;
float:left;
margin-right:8px;
overflow:hidden;
}
.currentlocation strong{
background-position:-144px -32px;
}
.currentmood strong{
background-position:-144px -64px;
}
.currentmusic strong{
background-position:-144px -96px;
}
.currentgroups strong{
background-position:-144px -128px;
}
.ljtags{
color:rgba(255,255,255,.0);
font-size:0.01%;
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/5b76f42f.png") transparent no-repeat -144px 0px;
padding-left:21px;
margin-left:15px;
margin-top:15px;
}

/* ADD COMMENT NUMBER OF COMMENTS */

.comments{
text-align:right;
font-size:0.01%;
color:#f3f3f3;
}
.comments a:link, .comments a:visited{
font-size:18px;
color:rgba(255,255,255,.6);
font-weight:bold;
margin:0px 5px;
text-transform:uppercase;
}
.comments a:hover, .comments a:active{
color:#444;
letter-spacing:0.03em;
}

/* FOOTER */
ul.navfooter{
display:block;
width:400px;
background:transparent;
list-style:none;
padding:5px 0px;
text-align:right;
margin:auto 50px auto auto;
}
ul.navfooter li{
display:block;
width:100%;
}

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

.ljuser img[src*="userinfo.gif"]{
background-position:-96px -16px !important;
padding:8px !important;
}
.ljuser img[src*="community.gif"]{
background-position:-112px -16px;
padding:8px !important;
}
.subject img[src*="icon_protected.gif"] {
background-position:-64px -8px;
padding:12px;
}
.subject img[src*="icon_groups.gif"] {
background-position:-32px -8px;
padding:16px;
}
.subject img[src*="icon_private.gif"] {
background-position:0px -8px;
padding:16px;
}

/* COMMENT PAGE */

div.skiplinks{
width:100%;
font-size:0.01%;
text-align:center;
}
.skiplinks a{
display:inline-block;
padding:5px;
margin:5px;
text-transform:uppercase;
font-size:12px;
color:#999;
text-shadow:none;
}
.skiplinks a:hover, .skiplinks a:active{
color:#000;
letter-spacing:.05em;
}
.box{
text-transform:uppercase;
letter-spacing:3px;
color:#999;
}
.box select{
letter-spacing:0px;
text-transform:lowercase;
}
.commentbox{
padding:15px;
min-height:60px;
border-top:solid 2px #ddd;
border-bottom:solid 2px #ddd;
margin-bottom:20px;
text-transform:none;
letter-spacing:0px;
}
.datesubjectcomment{
font-weight:bold;
color:#999;
text-transform:uppercase;
}
.datesubjectcomment strong{
color:#444;
letter-spacing:2px;
}
.commentreply{
margin:10px 0px;
color:#333;
}
.datesubjectcomment img.userpiccomment{
float:left;
padding:10px;
margin:0px 10px 10px 0px;
width:70px;
height:70px;
}

/* CALENDAR */

ul.year{
list-style:none;
width:100%;
display:block;
text-align:center;
padding:10px 0px;
margin:0px;
}
ul.year li{
padding:5px;
margin:5px;
display:inline;
font-size:14px;
}
.yeartable{
width:100%;
border-spacing:8px;
}
.yearmonth{
font-weight:bold;
text-transform:uppercase;
letter-spacing:3px;
font-size:18px;
color:rgba(255,255,255,.6);
}
.yearday{
text-align:right;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
color:#444;
}
.yeardate{
padding:3px;
font-size:16px;
font-weight:bold;
color:#999;
}
.yeardate a{
font-size:12px;
}

/* LJBAR */

#lj_controlstrip{
background-image:none !important;
background:#fff;
height:43px;
z-index:7;
display:none;
}
#lj_controlstrip td{
border-color:#ccc !important;
}
#lj_controlstrip span{
color:#777;
}
#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:#999 !important;
}
#lj_controlstrip a:hover, #lj_controlstrip a:active{
color:#bbb !important;
}
#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:#333;
}
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:#333;
border-bottom:solid 2px #333;
}
input#lj_controlstrip_search_submit{
padding:0px;
margin-left:5px;
}

/* EXTRA CODE TO MAKE UP FOR MY ABUSE OF RGBA */
.subcontent .userpic, .userpicfriends, .datesubject, .skiplinks a, .datesubjectcomment img.userpiccomment, ul.year, ul.year li, .yearday, .yeardate{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/1d7fbe10.png") repeat transparent !important;
}
#sidebar, td.sbarcalendar, td.sbarcalendarposts, .defaultuserpic img, .entry, blockquote, .skiplinks, .commentbox, .yeartable{
background:url("http://i955.photobucket.com/albums/ae39/zheeer/lj/5578e26d.png") repeat transparent;
}

If you find bugs, please tell me and I'll try to fix them asap! Also, if you liked, used, or have constructive criticism, I'd love to hear about it.
(In the case that you do use, please link to yearzeta in your profile or sidebar!)

layout: flexible squares, theme: dangerverse, !layouts, zher

Previous post Next post
Up