alexandra | s2 negatives; midnight land

All account levels
1024px+ FF best view, Opera, Safari, Chrome, IE [somewhat] compatible
Navbar optional
Customised comment pages, tiny icons [optional] and contextual pop-up
One main colour with shades of grey, so easy to customise

large img preview | live preview

Instructions

1. Go to Select Style and choose 'Negatives'.

2. Under Customise Selected Theme, go to Modules and select whatever you like, in any order, just make sure the modules under the sidebar section stay in the sidebar, and the header stays in the header section. Also, the calendar only works as a table. Tags work for list, cloud and multi-level.

3. For the Custom CSS section, make sure 'Use layout's stylesheet(s)' is unticked and leave the 'Use an external stylesheet' blank. Then just paste the CSS either from the box below, or your edited CSS, into the large box, and save.

This layout only uses blue and shades of grey, so if want to change the blue, the hex is #4D4A6A. Just Find&Replace in a text editor.

To add a header image, add this in the 'PAGE' section of the CSS:

#header {background: url(URL) center center no-repeat; padding: HEIGHT+45px 0 0 0; margin: -30px 0 0 0;}

And you need to take the height of the image and add about 45px to that. If you need help with this, feel free to ask.

You can either get the code here, with no site icon replacements, or download a zip with all the icons and instructions needed.

ZIP

/*---------------------------------------------------
S2 Negatives; Midnight Land
Made by alexandra.dreamwidth.org [complications_g.livejournal.com]
Icons by brandspankingnew.net
-----------------------------------------------------*/

* {font-size: 100%;}
* html .module {height: 1%;}
* html .entry {height: 1%;}
* html #primary {height: 1%;}

/*------------------------------MAIN------------------------------*/

html body { 
padding: 0; 
padding-top: 65px; 
margin: 0 auto; 
width: 60%; 
background: #4D4A6A; 
font: 0.8em Tahoma, sans-serif;
}

a, a:visited {
text-decoration: none;
font-weight: bold;
font-style: italic;
color: #4D4A6A;
outline: none;
}

a:hover, a:active {
color: #CCCCCC;
}

.ljuser a {
color: #4D4A6A !important;
font-size: 0.85em;
font-style: normal;
text-transform: uppercase;
}

blockquote {
padding: 5px;
border: 1px solid #dddddd;
background: #f4f4f4;
}

i, em {
color: #CCCCCC;
}

b, strong {
color: #4D4A6A;
}

img, img a, table {
border: 0 !important;
}

textarea {
font-family: Tahoma, sans-serif;
}

code {
font-size: 1.2em;
}

::-moz-selection {
color: #4D4A6A;
background: #f4f4f4;
}

::selection {
color: #4D4A6A;
background: #f4f4f4;
}

h2 {
color: #4D4A6A;
font-size: 1em;
text-transform: uppercase;
}

/*------------------------------PAGE------------------------------*/

#primary { 
float: left; 
width: 70%; 
padding: 10px;
margin: 0px auto; 
background: #ffffff;
border: 1px solid #dddddd;
}

#secondary {
position: relative;
float: left;
margin: 0 0 0 15px;
padding: 10px;
border: 0px;
width: 24%;
background: #ffffff;
color: #666666;
border: 1px solid #dddddd;
}

li.page-back, li.page-forward {
display: inline;
text-transform: uppercase;
}

.page-back a, .page-forward a {
color: #CCCCCC;
padding: 3px;
margin: 0 1em 0 0;
font-size: 0.8em;
font-style: normal;
border: 1px solid #dddddd;
background: #f4f4f4;
}

.page-back a:hover, .page-forward a:hover, .page-back a:active, .page-forward a:active {
color: #666666;
border: 1px solid #666666;
top: 1px;
left: 1px;
position: relative;
}

/*------------------------------MODULES------------------------------*/

#secondary a, #secondary a:visited {
color: #cccccc;
}

#secondary a:hover, #secondary a:active, #secondary a em:hover, #secondary a em:active {
color: #666666;
}

#secondary .module-header, #secondary .module-header a {
color: #4D4A6A;
text-align: left;
font: normal bold 1em tahoma, sans-serif;
text-transform: uppercase;
border-bottom: 1px solid #dddddd;
}

#secondary .module-header a {
border-bottom: 0px solid #dddddd;
}

#secondary .manage-tags-link {
text-align: center;
}

#secondary ul.module-list {
padding: 0;
margin: 0 0.5em;
list-style-type: none;
}

#secondary .module-typelist ul, #secondary .module-tags ul, #secondary .module-tags_multilevel ul {
padding-left: 5px;
}

#secondary .module-typelist a {
font-style: normal;
padding-left: 11px;
background: url(http://i448.photobucket.com/albums/qq202/fmp77/arrow_collapse.gif) left center no-repeat;
}

#secondary .module-tags_list li a, #secondary .module-tags_multilevel li a {
font-weight: normal;
font-style: normal;
padding-left: 11px;
background: url(http://i448.photobucket.com/albums/qq202/fmp77/arrow_collapse.gif) left center no-repeat;
}

#secondary .module-tags_cloud .module-list a {
font-weight: normal;
}

#secondary .manage-tags-link, #secondary .manage-tags-link a {
color: #4D4A6A;
font-size: 0.9em;
font-style: normal !important;
text-align: right;
}

#secondary .module-pagesummary li {
padding: 0.2em;
margin: 0.3em;
background: #f4f4f4;
border: 1px solid #dddddd;
}

.module {
padding: 0.5em 0 0 0;
}

.module a, .module a:visited {
padding: 3px 0;
color: #cccccc; 
}

.module ul {
list-style-position: inside;
*margin-left: 0 !important;
}

.module-section-two {
text-align: center;
padding: 0 0 5px 0;
margin: 0 0 15px 0;
background: #ffffff;
text-transform: uppercase;
border: 1px solid #dddddd;
}

.module-section-two a {
color: #4D4A6A !important;
font: normal bold 1.1em tahoma, sans-serif;
}

ul.userlite-interaction-links {
padding: 0;
text-align: center;
}

#secondary .page-back, #secondary .page-forward {
display: none;
}

.module-navlinks ul, .module-navlinks li {
font-weight: bold;
*font-size: 0.95em !important;
display: inline;
padding: 0.2em 1em;
}

#secondary .module-userprofile {
text-align: center;
}

#secondary .module-userprofile .userpic img {
padding: 10px;
border: 1px solid #dddddd !important;
background: #f4f4f4;
margin: 0 auto !important;
}

#secondary .module-userprofile .userpic a {
padding: 0;
}

#secondary .journal-name {
color: #4D4A6A;
padding: 0;
margin: 10px 0 5px 0;
font-size: 1.5em;
text-align: center;
text-transform: uppercase;
}

#secondary .journal-website-name {
margin: 10px 0 0 0;
text-align: center;
}

.module-calendar table {
text-align: center;
font-size: 0.9em;
padding: 5px;
margin: 0 auto;
}

.module-calendar table th {
font-weight: bold;
}

.module-calendar td.empty-day {
color: #cccccc;
padding: 2px;
border: 1px solid #dddddd;
}

.module-calendar td a {
color: #666666 !important;
padding: 2px;
font-style: normal;
border: 1px solid #666666;
}

.userlite-interaction-links li {
margin: 0 0.5em;
}

.userlite-interaction-links ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}

#secondary .module-content #load-time {
margin: 0.5em 0;
}

#secondary .module-content #site-branding {
font-size: 0.9em;
}

#secondary .module-content #site-branding a {
color: #4D4A6A; 
font-style: normal;
}

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

.entry .userpic, .comment .userpic {
float: right;
padding: 5px;
margin: 0 0 3px 3px;
border: 1px solid #dddddd;
background: #f4f4f4;
}

.entry {
padding: 5px;
margin: 20px 0;
background: #ffffff;
color: #666666;
}

.entry-title a {
color: #666666;
}

.entry-content {
min-height: 50px;
margin-bottom: 10px;
}

.comment {
padding: 5px;
background: #ffffff;
color: #666666;
}

.comment-content {
margin-top: 5px;
padding-top: 3px;
min-height: 30px;
border-top: 1px solid #dddddd;
}

.comment-title {
margin: 6px 0 0 0;
text-transform: uppercase;
}

.comment-title a {
color: #4D4A6A ;
font-style: normal;
}

.comment-wrapper.partial, .partial .comment { 
min-height: 0;
}

.partial .comment-title {
display: inline;
}

.comment-poster .anonymous {
font-weight: bold;
}

.comment label, .comment input.ljcomsel {
display: none;
}

.bottomcomment {
color: #666666;
margin: 10px 0 0 0;
}

.bottomcomment a {
color: #CCCCCC;
font-size: 0.8em;
text-transform: uppercase;
}

.bottomcomment .entry-management-links {
padding: 0 2px 2px 2px;
background: #f4f4f4;
border: 1px solid #dddddd;
}

.page-entry .entry .footer .entry-management-links {
padding: 3px;
background: #f4f4f4;
border: 1px solid #dddddd;
}

.bottomcomment .entry-interaction-links, .bottomcomment .entry-management-links, .page-entry .entry .footer .entry-interaction-links, .page-entry .entry .footer .entry-management-links {
display: list-item;
list-style-type: none;
text-align: center !important;
}

.bottomcomment .entry-interaction-links li a, .page-entry .entry .footer .entry-interaction-links li a {
padding: 3px;
margin: 0 0.3em;
background: #f4f4f4;
border: 1px solid #dddddd;
}

.entry-title, .userlite-interaction-links li, .comment-interaction-links li, .comment-management-links li, .entry-management-links li, .entry-interaction-links li {
display: inline;
}

.footer {
padding: 3px;
margin: 10px 0 0 0;
text-align: center;
text-transform: uppercase;
font-size: 0.8em;
background: #f4f4f4;
border: 1px solid #dddddd;
}

.footer ul, .bottomcomment ul {
*margin: 0.6em 0 !important;
*padding: 0 !important;
}

.footer a, .comment-management-links a {
color: #CCCCCC;
}

.page-entry .entry .footer {
padding: 0;
margin: 0;
background: #ffffff;
border: 0px;
}

.entry-interaction-links, .entry-management-links {
display: inline;
margin-left: 0;
padding-left: 0;
}

.entry-interaction-links a, .entry-management-links a, .comment-interaction-links a, .comment-management-links a {
font-style: normal;
padding-left: 10px;
background: url(http://i448.photobucket.com/albums/qq202/fmp77/arrow_collapse.gif) left center no-repeat;
}

.entry-interaction-links a:hover, .entry-management-links a:hover, .entry-interaction-links a:active, .entry-management-links a:active, .comment-interaction-links a:hover, .comment-management-links a:hover, .comment-interaction-links a:active, .comment-management-links a:active {
color: #666666;
}

.page-entry .entry .footer .entry-interaction-links a:hover, .page-entry .entry .footer .entry-interaction-links a:active, .bottomcomment .entry-interaction-links li a:hover, .bottomcomment .entry-interaction-links li a:active {
border: 1px solid #666666;
}

ul.comment-interaction-links {
padding: 0;
margin: 0;
}

ul.comment-management-links {
padding: 0;
margin: 0 0 4px 0;
font-size: 0.8em;
text-transform: uppercase;
}

div.datetime {
font: italic 0.9em tahoma sans-serif;
padding: 3px 0;
margin: 5px 0 10px 0;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}

div.datetime a {
color: #CCCCCC;
font-weight: normal;
}

.comment .datetime {
border-top: 0px;
}

.comment .datetime a {
color: #4D4A6A;
}

.subject, .subject a, .subject a:visited {
font-weight: bold;
font-size: 1.3em;
font-style: normal;
}

.subject a:hover, .subject a:active {
}

.entry .metadata ul {
list-style: none; 
padding: 5px 0;
*margin-left: 0 !important;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
font: 0.9em tahoma, sans-serif
}

.entry .metadata-label {
color: #dddddd;
}

.entry .metadata-label-location {
padding-left: 11px;
background: url(http://i448.photobucket.com/albums/qq202/fmp77/home.gif) left center no-repeat;
}

.entry .metadata-label-mood {
padding-left: 11px;
background: url(http://i448.photobucket.com/albums/qq202/fmp77/heart-2.gif) left center no-repeat;
}

.entry .metadata-label-music {
padding-left: 11px;
background: url(http://i448.photobucket.com/albums/qq202/fmp77/sound.gif) left center no-repeat;
}

.entry .metadata a {
color: #4D4A6A;
}

.tag ul {
color: #ffffff;
list-style: none; 
padding: 3px 3px 3px 0;
*margin-left: 0 !important;
}

.tag li {
padding: 0 !important;
display: inline;
}

span.tag-text {
display: none;
}

.tag a {
color: #dddddd;
font-size: 0.8em;
font-style: normal;
padding: 1px 2px 2px 2px;
margin: 0 0.2em 0 0;
line-height: 2em;
border: 1px solid #dddddd;
background: #f4f4f4;
}

.tag a:hover, .tag a:active {
color: #666666;
border: 1px solid #666666;
}

.comment-pages {
text-align: center;
}

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

.tags-container {
color: #666666;
font-weight: bold;
list-style-image: url(http://i448.photobucket.com/albums/qq202/fmp77/arrow_collapse.gif);
}

ul.ljtaglist a {
color: #cccccc;
font-style: normal !important;
}

ul.ljtaglist a:hover, ul.ljtaglist a:active {
color: #666666;
}

/*------------------------------ARCHIVE PAGE------------------------------*/

body.page-archive .entry ul {
list-style: none;
}

body.page-archive .entry ul li {
display: inline;
}

body.page-archive .entry table {
width: 65% !important;
}

body.page-archive .entry table th {
color: #4D4A6A;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid #dddddd;
}

body.page-archive .entry table th.comments {
color: #666666;
text-transform: none;
}

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

.entry li.active {
list-style: none;
}

.floatclear {
visibility: hidden;
clear: both;
height:0;
}

span.invis {
display: none;
}

textarea.textbox {
width: 100%;
}

q {
font-style: italic;
}

.entry h3 { 
display: inline; 
}

div.ContextualPopup div.Inner {
color: #666 !important;
border: 1px solid #ddd;
background: #fff !Important;
padding: 10px;
}

div.ContextualPopup div.Relation {
color: #4D4A6A;
text-transform: uppercase;
}

div.ContextualPopup .Userpic {
border: 1px solid #ddd;
padding: 5px;
margin-left: 3px;
background: #f4f4f4;
}

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

div.ContextualPopup div.Inner a:hover, div.ContextualPopup div.Inner a:active {
color: #4D4A6A !important;
}

#lj_controlstrip {
*width: 100% !important;
}

Feel free to edit as much as you like, but please credit me for the base codes. I've tested as much as I can but if you see any issues, please tell me! :)

Credit
Layout by

alexandra.
Icons from: Brandspankingnew.net, Pinkvoke.com, Famfamfam.com and

graphicsbyjulz.

Please Copy&Paste this into your bio in your profile:

ETA: I've has some issue/bugs with the layouts and I've had to edit the code slightly, so if you have a problem with the layout it could be because of it. You may need to just get the code fresh and then re-make any changes you've made. I'm really sorry about this! The trials of working with new styles. ;)

Flat | Top-Level Comments Only

I haven't come across that actually, what version of IE are you using? I've tested in IE7 and it should work in lower versions too.

You're not being a pest at all, I'd like to help if I can, but I'm not sure of the cause.

Hm, I've got IE7. Would it matter what version of Windows I'm using? (Vista)

What I'm seeing when I view my 'recent entries' page in IE: the top two entries are fine. The three entries at the bottom aren't clickable anywhere at all. Those three entries are tagged 'bandom fic' and when I select that tag so those are the only three entries that show, the one at the top of the page works, but the other two still don't.

And, okay, I didn't even think to check this on my reading page, but only the top entry on that page is clickable; none of the others are. WEIRD.

Maybe there's some funky setting I've got turned on somewhere or...something? I have no idea.

I really don;t think so, I tried it on Vista and XP.

I seriously have no clue what would be causing that, but are you sure it's the layout? Does it still do it another? Sorry, I just think what it could be. :\

I had one of the Dreamwidth layouts before, and that worked, so it may just be something with my computer or settings somewhere that's causing problems with this layout or something. I have no idea either! But that's okay. I still really like the layout!

Sorry about this, I'm really boggled! Thanks though. :)

s2 negatives; midnight land

no subject

no subject

no subject

no subject

no subject