#6 - Black & White (My Chemical Romance layouts)

Aug 31, 2008 02:36








I had to make a layout with the new(ish) Ryan Russell photos.



INFO

  • Style: S2 - Smooth Sailing
  • Two versions: light and dark
  • For free, paid, plus accounts (Vertical ad placement doesn't work at all. If you'd like custom comment pages, I suggest horizontal ad placement. If you don't use comment pages, choose horizontal or between entries ad placement. But. If you don't have adblock, the layouts won't look as good. Sorry. ;__;)
  • Best viewed at 1024*768 or higher
  • Was tested in Firefox and IE (it works better with Firefox)


INSTALLING THE LAYOUT

1. Pick a header from below and paste its code into the CSS you chose under .pageheaderblock - background-image (you can find it in the HEADER section). For example if you choose the Gerard header, your .pageheaderblock will look like this.

2. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes. (screencap)

3. Go to the Theme customization page and choose these settings at Presentation:
  • Userinfo Position in Entries: Right side of the entry text
  • Username Position in Entries: Below usericons
  • Username Position in Comments: Below usericons
  • MetaData Position: Below entry text
  • Entry Tags Position: With Metadata (mood, music)

4. Go to Custom CSS, and select the following:
  • Use layout's stylesheet(s): No
  • Use layout's stylesheet(s) when including custom external stylesheet: No
  • Leave the Custom external stylesheet URL box blank.
  • Copy + paste the code to the Custom stylesheet box. (screencap)
Hit 'Save changes', and you're done!

CODES

LIGHT

/*-----------------------------------------------
------- DO NOT REMOVE, PLEASE -------
- overrides by allwashedout @ lj.com -
- style: s2 smooth sailing -
- works with Firefox and IE -
- best viewed in 1024*768 or higher resolution -
-------------------------------------------------*/

/*----------------------------------
-------------- BASICS --------------
------------------------------------*/

body {
margin: 0 !important;
font-family: "Arial", sans-serif;
font-size: 11px;
background-color: #f2f2f2;
color: #848484;
line-height: 18px;
}

a {
color: #f2f2f2;
text-decoration: none;
}

a:visited {
color: #;
}

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

.ljuser a {
color: #666666 !important;
text-transform: uppercase !important;
}

.ljuser a:hover {
color: #b8b8b8 !important;
}

.pageblock {
position: relative;
width: 820px;
margin-left: auto;
margin-right: auto;
}

blockquote {
margin: 5px 22x;
padding: 4px 10px;
border: 1px solid #e0e0e0;
}

.bodyblock {
margin: 0;
padding: 0;
}

.bodyheaderblock {
border-top: 0px solid #ffffff;
background-color: transparent;
}

.bodynavblock {
text-align: center;
background-color: transparent;
margin: 15px 0 20px 200px;
}

.bodynavblock ul {
padding: 0;
margin: 0;
position: relative;
z-index: 15 !important;
}

.bodynavblock li {
display: inline;
padding: 0px;
}

.bodynavblock a, .bodynavblock a:visited {
padding: 4px;
text-align: center;
font-weight: normal !important;
color: #b8b8b8;
}

.bodynavblock a:hover {
color: #666666;
}

.body-title, .body-midtitle, .pagefooterblock {
display: none;
}

/*-----------------------------------
--------------- HEADER --------------
------------------------------------*/

.pageheaderblock {
text-align: left;
margin: 0 0 0 200px;
background: #ffffff;
padding-bottom: 280px;
background-image: url('HEADERURL'); /*paste your header's url here*/
background-repeat: no-repeat;
background-position: bottom center;
}

.header-icon {
display: none;
}

.header-title {
margin: 0;
padding: 15px 15px 5px 15px;
font-size: 19px;
color: #666666;
letter-spacing: 1px;
font-family: "Lucida Sans Unicode", sans-serif;
background: #ffffff;
text-align: right;
}

.header-subtitle {
margin: 0;
padding: 0 15px 15px 15px;
font-size: 13px;
color: #b8b8b8;
letter-spacing: 1px;
text-align: right;
background: #ffffff;
}

.header-menu {
margin: 0px;
text-align: center;
background-color: transparent;
}

.header-menu ul {
padding: 5px 0;
margin: 0;
background-color: #f8f8f8;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}

.header-menu li {
display: inline;
background-color: transparent;
}

.header-menu a, .header-menu a:visited {
padding: 5px 7px;
text-decoration: none;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
color: #b8b8b8;
}

.header-menu a:hover {
color: #666666;
}

/*-----------------------------------
-------------- SIDEBAR --------------
-------------------------------------*/

.sidebar {
position: absolute;
background-color: #f2f2f2;
top: 30px;
left: 0;
width: 180px;
padding: 0 10px;
text-align: left;
font-size: 10px;
line-height: 17px;
color: #999999;
}

.sidebox {
position: relative;
padding: 10px 5px;
}

.sideboxTitle {
padding: 3px 0;
margin: 0 0 4px 0;
font-family: "Lucida Sans Unicode", sans-serif;
text-transform: lowercase;
font-weight: normal;
text-align: center;
font-size: 15px;
color: #b8b8b8;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}

.sideboxContent {
text-align: left;
}

.sideboxContent a {
color: #666666;
}

.sideboxContent a:hover {
color: #b8b8b8;
}

.sidebox #profile {
text-align: center;
}

.sidebox #freetext {
text-align: justify;
padding: 0 5px 0 0;
}

.sidebox #search {
padding-top: 5px;
margin-left: 11px;
}

.sidebox #search select, .sidebox #search input {
font-size: 11px;
background-color: #f2f2f2 !important;
color: #999999;
padding: 0;
margin: 1px;
border: 1px solid #dbdbdb !important;
}

.sidebox #tags_sidebox {
text-align: left;
padding: 0;
line-height: 0px;
font-size: 0px;
}

.sidebox #tags_sidebox a {
display: block;
font-size: 10px;
color: #666666;
line-height: 17px;
padding: 1px 2px 1px 15px;
border-bottom: 1px solid #dbdbdb;
}

.sidebox #tags_sidebox a:hover {
color: #b8b8b8;
background: #eeeeee;
}

.sidebox #systemlinks {
text-align: left;
display: inline;
}

.sidebox #latestmonth {
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 2px;
}

.sidebox #latestmonth a {
font-weight: bold;
margin-bottom: 5px;
}

.profile-label {
display: none;
}

.profile-userpic {
margin: 10px auto 2px auto;
padding: 7px;
background-color: #f2f2f2;
border: 1px solid #dbdbdb;
}

.profile-content {
}

.listtitle {
border-bottom: 1px solid #dbdbdb;
color: #b8b8b8;
text-transform: uppercase;
padding: 1px 0;
margin: 1px 0;
text-align: center;
letter-spacing: 2px;
}

.listitem {
padding: 0;
margin: 0;
}

.listitem ul {
padding: 0;
margin: 0 5px 0 0;
list-style-type: disc !important;
}

.listitem li {
display: block;
}

.listitem a {
padding: 1px 2px 1px 15px;
margin: 0 0 1px 0;
display: block;
text-transform: lowercase;
color: #666666;
border-bottom: 1px solid #dbdbdb;
}

.listitem a:hover {
color: #b8b8b8;
background-color: #eeeeee !important;
}

.sidebox #latestmonth table{
padding: 0px;
margin-left: auto;
margin-right: auto;
}

.latestmonth-active {
padding: 2px 4px;
margin: 1px;
letter-spacing: 0px;
background: #f8f8f8;
}

.latestmonth-active a {
color: #b8b8b8;
font-weight: bold;
}

.latestmonth-active a:hover {
color: #666666;
}

.latestmonth-inactive {
padding: 2px 4px;
margin: 1px;
letter-spacing: 0px;
}

.summaryList {
padding: 1px 2px 1px 15px;
border-bottom: 1px solid #dbdbdb;
}

/*-----------------------------------
-------------- ENTRIES --------------
-------------------------------------*/

.entryHolder {
padding: 30px 0;
margin: 0 0 0 200px;
background-color: #ffffff;
}

.entryHolder a {
color: #b8b8b8;
}

.entryHolder a:hover {
color: #666666;
}

.entryUserinfo {
position: relative;
margin: -57px 5px 0 4px;
text-align: center;
padding: 0 2px 5px 10px;
background-color: transparent;
z-index: 10;
float: right;
}

.entryUserinfo a {
color: #b8b8b8;
padding: 0 3px 3px 0;
}

.entryUserinfo a:hover {
color: #666666;
}

.entryUserinfo-usericon img {
padding: 8px;
margin: 0 0 2px 0;
border: 1px solid #e0e0e0;
background: #ffffff;
}

.entryUserinfo-usericon img:hover {
opacity: 0.9;
}

.entryHeader {
padding: 0px 15px 4px 15px;
margin: 0;
text-align: left;
text-transform: uppercase;
}

.entryHeader a {
color: #b8b8b8;
}

.entryHeader a:hover {
color: #666666;
}

.entryHeaderDate {
padding: 0;
text-align: left;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
color: #b8b8b8;
}

.entryHeaderDate a {
color: #bfbfbf;
text-decoration : none;
}

.entryHeaderDate a:hover {
color : #bfbfbf;
text-decoration : none;
}

.entryHeaderSubject {
display: block;
margin: 4px 0 0 0;
padding: 4px 130px 4px 0;
border-top: 1px solid #e0e0e0;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 20px;
color: #666666;
text-transform: none;
}

.entryHeaderTags {
font-size: 9px;
font-weight: normal;
}

.entryText {
position: relative;
padding: 19px 15px 15px 20px;
margin: 0;
text-align: justify;
}

.entryText img {
max-width: ;
}

.entryMetadata {
margin: 0 !important;
}

.entryMetadata ul {
margin: 0 0 15px 35px;
padding: 0 15px 0 8px;
text-transform: lowercase;
font-weight: normal;
font-size: 10px;
}

.entryMetadata li {
list-style: none;
display: block;
padding: 0;
}

.entryMetadata a {
}

.entryMetadata a:hover {
}

.entryMetadata-label {
letter-spacing: 1px;
padding: 0 3px 0 0px;
}

.entryLinkbar {
display: inline;
}

.entryLinkbar ul {
margin: 0 12px;
padding: 2px 0;
text-align: center;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}

.entryLinkbar li {
display: inline;
}

.entryLinkbar a {
font-weight: normal;
font-size: 10px;
padding: 4px 6px;
text-transform: uppercase;
letter-spacing: 1px;
color: #666666 !important;
}

.entryLinkbar a:hover {
color: #b8b8b8 !important;
}

/*-----------------------------------------
-------------- ARCHIVE PAGES --------------
-------------------------------------------*/

.yearlinks{
text-align: right;
}

.yearlink{
padding-left:4px;
padding-right: 4px;
}

.month {
border: 1px solid #e0e0e0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
width: 500px;
}

.daysubjects {
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
border: 1px solid #e0e0e0;
background: #f2f2f2;
font-weight: bold;
}

.day-blank, .day {
border: 1px solid #e0e0e0;
}

.day-date {
width: 50%;
text-align: center;
}

.day-count {
width: 50%;
text-align: center;
float: right;
}

.day-count a {
text-decoration: none;
color: #b8b8b8;
}

.day-count a:hover {
color: #666666;
}

/*----------------------------------
-------------- FOOTER --------------
------------------------------------*/

#footer-menu {
background-color: transparent;
margin: 0;
position: relative;
bottom: 0;
}

#footer-menu ul {
list-style: none;
text-align: center;
padding: 6px 0;
margin: 0 0 15px 200px;
background-color: #f8f8f8;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}

.footer-menu li {
display: inline;
padding: 0px;
margin: 0px;
}

#footer-menu a, .footer-menu a:visited {
position: relative;
white-space: nowrap;
padding: 5px 8px;
display: inline;
font-weight: normal;
font-size: 10px;
color: #b8b8b8 !important;
text-transform: uppercase;
}

#footer-menu a:hover {
color: #666666 !important;
}

/*-----------------------------------------
-------------- COMMENT PAGES --------------
------------------------------------------*/

.commentHolder {
padding: 4px;
margin: 1px 0 1px 200px;
background: #ffffff;
}

.commentHolder a {
color: #b8b8b8;
}

.commentHolder a:hover {
color: #666666;
}

.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: transparent;
}

.commentUserinfo a {
color: #b8b8b8;
}

.commentUserinfo a:hover {
color: #666666;
}

.commentUserinfo-usericon img {
background-color: transparent !important;
padding: 0px;
margin: 3px;
border: 1px solid #ffffff;
}

.commentText {
padding: 6px;
text-align: justify;
}

.commentHeader {
background-color: transparent;
color: #666666;
padding: 4px 0px 8px 8px;
font-size: 12px;
letter-spacing: -1px;
text-transform: lowercase;
}

.commentHeader a {
color: #848484;
}

.commentHeaderScreened {
padding: 4px 0px 4px 8px;
}

.commentHeaderSubject {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
color: #b8b8b8;
}

.commentLinkbar {
font-size: 11px;
text-transform: lowercase;
color: #848484;
text-align: right;
padding: 2px 0 0 0;
}

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

.commentLinkbar li {
padding: 0px 5px;
margin: 0px;
display: inline;
}

.replyform {
background-color: #ffffff;
padding: 6px;
margin: 0;
width: 608px;
float: right;
}

.replyform a {
color: #b8b8b8 !important;
}

.replyform a:hover {
color: #666666 !important;
}

.replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea {
background-color: #ffffff;
color: #848484 !important;
padding: 1px;
border: 1px solid #e0e0e0 !important;
}

#qrform {
background-color: #ffffff;
padding: 6px;
margin: 0;
max-width: 608px;
}

#qrform table #submitpost, #qrform table #submitmoreopts {
background-color: #ffffff !important;
color: #848484;
font-size: 11px;
}

#commenttext{
width: 90%;
background-color: #ffffff;
}

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

.tagstable {
width: 500px;
margin-bottom: 20px;
text-align: left;
}

.tagstable td {
border-bottom: 1px solid #e0e0e0;
}

/*--------------------------------
-------------- MISC --------------
----------------------------------*/

input, textarea {
background-color: #ffffff;
border: 1px solid #e0e0e0 !important;
color: #848484 !important;
font-family: "Arial", sans-serif;
font-size: 11px;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif'); /*paste the url of your ljuser tiny icon here*/
padding: 12px 11px 1px 0px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif') !important; /*paste the url of your ljuser tiny icon here*/
padding: 11px 12px 1x 0px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://img291.imageshack.us/img291/9130/mcrljcommqx7.gif') !important; /*paste the url of your ljcomm tiny icon here*/
padding: 13px 11px 0px 0px !important;
}

div.ContextualPopup {
font: normal 11px "Arial", sans-serif, !important;
}

div.ContextualPopup img {
border: 0px solid #e0e0e0;
}

div.ContextualPopup div.Inner {
background-color: #ffffff !important;
color: #848484 !important;
border: 1px solid #e0e0e0;
padding: 3px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #b8b8b8 !important;
}

div.ContextualPopup div.Inner a:hover {
color: #666666 !important;
}

#lj_controlstrip {
z-index: 10 !important;
}

#lj_controlstrip table {
background-color: #3b3b3b !important;
margin: 0;
padding: 0;
width: auto;
z-index: 2;
}

#lj_controlstrip td {
background-color: #3b3b3b !important;
font-family: tahoma;
color: #8e8e8e;
border-bottom: 0px solid #313131 !important;
}

#lj_controlstrip a {
color: #999999 !important;
font-family: tahoma; font-size: 9px;
text-transform: lowercase;
}

#lj_controlstrip a:hover {
color: #b2b2b2 !important;
text-decoration: none;
}

#lj_controlstrip a img, #lj_controlstrip form {
padding: 0;
margin: 0;
border: 0;
background-repeat: no-repeat !important;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
font-family: tahoma;
font-size: 9px;
background-color: #3b3b3b !important;
color: #929292;
padding: 0;
margin: 0;
border: 1px solid #505050 !important;
}

#lj_controlstrip_userpic, #lj_controlstrip_userpic img {
display: none;
}

#lj_controlstrip_statustext {
font-size: 9px;
color: #929292 !important;
font-weight: normal;
letter-spacing: 1px;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
border: 0;
}

/*------------------------------------*/

DARK

/*-----------------------------------------------
------- DO NOT REMOVE, PLEASE -------
- overrides by allwashedout @ lj.com -
- style: s2 smooth sailing -
- works with Firefox and IE -
- best viewed in 1024*768 or higher resolution -
-------------------------------------------------*/

/*----------------------------------
-------------- BASICS --------------
------------------------------------*/

body {
margin: 0 !important;
font-family: "Arial", sans-serif;
font-size: 11px;
background-color: #282828;
color: #848484;
line-height: 18px;
}

a {
color: #282828;
text-decoration: none;
}

a:visited {
color: #;
}

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

.ljuser a {
color: #666666 !important;
text-transform: uppercase !important;
}

.ljuser a:hover {
color: #b8b8b8 !important;
}

.pageblock {
position: relative;
width: 820px;
margin-left: auto;
margin-right: auto;
}

blockquote {
margin: 5px 22x;
padding: 4px 10px;
border: 1px solid #4a4a4a;
}

.bodyblock {
margin: 0;
padding: 0;
}

.bodyheaderblock {
border-top: 0px solid #323232;
background-color: transparent;
}

.bodynavblock {
text-align: center;
background-color: transparent;
padding: 0;
margin: 15px 0 20px 200px;
}

.bodynavblock ul {
padding: 0;
margin: 0;
position: relative;
z-index: 15 !important;
}

.bodynavblock li {
display: inline;
padding: 0px;
}

.bodynavblock a, .bodynavblock a:visited {
padding: 4px;
text-align: center;
font-weight: normal !important;
color: #b8b8b8;
}

.bodynavblock a:hover {
color: #666666;
}

.body-title, .body-midtitle, .pagefooterblock {
display: none;
}

/*-----------------------------------
--------------- HEADER --------------
------------------------------------*/

.pageheaderblock {
text-align: left;
margin: 0 0 0 200px;
background: #323232;
padding-bottom: 280px;
background-image: url('HEADERURL'); /*paste your header's url here*/
background-repeat: no-repeat;
background-position: bottom center;
}

.header-icon {
display: none;
}

.header-title {
margin: 0;
padding: 15px 15px 5px 15px;
font-size: 19px;
color: #666666;
letter-spacing: 1px;
font-family: "Lucida Sans Unicode", sans-serif;
background: #323232;
text-align: right;
}

.header-subtitle {
margin: 0;
padding: 0 15px 15px 15px;
font-size: 13px;
color: #b8b8b8;
letter-spacing: 1px;
text-align: right;
background: #323232;
}

.header-menu {
margin: 0px;
text-align: center;
background-color: transparent;
}

.header-menu ul {
padding: 5px 0;
margin: 0;
background-color: #2c2c2c;
border-top: 1px solid #4a4a4a;
border-bottom: 1px solid #4a4a4a;
}

.header-menu li {
display: inline;
background-color: transparent;
}

.header-menu a, .header-menu a:visited {
padding: 5px 7px;
text-decoration: none;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
color: #b8b8b8;
}

.header-menu a:hover {
color: #666666;
}

/*-----------------------------------
-------------- SIDEBAR --------------
-------------------------------------*/

.sidebar {
position: absolute;
top: 30px;
background-color: #282828;
left: 0;
width: 180px;
padding: 0 10px;
text-align: left;
font-size: 10px;
line-height: 17px;
color: #999999;
}

.sidebox {
position: relative;
padding: 10px 5px;
}

.sideboxTitle {
padding: 3px 0;
margin: 0 0 4px 0;
font-family: "Lucida Sans Unicode", sans-serif;
text-transform: lowercase;
font-weight: normal;
text-align: center;
font-size: 15px;
color: #b8b8b8;
border-top: 1px solid #424242;
border-bottom: 1px solid #424242;
}

.sideboxContent {
text-align: left;
}

.sideboxContent a {
color: #666666;
}

.sideboxContent a:hover {
color: #b8b8b8;
}

.sidebox #profile {
text-align: center;
}

.sidebox #freetext {
text-align: justify;
padding: 0 5px 0 0;
}

.sidebox #search {
padding-top: 5px;
margin-left: 11px;
}

.sidebox #search select, .sidebox #search input {
font-size: 11px;
background-color: #282828 !important;
color: #999999;
padding: 0;
margin: 1px;
border: 1px solid #424242 !important;
}

.sidebox #tags_sidebox {
text-align: left;
padding: 0;
line-height: 0px;
font-size: 0px;
}

.sidebox #tags_sidebox a {
display: block;
font-size: 10px;
color: #666666;
line-height: 17px;
padding: 1px 2px 1px 15px;
border-bottom: 1px solid #424242;
}

.sidebox #tags_sidebox a:hover {
color: #b8b8b8;
background: #2d2d2d;
}

.sidebox #systemlinks {
text-align: left;
display: inline;
}

.sidebox #latestmonth {
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 2px;
}

.sidebox #latestmonth a {
font-weight: bold;

margin-bottom: 5px;
}

.profile-label {
display: none;
}

.profile-userpic {
margin: 10px auto 2px auto;
padding: 7px;
background-color: #282828;
border: 1px solid #424242;
}

.profile-content {
}

.listtitle {
border-bottom: 1px solid #424242;
color: #b8b8b8;
text-transform: uppercase;
padding: 1px 0;
margin: 1px 0;
text-align: center;
letter-spacing: 2px;
}

.listitem {
padding: 0;
margin: 0;
}

.listitem ul {
padding: 0;
margin: 0 5px 0 0;
list-style-type: disc !important;
}

.listitem li {
display: block;
}

.listitem a {
padding: 1px 2px 1px 15px;
margin: 0 0 1px 0;
display: block;
text-transform: lowercase;
color: #666666;
border-bottom: 1px solid #424242;
}

.listitem a:hover {
color: #b8b8b8;
background-color: #2d2d2d !important;
}

.sidebox #latestmonth table{
padding: 0px;
margin-left: auto;
margin-right: auto;
}

.latestmonth-active {
padding: 2px 4px;
margin: 1px;
letter-spacing: 0px;
background: #2d2d2d;
}

.latestmonth-active a {
color: #b8b8b8;
font-weight: bold;
}

.latestmonth-active a:hover {
color: #666666;
}

.latestmonth-inactive {
padding: 2px 4px;
margin: 1px;
letter-spacing: 0px;
}

.summaryList {
padding: 1px 2px 1px 15px;
border-bottom: 1px solid #424242;
}

/*-----------------------------------
-------------- ENTRIES --------------
-------------------------------------*/

.entryHolder {
padding: 30px 0;
margin: 0 0 0 200px;
background-color: #323232;
}

.entryHolder a {
color: #b8b8b8;
}

.entryHolder a:hover {
color: #666666;
}

.entryUserinfo {
position: relative;
margin: -57px 5px 0 4px;
text-align: center;
padding: 0 2px 5px 10px;
background-color: transparent;
z-index: 10;
float: right;
}

.entryUserinfo a {
color: #b8b8b8;
padding: 0 3px 3px 0;
}

.entryUserinfo a:hover {
color: #666666;
}

.entryUserinfo-usericon img {
padding: 8px;
margin: 0 0 2px 0;
border: 1px solid #4a4a4a;
background: #323232;
}

.entryUserinfo-usericon img:hover {
opacity: 0.8;
}

.entryHeader {
padding: 0px 15px 4px 15px;
margin: 0;
text-align: left;
text-transform: uppercase;
}

.entryHeader a {
color: #b8b8b8;
}

.entryHeader a:hover {
color: #666666;
}

.entryHeaderDate {
padding: 0;
text-align: left;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
color: #b8b8b8;
}

.entryHeaderDate a {
color: #bfbfbf;
text-decoration : none;
}

.entryHeaderDate a:hover {
color : #bfbfbf;
text-decoration : none;
}

.entryHeaderSubject {
display: block;
margin: 4px 0 0 0;
padding: 4px 130px 4px 0;
border-top: 1px solid #4a4a4a;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 18px;
font-weight: normal;
line-height: 20px;
color: #666666;
text-transform: none;
}

.entryHeaderTags {
font-size: 9px;
font-weight: normal;
}

.entryText {
position: relative;
padding: 19px 15px 15px 20px;
margin: 0;
text-align: justify;
}

.entryText img {
max-width: ;
}

.entryMetadata {
margin: 0 !important;
}

.entryMetadata ul {
margin: 0 0 15px 35px;
padding: 0 15px 0 8px;
text-transform: lowercase;
font-weight: normal;
font-size: 10px;
}

.entryMetadata li {
list-style: none;
display: block;
padding: 0;
}

.entryMetadata a {
}

.entryMetadata a:hover {
}

.entryMetadata-label {
letter-spacing: 1px;
padding: 0 3px 0 0px;
}

.entryLinkbar {
display: inline;
}

.entryLinkbar ul {
margin: 0 12px;
padding: 2px 0;
text-align: center;
border-top: 1px solid #4a4a4a;
border-bottom: 1px solid #4a4a4a;
}

.entryLinkbar li {
display: inline;
}

.entryLinkbar a {
font-weight: normal;
font-size: 10px;
padding: 4px 6px;
text-transform: uppercase;
letter-spacing: 1px;
color: #666666 !important;
}

.entryLinkbar a:hover {
background: #2e2e2e;
color: #b8b8b8 !important;
}

/*-----------------------------------------
-------------- ARCHIVE PAGES --------------
-------------------------------------------*/

.yearlinks{
text-align: right;
}

.yearlink{
padding-left:4px;
padding-right: 4px;
}

.month {
border: 1px solid #4a4a4a;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
width: 500px;
}

.daysubjects {
padding: 8px 8px 8px 40px;
}

.daytitles {
text-align: center;
border: 1px solid #4a4a4a;
background: #282828;
font-weight: bold;
}

.day-blank, .day {
border: 1px solid #4a4a4a;
}

.day-date {
width: 50%;
text-align: center;
}

.day-count {
width: 50%;
text-align: center;
float: right;
}

.day-count a {
text-decoration: none;
color: #b8b8b8;
}

.day-count a:hover {
color: #666666;
}

/*----------------------------------
-------------- FOOTER --------------
------------------------------------*/

#footer-menu {
background-color: transparent;
margin: 0;
position: relative;
bottom: 0;
}

#footer-menu ul {
list-style: none;
text-align: center;
padding: 6px 0;
margin: 0 0 15px 200px;
background-color: #2c2c2c;
border-top: 1px solid #4a4a4a;
border-bottom: 1px solid #4a4a4a;
}

.footer-menu li {
display: inline;
padding: 0px;
margin: 0px;
}

#footer-menu a, .footer-menu a:visited {
position: relative;
white-space: nowrap;
padding: 5px 8px;
display: inline;
font-weight: normal;
font-size: 10px;
color: #b8b8b8 !important;
text-transform: uppercase;
}

#footer-menu a:hover {
color: #666666 !important;
}

/*-----------------------------------------
-------------- COMMENT PAGES --------------
------------------------------------------*/

.commentHolder {
padding: 4px;
margin: 1px 0 1px 200px;
background: #323232;
}

.commentHolder a {
color: #b8b8b8;
}

.commentHolder a:hover {
color: #666666;
}

.commentUserinfo {
text-align: center;
margin: 0px 8px 8px 0px;
background-color: transparent;
}

.commentUserinfo a {
color: #b8b8b8;
}

.commentUserinfo a:hover {
color: #666666;
}

.commentUserinfo-usericon img {
background-color: transparent !important;
padding: 0px;
margin: 3px;
border: 1px solid #323232;
}

.commentText {
padding: 6px;
text-align: justify;
}

.commentHeader {
background-color: transparent;
color: #666666;
padding: 4px 0px 8px 8px;
font-size: 12px;
letter-spacing: -1px;
text-transform: lowercase;
}

.commentHeader a {
color: #848484;
}

.commentHeaderScreened {
padding: 4px 0px 4px 8px;
}

.commentHeaderSubject {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0px;
color: #b8b8b8;
}

.commentLinkbar {
font-size: 11px;
text-transform: lowercase;
color: #848484;
text-align: right;
padding: 2px 0 0 0;
}

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

.commentLinkbar li {
padding: 0px 5px;
margin: 0px;
display: inline;
}

.replyform {
background-color: #323232;
padding: 6px;
margin: 0;
width: 608px;
float: right;
}

.replyform a {
color: #b8b8b8 !important;
}

.replyform a:hover {
color: #666666 !important;
}

.replyform input, .replyform textarea, .replyform select, #qrform table, #qrform table input, #qrform table select, #qrform table textarea {
background-color: #323232;
color: #848484 !important;
padding: 1px;
border: 1px solid #4a4a4a !important;
}

#qrform {
background-color: #323232;
padding: 6px;
margin: 0;
max-width: 608px;
}

#qrform table #submitpost, #qrform table #submitmoreopts {
background-color: #323232 !important;
color: #848484;
font-size: 11px;
}

#commenttext{
width: 90%;
background-color: #323232;
}

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

.tagstable {
width: 500px;
margin-bottom: 20px;
text-align: left;
}

.tagstable td {
border-bottom: 1px solid #4a4a4a;
}

/*--------------------------------
-------------- MISC --------------
----------------------------------*/

input, textarea {
background-color: #323232;
border: 1px solid #4a4a4a !important;
color: #848484 !important;
font-family: "Arial", sans-serif;
font-size: 11px;
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif'); /*paste the url of your ljuser tiny icon here*/
padding: 12px 11px 1px 0px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://img507.imageshack.us/img507/8540/mcrljuserja8.gif') !important; /*paste the url of your ljuser tiny icon here*/
padding: 11px 12px 1x 0px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url('http://img291.imageshack.us/img291/9130/mcrljcommqx7.gif') !important; /*paste the url of your ljcomm tiny icon here*/
padding: 13px 11px 0px 0px !important;
}

div.ContextualPopup {
font: normal 11px "Arial", sans-serif, !important;
}

div.ContextualPopup img {
border: 0px solid #4a4a4a;
}

div.ContextualPopup div.Inner {
background-color: #323232 !important;
color: #848484 !important;
border: 1px solid #4a4a4a;
padding: 3px;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
text-decoration: none !important;
font-weight: normal;
color: #b8b8b8 !important;
}

div.ContextualPopup div.Inner a:hover {
color: #666666 !important;
}

#lj_controlstrip {
z-index: 10 !important;
}

#lj_controlstrip table {
background-color: #2c2c2c !important;
margin: 0;
padding: 0;
width: auto;
z-index: 2;
}

#lj_controlstrip td {
background-color: #2c2c2c !important;
font-family: tahoma;
color: #8e8e8e;
border-bottom: 1px solid #3a3a3a !important;
}

#lj_controlstrip a {
color: #686868 !important;
font-family: tahoma; font-size: 9px;
text-transform: lowercase;
}

#lj_controlstrip a:hover {
color: #b2b2b2 !important;
text-decoration: none;
}

#lj_controlstrip a img, #lj_controlstrip form {
padding: 0;
margin: 0;
border: 0;
background-repeat: no-repeat !important;
}

#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember, #lj_controlstrip input {
font-family: tahoma;
font-size: 9px;
background-color: #2c2c2c !important;
color: #888888;
padding: 0;
margin: 0;
border: 1px solid #3a3a3a !important;
}

#lj_controlstrip_userpic, #lj_controlstrip_userpic img {
display: none;
}

#lj_controlstrip_statustext {
font-size: 9px;
color: #929292 !important;
font-weight: normal;
letter-spacing: 1px;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks, #lj_controlstrip_search {
border: 0;
}

/*------------------------------------*/

THE HEADERS

Choose one and paste its url under .pageheaderblock. Also, upload them to your own server, please. All photos are by Ryan Russell. (I'm still bad at making graphics, so feel free to use these as bases, add brushes, text, your username etc. to them.)









































NOTES

1. Adding your own header: if you'd like to make your own header, the base codes are fit for 620px*280px ones. If you're gonna use a taller header than 280px, edit HEADER - .pageheaderblock - "padding-bottom: 280px;" with the height of your header. If you want to use a pic which is wider than 620px, note how many pixels wider your header graphic is, and add this number to BASICS - .pageblock - "width: 820px;".

2. Hiding the sidebar: if you don't want a sidebar, find SIDEBAR - .sidebar and write "display: none;" after the bracket. After that replace every "820px" with "620px" and every "200px" with "0" in your text editor.

3. Other color schemes: These layouts are based on really simple color schemes. The easiest way to add some color to them is to replace "#b8b8b8" (the color of the links, sidebox titles, listtitles, entry dates) and "#666666" (the color of the entry subjects, entry links, lj usernames, sidebar links) with your chosen colors hex codes. For example:

Light - blue: #666666 -> #3db5d8 and #b8b8b8 -> #98d4e6
Light - orange/blue: #666666 -> #f28339 and #b8b8b8 -> #5bd0de
Light - green/red: #666666 -> #79BE00 and #b8b8b8 -> #ED6D4A

Dark - blue: #666666 -> #237484 and #b8b8b8 -> #01a9bf
Dark - yellow: #666666 -> #796735 and #b8b8b8 -> #c99013
Dark - green: #666666 -> #626a10 and #b8b8b8 -> #889500

4. I used tiny icons. They are now hosted at imageshack. If the link is broken, upload these to your own server: lj user tiny icon, lj comm tiny icon. You'll find their places under MISC (.ljuser img).

Feel free to edit the codes to your liking, if you don't know how to change something, just ask and I'll gladly help, please credit me (!). Enjoy! :)

smooth sailing, layouts, public

Previous post Next post
Up
[]