Layout 1: Overtures!

[soulpoem]

After what seemed like forever, I'm finally sharing a layout, huh? Expect more to come soon enough! :3



Live!

Browsers: Google Chrome, Safari, IE 8 (Works weird, wouldn't recommend), should work okay on everything else.
Resolution: 800 x 600 at the very least.



The code:

body{ background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Backgrounds/Brownwood.png); background-repeat: repeat; background-attachment: fixed; text-align: center; color: #777; font-family: "Geneva", sans-serif; font-size: 11px; margin: 100px;}

a, a:link, a:visited {color: #BCC499; text-decoration: none; font-family: "Georgia", serif; font-variant: small-caps;}

b,u {color: #BCC499;}

i {color: #92A68A;}

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

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

input, textarea, select {font-family: "Geneva", sans-serif; font-size: 11px; color: #777;}

blockquote {background: #fafafa; padding: 10px; color: #777; border: 4px double #f5f5f5;}

code, kbd, pre, tt {font-family: monospace;}

#content{margin-left: auto; margin-right: auto; background: transparent; width: 800px;}

#maincontent {margin-top: 15px; font-family: "Geneva", sans-serif; font-size: 11px; background: #fff; color: #777;
margin-right: 320px; text-align: left; width: 480px; opacity: .85;}

#sidebar {margin-top: 15px; background: #fff; font-size: 11px;
font-family: "Geneva", sans-serif; color: #777; width: 200px; float: right; text-align: left; opacity: .85;}

#header {width: 480px; padding: 0px; text-align: center; font-family: "Geneva", sans-serif; font-size: 0px; font-weight: normal;
background: transparent; color: transparent; margin: 0px 320px 0px auto; height: 37px; overflow: hidden;}

.headerimage {width: 460px; height: 225px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Headers%20and%20banners/H1.png); background-repeat: no-repeat; margin: 0px 455px 20px auto; border: 10px solid #fff; opacity: .85;}

#footer {width: 480px; text-align: center; font-family: "Georgia", serif; font-size: 12px; font-weight: normal; background: #fff;
color: #777; z-index: 100; clear: both; font-variant: small-caps; padding-top: 10px; padding-bottom: 10px; margin-right: 320px; opacity: .85; letter-spacing: 1px;}

/* header -- links to views; title of journal; subtitle of journal */

div#header a, div#header a:link, div#header a:visited {color: transparent!important; font-weight: normal;}

div#footer a, div#footer a:link, div#footer a:visited {color: #777;}

div#footer a:hover {color: #fafafa; text-decoration: none; background: #f4f4f4; padding: 5px;}

.title { font-size: 20px; text-align: center; font-variant: small-caps; letter-spacing: 1px; padding: 10px; font-family: "Georgia", serif; background: #fff; margin-bottom: 10px; display: none;}

.subtitle {display: none;}

div#header li.view {padding: 5px 32px 32px; color: transparent;}

div#header a {padding: 5px 32px 32px; background-color: transparent; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/books-1.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 110%;}

div#header a[href*="http://community.livejournal.com/trodain/"], body.lj-view-recent div#header li.view {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/books-1.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 110%;}

div#header a[href*="http://community.livejournal.com/trodain/calendar"], body.lj-view-archive div#header li.view {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/calendar-4.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 110%;}
div#header a[href*="http://community.livejournal.com/trodain/friends"], body.lj-view-friends div#header li.view {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/promotion-1.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 110%;}
div#header a[href*="http://community.livejournal.com/trodain/profile"]{background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/news.png); background-repeat: no-repeat; background-attachment; scroll; background-position: 50% 110%;}
div#header a[href*="http://community.livejournal.com/trodain/tag/"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/tag-1.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 110%;}

div#footer a:hover {color: #fff; text-decoration: none;}

div#header a:hover {color: transparent;}

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

ul.navheader li {display: inline; padding: 0px; font-size: 0px; color: transparent; margin: 0px;}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {color: #BCC499; font-variant: small-caps;}

div#sidebar a:hover {color: #92A68A; text-decoration: none; border-bottom: 1px dashed #f4f4f4;}

.defaultuserpic {display: none;}

.sbarheader {padding: 0px 5px 0px 5px;}

.sbarbody {padding: 0px 10px 10px 10px;}

.sbarbody2 {padding: 10px 10px 0px 10px; line-height: 160%;}

table.calendar, .sbarcalendar, .sbarcalendarposts {display: none;}

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

li.sbaritem {list-style: none; text-align: left; padding: 5px 5px 5px 15px; margin: 5px 5px 5px 0px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/031.png); background-repeat: no-repeat; background-position: left center; display: block;}

li.sbartitle {display: none;}

/* maincontent */

.subcontent {width: 480px; background: #fff;}

.entry {margin: 10px; padding: 10px; background: #fff; color: #777; font-family: "Geneva", sans-serif; font-size: 11px; text-align: left; line-height: 160%; overflow: hidden;}

.entry_text img {max-width: 400px; padding: 5px; border: 1px solid #f4f4f4;}

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

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

.userpic, .userpicfriends {position: relative; float: right; padding: 0px; margin: 10px; text-align: center; border: none!important; font-family: "Geneva", sans-serif; font-size: 11px; z-index: 15; margin-right: -110px!important; background: transparent!important; margin-top: 40px; color: transparent!important;}

.userpic a, .userpicfriends a {display: none!important;}

.userpic img, .userpicfriends img {border: 10px solid #fff; width: 80px; height: 80px;}

.date {display: none;}

.subject {font-weight: normal; padding: 0px; color: #777; font-family: "Georgia", serif; font-size: 20px; font-variant: small-caps; letter-spacing: 1px; text-align: center;}

.subject a, .subject a:link, .subject a:visited {color: #777; text-align: center;}

.subject a:hover {color: #92A68A;}

.datesubject {background-color: #fff; padding: 5px; border-bottom: 4px double #f5f5f5; margin-right: 5px; margin-left: 5px;}

.ljtags {display: none;}

.currents {text-transform: capitalize; margin-top: 10px; padding: 10px 0px 10px 0px;}

.currentmood {padding: 2px 0px 2px 20px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/glass.png); background-repeat: no-repeat; background-position: left center;}

.currentmusic {padding: 2px 0px 2px 20px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/music-1.png); background-repeat: no-repeat; background-position: left center;}

.currentlocation {padding: 2px 0px 2px 20px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/direction.png); background-repeat: no-repeat; background-position: left center;}

.currentgroups {display: none;}

.currents strong {display: none;}

.comments {font-family: "Georgia", sans-serif; font-size: 11px; text-align: center; background-color: #fff; padding: 10px 10px 0px 10px; position: relative; border-top: 4px double #f5f5f5; color: #fff;}

div.comments a, div.comments a:link, div.comments a:visited {color: #777; font-variant: small-caps;}

div.comments a:hover {color: #fff; text-decoration: none; padding: 5px; background: #BCC499;}

/* maincontent -- year/achive pages */

ul.year {text-align: center; padding-top: 20px;}

ul.year li {display: inline; margin: 5px; padding: 5px; font-family: Georgia, serif; font-size: 20px; font-variant: small-caps;}

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

table.yeartable td.yeardate, table.yeartable td.yearday {border: 1px solid #f4f4f4;}

table.yeartable td.yearday {background: #BCC499; text-align: center; font-variant: small-caps; font-family: "Georgia", serif; color: #fff;}

td.yearmonth {border-style: none;}

dl, dt {font-weight: normal;}

/* footer */

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

ul.navfooter li {display: inline; margin: 5px; padding: 5px;}

.clearfoot {clear: both; display: none;}

/* misc */

.clear {display: none;}

.skiplinks {display: none;}

.separator{height: 20px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Backgrounds/Brownwood.png);}

/*------------------------------------
Look of contextual Popup
------------------------------*/

div.ContextualPopup {margin: 5px 0 0 20px; font: normal 10px "Georgia", serif !important; padding: 5px; font-variant: small-caps; opacity: .85;}

div.ContextualPopup img {border: 0;}

div.ContextualPopup div.Inner {background-color: #fff !important; color: #777!important; border: none!important; padding: 0px; width: 250px; font-variant: small-caps;}

div.ContextualPopup .Content {padding: 10px; margin-right: 80px; line-height: 1.4; font-variant: small-caps!important;}

div.ContextualPopup .Relation {font-weight: normal!important; padding-bottom: 5px; color: #AACCB1!important; font-variant: small-caps;}

div.ContextualPopup .Content .OnlineStatus {font-weight: normal!important; font-variant: small-caps;}

div.ContextualPopup .Userpic {padding: 10px; background-color: #f4f4f4!important; margin-top: 10px; margin-right: 10px; }

div.ContextualPopup div.Inner a:link , div.ContextualPopup div.Inner a:visited {text-decoration: none!important; font-weight: normal!important;
color: #AACCB1!important; font-variant: small-caps; font: normal 11px "Georgia", serif !important;}

.ljuser img[src="http://l-stat.livejournal.com/img/userinfo.gif"]
{width: 0; height: 0; padding: 16px 0 0 16px;
background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/leaf-2.png); background-repeat: no-repeat; background-position: left center;}

.ljuser img[src="http://l-stat.livejournal.com/img/syndicated.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/feed-5.png);
background-repeat: no-repeat; background-position: left center; padding: 16px 0 0 16px; width: 0; height: 0;}

.ljuser img[src="http://l-stat.livejournal.com/img/newsinfo.gif"] {background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/newspaper-2.png);
background-repeat: no-repeat; background-position: left center; padding: 16px 0 0 16px; width: 0; height: 0;}

.ljuser img[src="http://l-stat.livejournal.com/img/community.gif"]
{width: 0; height: 0; padding: 16px 0 0 16px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/crown-1.png); background-repeat: no-repeat; background-position: left center;}

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"] {display: none;}

/*Tags page */

h2 {display: none;}

.ljtaglist {padding: 10px; font-variant: small-caps; list-style: none; background-color: #fff;}

.ljtaglist li {padding: 5px 0px 5px 20px; background-image: url(http://i974.photobucket.com/albums/ae221/Arcanizer/Tiny%20icons/012-1.png);
background-repeat: no-repeat; background-position: left center; text-decoration: none; font-family: "Georgia", serif; font-size: 11px; font-variant: small-caps; margin: 5px;}

.ljuser a b {font-weight: normal;}

Instructions:
1) Change your layout to Flexible Squares here. Make sure it's the Blue Gray one! Before you go on to step 2, make sure the sidebar setting is 'right'.

2) Go to "Customize your theme" and make sure you do the following things:

a) Sidebar:

- Default userpic: No.
- Blurb/free text: Yes.
- Link list: Yes.
- Everything else: No.
- Ordering: Blurb first, then link list.

b) Header links:

- Simply edit the code so that it's the same address as your LJ. For example, if I was using it at ruewort, it'd be http://ruewort.livejournal.com.

c) Custom CSS:

- All settings: No.
- Paste your stylesheet and you should be done!

d) Optional (Adding a header):

The header in the preview has a 10px white border. Remove the right margin if you're using an 800px header. \o/

Comments are welcome and credit is very much appreciated. Like what you see? Watch trodain!