Twilight Layout

[sunrise_sets]

I've been working on this one for quite a while now. :P




Click image to enlarge.
Flexible squares
Works with Basic, Plus, and Paid
Works in Firefox, IE, and Safari


/*Coding by sunrise_sets. Do not re-distribute and claim as your own*/

body {
background-color: #888888;
text-align: center;
color: #ffffff;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 20px 0 20px 0;
}

::-moz-selection {
color: #ffffff;
background: #888888;
}

a, a:link, a:visited {
color: #9bc9b6;
text-decoration: none;
}

a:hover {
color: #1e1e1e;
text-decoration: none;
cursor: default;
}

blockquote {
padding: 10px;
font-size: 9px;
color: #9bc9b6;
background-color: #000000;
border-left: 2px solid #999999;
}

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

/************tiny user icons*********************/
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0px 16px;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://p-stat.livejournal.com/img/icon_protected.gif);
}

.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 16px 0px 0px 16px;
background: url();
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i183.photobucket.com/albums/x276/jacksparrow022/Live%20Journal/user_icon_grey-1.gif);
padding: 16px 0px 0px 10px;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://i183.photobucket.com/albums/x276/jacksparrow022/Live%20Journal/user_icon_grey-1.gif);
padding: 16px px px 10px;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://i183.photobucket.com/albums/x276/jacksparrow022/Live%20Journal/com_icon_grey-1.gif);
padding: 16px 0px 0px 16px;
}

/************main content************************/
#content {
width: 800px;
margin-left: auto; margin-right: auto;
background-color: #3e3e3e;
border-width: 0px;
border-style: solid;
border-color: #999999;
padding: 15px;
}

#maincontent {
margin: 15px 0px 0px 185px;
font-family: "Verdana", sans-serif;
font-size: 8pt;
background-color: #1e1e1e;
color: #ffffff;
padding: 0px;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-right: 0px;
text-align: left;
}

#sidebar {
padding-top: 15px;
margin-top: 15px;
background-color: #1e1e1e;
border-color: #999999;
border-width: 0px;
border-style: solid;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #888888;
width: 175px;
float: left;
text-align: left;
}

#header {
padding: 10px 0px 5px 0px;
margin: 0px;
text-align: center;
font-family: "Zephyr";
font-size: 20px;
font-weight: normal;
letter-spacing: 0px;
border-style: solid;
border-color: #999999;
border-width: 0px 0px 2px 0px;
background-color: #1e1e1e;
color: #9bc9b6;
}

#footer {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 0px;
background-color: #3e3e3e;
color: #888888;
border-color: #999999;
border-width: 0px;
border-style: solid;
z-index: 100;
clear: both;
}

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

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #9bc9b6;
}

div#header a:hover, div#footer a:hover {
color: #1e1e1e;
text-decoration: none;
}

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

ul.navheader li {
display: inline;
padding: 0 10px 0 10px;
}

.title {
display: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 200%;
top: 10px;
}

.subtitle {
font-family: "Verdana", sans-serif;
font-size: 11px;
font-weight: normal;
top: 10px;
}

/*******************sidebar*********************/

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #9bc9b6;
}

div#sidebar a:hover {
color: #1e1e1e;
text-decoration: none;
}

.defaultuserpic {
text-align: center;
}

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

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

.sbarbody2 {
padding: 0 15px 0 15px;
}

#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #999999 solid;
}

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

.sbarcalendar {
padding: 3px;
background-color: #000000;
border-color: #1e1e1e;
border-width: 0px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 9px;
}

.sbarcalendarposts {
border-color: #000000;
border-width: 0px;
border-style: solid;
background-color: #1e1e1e;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

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

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

li.sbartitle {
padding-left: 15px;
list-style: none;
border-bottom: 1px solid #999999;
background-color: #1e1e1e;
margin-bottom: 10px;
margin-top: 10px;
}

/* maincontent */

.subcontent {
}

.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #1e1e1e;
color: #888888;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}

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

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

.userpic {
position: relative;
float: right;
background-color: #1e1e1e!important;
padding: 0px;
margin: 10px;
text-align: center;
z-index: 15;
border-width: 0px;
border-color: #f6f6f6;
border-style: solid;
}

.userpic img {
border: 5px solid #999999;
}

.userpicfriends {
position: relative;
float: right;
background-color: #1e1e1e !important;
padding: 0px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 0px;
border-color: #f6f6f6;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}

.userpicfriends a font {
color: #9bc9b6;
}

.userpicfriends a:hover font {
color: #1e1e1e;
}

.userpicfriends img {
border: 5px solid #999999;
}

.date {
line-height: 200%;
top: 5px;
color: #888888;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.subject {
font-weight: normal;
padding: 0px;
color: #9bc9b6;
font-family: "Zephyr";
text-transform: lowercase;
font-size: 22px;
text-align: left;
}

.subject a, .subject a:link, .subject a:visited {
color: #1e1e1e;
}

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

.datesubject {
background-color: #1e1e1e;
border-top: 0px solid #e6e5e5;
padding: 10px;
}

.currents, .currentmood, .currentmusic {
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 0px 0px 10px 0px;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: center;
background-color: #1e1e1e;
padding: 7px 7px 7px 7px;
position: center;
top: 15px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #ffffff;
}

div.comments a:hover {
color: #1e1e1e;
text-decoration: none;
}

.ljtags {
margin: 10px 0px 0px 0px;
background-color: #1e1e1e;
width: 300px;
padding: 0px;
color: #888888;
font-size:10px bold;
border: 0px solid #c2cde0;
}

h2 {
font-size: 12px;
margin-left: 20px;
font-weight: normal;
}

.ljtaglist {
list-style-type:none;
}

/* maincontent -- entry, reply pages */

.datesubjectcomment {
background-color: #1e1e1e;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #999999;
background-color: #f6f6f6;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 0px;
border-color: #919bad;
border-style: solid;
}

.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #999999;
padding: 10px;
clear: right;
}

input, textarea, select {
font-family: "Verdana", sans serif;
background-color: #3e3e3e;
border: 1px solid #999999;
font-size: 9px;
color: #9bc9b6;
padding: 3px;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
background-color: #1e1e1e;
color: #1e1e1e;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Verdana", sans-serif;
color: #9bc9b6;
}

.commentbox {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #3e3e3e;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ffffff;
}

.datesubjectcomment a:hover {
color: #b0b9c8;
}

.commentboxpartial {
border-color: #999999;
border-width: 0px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #3e3e3e;
}

.commentinfo {
background-color: #1e1e1e;
margin-top: 10px;
width: 100%;
}

/* maincontent -- year/achive pages */

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

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 0px;
border-style: solid;
border-color: #999999;
background-color: #888888;
}

table.yeartable td.yearday {
background-color: #888888;
text-align: center;
}

td.yearmonth {
border-style: none;
color: #888888;
}

/******************footer************************/

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

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

.clearfoot {
clear: both;
}

/* misc */

.clear {
height: 15px;
}

.skiplinks {
text-align: center;
}

/************header image section****************/

.headerimage {
position: relative;
width: 830px;
height: 315px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url('PLACE HEADER URL HERE');
background-repeat: no-repeat;
}

/***********************************************/

.separator {
height: 10px;
background: #3e3e3e;
}

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

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}

This layout uses the font Zephyr. To see the header links and the subjects in that font, make sure that you have Zephyr installed on your computer. Those who do not have the font will see the subjects and header links in Verdana.

Also, if you like the layout, but not the Twilight theme, all you have to do is not use the Twilight font and header. ;D
Installation Instructions.01Make sure your journal is set to Flexible Squares under Customize Journal Style..02Go to Customize Your Theme and click on Custom CSS in the sidebar..03Set all drop down menus to no..04Copy and paste everything from the code box above into the box labeled Custom Stylesheet..05If you would like to use the header pictured, upload this header to your own image host, such as Photobucket. Then, find where it says PLACE HEADER URL HERE in the code and paste in your URL. If you would like to use your own header, place your URL here. Note: the header I made is 830x315. If you plan on using a header of a different size, make sure to change the width and height values under .headerimage to fit your dimensions..06Hit Save Changes and you should be done!- Credit sunrise_sets or sunset_rises somewhere visible, such as in your profile layout.

- This is my first layout, so if you see anything that I forgot to code, or just plain looks weird, please let me know and I'll try to fix it.

- If you have any questions, feel free to ask!

Tiny icons from passing_girl.
Like what you see? Join!!//Watch!!