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 08:31 pm (UTC)

From:

saystheheart

no subject

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)

alexandra

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.

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

Huh, well that was weird. Thank you! :D

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

Welcome! :D

S	M	T	W	T	F	S
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

my blah blah blahs

s2 negatives; midnight land

no subject

no subject

no subject

no subject

Profile

April 2010

Links

Most Popular Tags

Page Summary

Expand Cut Tags