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. ;)

Date: 2009-05-05 07:32 pm (UTC)

From:

chainer_morgana

no subject

Thanks a lot, I love it!
I'll change colors and add an header ;) and obviously I'll credit you!! Thank you again!!

Date: 2009-05-05 07:59 pm (UTC)

alexandra

I'm glad you like. :)

(no subject)

alyse - Date: 2009-05-05 08:08 pm (UTC) - Expand

alexandra - Date: 2009-05-05 08:13 pm (UTC) - Expand

alyse - Date: 2009-05-05 08:38 pm (UTC) - Expand

alexandra - Date: 2009-05-05 08:39 pm (UTC) - Expand

Date: 2009-05-05 08:31 pm (UTC)

saystheheart

This layout is lovely and I'm totally using it.

One thing, the tags are showing up as a bulleted list on my journal and not in the neat little boxes.

Date: 2009-05-05 08:35 pm (UTC)

Thank you! :)

Um, you don't actually have all the code for some reason, it's cut off quite a bit before the end. Try and c&p again, the code isn't long enough for DW to cut it off.

saystheheart - Date: 2009-05-05 08:38 pm (UTC) - Expand

alexandra - Date: 2009-05-05 08:40 pm (UTC) - Expand

Date: 2009-05-05 10:08 pm (UTC)

bleu4bleu

This is gorgeous. Will definitely be using. And thanks for the information on how to add a header! I never know how to do that. :D

Date: 2009-05-05 10:09 pm (UTC)

Thanks!

I thought it might be useful. ;)

bleu4bleu - Date: 2009-05-06 07:54 pm (UTC) - Expand

bleu4bleu - Date: 2009-05-06 07:56 pm (UTC) - Expand

alexandra - Date: 2009-05-06 07:58 pm (UTC) - Expand

Date: 2009-05-05 11:51 pm (UTC)

nanceoir

Thanks for this layout; it's quite nice and pretty easily adaptable. Now, to make a default icon that matches it a bit better. :)

Date: 2009-05-05 11:52 pm (UTC)

Thank you. :)

Date: 2009-05-06 12:51 am (UTC)

mahoni

This is really cool! Credited you in my profile.

Date: 2009-05-06 02:18 am (UTC)

Thank you! :)

mahoni - Date: 2009-05-07 05:24 pm (UTC) - Expand

alexandra - Date: 2009-05-07 09:18 pm (UTC) - Expand

mahoni - Date: 2009-05-07 09:39 pm (UTC) - Expand

alexandra - Date: 2009-05-07 09:50 pm (UTC) - Expand

mahoni - Date: 2009-05-07 09:55 pm (UTC) - Expand

alexandra - Date: 2009-05-07 10:06 pm (UTC) - Expand

Date: 2009-05-06 04:21 pm (UTC)

ours

I like this!
going to use it.
Is it possible to add a bg img? (more specifically where?)

Date: 2009-05-06 05:23 pm (UTC)

Thanks. :)

Yep, it would go under html body, right at the top of the CSS. Replace the background: #4D4A6A; with this:

background: url(URL) repeat #4D4A6A;

ours - Date: 2009-05-06 05:32 pm (UTC) - Expand

alexandra - Date: 2009-05-06 05:33 pm (UTC) - Expand

Links

Page Summary

Expand Cut Tags