Fuesch's graphics & layouts - SpiderDom layout

House Rules

~~Driver picks the music, shotgun shuts his cakehole.~~

Everything is snaggable - no need to ask.

Please credit.
<lj user=fuesch>

Comments are great.

Nominations are awesome.

If you find a typo, please let me know!

If you'd like a graphic customized, just ask - please don't edit it yourself.

I don't mind if you adjust layouts a bit.

Got a question? Don't be afraid to ask. But keep it on topic.

If your question/comment doesn't fit into any entry, please send me a message.

Tags

Page Summary

ckll.livejournal.com — (no subject) [+0]

October 2025

Previous | Memories | Tell Someone | Next

fuesch

30 April 2011 @ 11:38 pm

SpiderDom layout

First I couldn't decide which layout to finish this month. Then I decided on a layout, but didn't like what I was turning it into, so I gave up on it for the moment. I wasn't in the mood for any of my other unfinished layouts, so I just started a new one (Which is not the point of this exercise, dammit! Not exactly, at least.). And this is how I finally made my first Muse layout.

SpiderDom

Click here for live preview, then click on the layout's icon.

info

Based on Flexible Squares.
Works for all account types.
Tested in Firefox 3 and Google Chrome 9. Also tested in Internet Explorer 8, but that bastard is being uncooperative again: the entire left side unclickable! Hpmh.

how to

Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet

/* SpiderDom
http://fuesch.livejournal.com/24348.html */

body {
margin: 0px;
background: #000000 url(http://fatfrog.info/Ma/A/layout/spiderdom/bg.png) top left no-repeat;
text-align: center;
color: #5E5E5E;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

a, a:link {
color: #CD262C;
text-decoration: none;
}

a:visited {
color: #AD161C;
text-decoration: none;
}

a:active {
color: #CC4C51;
text-decoration: none;
}

a:hover {
color: #FF0009;
text-decoration: none;
}

code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}

p, td, blockquote {
font-size: 12px;
}

blockquote {
color: #ABABAB;
}

q {
font-style: italic;
color: #ABABAB;
}

/* GENERAL ----------------------------------------------------------------------------------------------------------------------------------------------------- */

.clear {
height: 15px;
}

#content {
margin: 0px;
}

#header {
margin: 350px 0px 0px 30px;
float: left;
width: 240px;
text-align: right;
font-size: 24px;
letter-spacing: 1px;
}

ul.navheader {
margin: 0px;
padding: 0px;
}

ul.navheader li {
display: block;
padding: 0 3px 0 3px;
list-style: none;
}

.view {
color: #FFFFFF;
}

.title {
margin-top: 5px;
color: #ABABAB;
font-size: 20px;
font-style: italic;
}

.subtitle {
margin-top: 5px;
line-height: 100%;
color: #ABABAB;
font-size: 18px;
font-style: italic;
}

#sidebar {
margin: 600px 0px 0px -240px;
float: left;
width: 240px;
font-size: 12px;
text-align: right;
}

.sbarbody {
margin: 0px 0px 30px 0px;
padding: 0px;
}

.sbarbody2 {
margin: -20px 0px 30px 0px;
padding: 0px;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbartitle {
margin-bottom: -10px;
padding-right: 10px;
list-style: none;
color: #ABABAB;
font-size: 18px;
}

.tagcloud {
padding-left: 15px;
list-style: none;
}

li.sbaritem {
margin: 4px 0px;
padding: 5px;
background: #0C0C0C;
}

.defaultuserpic {
text-align: center;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
padding: 2px 3px 6px 7px;
background: #0C0C0C;
border: #000000 1px solid;
text-align: center;
font-size: 12px;
}

.sbarcalendarposts {
padding: 2px 3px 6px 7px;
background: #1D1D1D;
border: #000000 1px solid;
text-align: center;
font-size: 12px;
}

#maincontent {
margin: 100px 30px 30px 300px;
font-size: 12px;
text-align: left;
}

#footer {
margin: 0px 0px 0px 30px;
width: 240px;
text-align: right;
font-size: 24px;
letter-spacing: 1px;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: block;
margin: 0 5px 0 5px;
list-style: none;
}

.viewing {
color: #FFFFFF;
}

.clearfoot {
clear: both;
}

/* ENTRIES & FRIENDS ------------------------------------------------------------------------------------------------------------------------------------------- */

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

.userpic {
margin: 0px;
padding: 10px;
position: relative;
float: left;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
z-index: 15;
}

.userpicfriends {
margin: 0px;
padding: 10px;
position: relative;
float: left;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png)!important;
text-align: center;
font-size: 9px;
text-transform: uppercase;
z-index: 15;
}

.userpicfriends, .userpicfriends font {
color: #FFFFFF;
}

.datesubject {
margin-left: 130px;
padding-top: 5px;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
}

.date {
margin-left: 50px;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
color: #232323;
font-size: 20px;
}

.subject {
margin: -8px 0px 20px 0px;
color: #ABABAB;
font-size: 18px;
font-style: italic;
}

.subject a, .subject a:link {
color: #ABABAB;
}

.subject a:hover {
color: #FFFFFF;
}

.entry {
margin-left: 130px;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
font-size: 12px;
text-align: left;
}

.entry ul li {
padding-left: 5px;
margin-left: 15px;
}

.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

.ljtags {
margin-top: 15px;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
color: #2F3B81;
font-size: 11px;
font-variant: small-caps;
}

.currents {
margin-top: -15px;
color: #2F3B81;
font-size: 11px;
font-variant: small-caps;
}

.currentmood, .currentmusic, .currentlocation {
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
margin-bottom: 2px;
}

.comments {
font-size: 12px;
text-align: right;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/comments.gif) top left repeat-x;
padding: 7px 5px 0px 5px;
position: relative;
}

.separator {
height: 35px;
}

/* COMMENTS ---------------------------------------------------------------------------------------------------------------------------------------------------- */

.skiplinks {
text-align: center;
color:#000000;
}

.skiplinks a {
background: #0C0C0C;
padding: 5px;
}

.box {
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
}

.commentbox {
margin: 0px 0px 20px 0px;
padding: 0px;
background: #0C0C0C;
}

.datesubjectcomment {
padding-top: 10px;
color: #ABABAB;
font-size: 18px;
font-style: italic;
}

.userpiccomment {
margin: -10px 10px 0px 0px;
padding: 10px;
position: relative;
float: left;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
z-index: 15;
}

.commentreply {
margin: 10px;
position: relative;
font-size: 12px;
}

.commentboxpartial {
margin: 10px;
padding: 10px;
background: #0C0C0C;
}

#content + div {
background-color: transparent!important;
border: none!important;
}

/* COMMENTING ------------------------------------------------------------------------------------------------------------------------------------------------- */

.lj-view-reply .box {
margin-left: 130px;
}

.replytoposter {
margin-left: 50px;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
color: #232323;
font-size: 20px;
}

.replytosubject {
margin: -8px 0px 20px 0px;
color: #ABABAB;
font-size: 18px;
font-style: italic;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
}

input, textarea {
background: #0C0C0C;
color: #5E5E5E;
}

textarea.textbox {
width: 95% !important;
}

/* CALENDAR ---------------------------------------------------------------------------------------------------------------------------------------------------- */

.lj-view-month .entry {
padding: 5px;
background: url(http://fatfrog.info/Ma/A/layout/spiderdom/black25percent.png);
}

ul.year {
text-align: center;
padding-bottom: 40px;
font-size: 14px;
}

ul.year li {
display: inline;
padding: 2px 5px;
}

.active {
padding: 2px 5px;
color: #FFFFFF;
font-size: 18px;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
}

td.yearmonth {
padding-bottom: 5px;
border-style: none;
color: #ABABAB;
font-size: 18px;
}

td.yearmonth a {
font-size: 12px;
}

table.yeartable td.yearday {
background: #0C0C0C;
text-align: center;
font-size: 18px;
}

table.yeartable td.yeardate {
background: #0C0C0C;
font-size: 14px;
}

/* TAGS -------------------------------------------------------------------------------------------------------------------------------------------------------- */

.lj-view-tags #maincontent {
margin-left: 430px;
}

.lj-view-tags #maincontent h2 {
font-weight: normal;
color: #ABABAB;
font-size: 18px;
font-style: italic;
}

.ljtaglist {
margin-left: 50px;
}

ul.ljtaglist li {
margin-bottom: 7px;
}

/* EXTRAS ------------------------------------------------------------------------------------------------------------------------------------------------------ */

.caption {
padding: 10px 10px 5px 10px;
background: #0C1032;
font-size: 11px;
text-align: center;
color: #ABABAB;
}

.caption img {
margin-bottom: 5px;
}

.captionless {
background: #0C1032;
padding: 10px;
}

.spoiler {
padding: 2px;
background-color: #0C1032;
color: #0C1032;
}

.spoiler a, .spoiler a:link, .spoiler a:active, .spoiler a:visited, .spoiler a:hover {
color: #0C1032!important;
text-decoration: underline;
}

The ads of a plus account take their color from the Custom Options. If you want to adjust the colors, go to Style and change Page - Background color of the outer table and Entries - Border color of the content and header/footer boxes.

Tags: - layouts, muse

1 comment | Leave a comment

( Post a new comment )

ckll.livejournal.com on May 1st, 2011 04:05 am (UTC)

You make amazing layouts

(Reply) (Link)