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

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

From:

alexandra

no subject

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

alyse

Thank you! I'm currently trying to use it on my account.

If you need help with this, feel free to ask.

I'm glad you said that. For some reason, I can't get the header image to work on my account, although I can see that other people have managed.

The code I'm using is this:

#header {background: url(http://www.alyse.info/images/dwheader-connorabby3x02.jpg) center center no-repeat; padding: HEIGHT448px 0 0 0; margin: 373px 0 0 0;}

I've pasted that, as instructed, into the 'PAGE' section, and I've tried it with and without ' around the url, to no avail, and with a space between height 448px and without the space, and again no difference. I've checked that my hosting package doesn't prevent hotlinking of images, (I manage to link to icons I've made with no problems) and I've also tried to use this image:

http://pics.livejournal.com/alyse/pic/000gpe4t

I'm probably missing something really obvious, that I'm going to kick myself for not spotting ::g::, but do you have any ideas where I can be going wrong? The only other change I've made so far is to remove the italics property from links?

Thank you in advance :)

Edited Date: 2009-05-05 08:09 pm (UTC)

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

You've left the HEIGHT in before the padding, and also you've altered the margin, it needs to stay -30px.

:)

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

Thank you! I knew it would be something simple - I was trying to define the height separately, because that's what I'm used to.

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

heh, yeah, I do things like that too. ;) I'm glad it's working now.

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

no subject

Profile

April 2010

Links

Most Popular Tags

Page Summary

Expand Cut Tags