Image header + Menu color

[Chris]

Could anyone show me the CSS needed to put an image header on each page? I know this isn't directly support, but someone on these forums made reference to putting it in the CSS file body section.

my top line is:

body {
font: 12px Arial, Tahoma, sans-serif;
color: #333;
margin: 0;
padding: 0;
background: #222 url('tempest.jpg') no-repeat top right;
}

but i'm not sure where the .jpg should be...

As well, how can one change the menu color, to black for example?

CHeers
Chris

[Greg Valure]

Are you using 1.35 or the development releases? Framed or unframed HTML? The generated HTML and CSS structure is a bit different between them.

In all cases the image is probably working, but the page content is covering it up. For 1.35 with unframed HTML, try adding:

.ContentSection,
.IndexSection {
padding-top: 40px;
}

or however many pixels high the image is. For the menu background, use:

.MenuSection {
background-color: black;
}

I haven't tested these but they should work. The reference for 1.35's output is here:

http://www.naturaldocs.org/documentation/html/files/Info/CSSGuide-txt.html

If you're not sure where the .jpg should be in terms of the actual file on the disk, I believe it's a relative path from the .css file, which should be in the styles folder of your output directory.

[Chris]

The picture now works. Thanks.

Yet, thats a negatorial on the menu background color. Same color still.

As well, which tag is the one to change the main pages background color?

See this picture for what I mean:
http://img140.imageshack.us/img140/7025/backgrounddi3.jpg

Cheers

[Greg Valure]

That would be this then, assuming you're using the latest development release:

body#ContentPage,
body#IndexPage {
background-color: #000000;
}

[Chris]

Forgot to mention, unframed, 1.4dev release

[Chris]

Alright, I'm most confused now.

I've been working with the CSS from MooTools, as I really liked the style and wanted to learn/improved from/on it.

So, I decided I would removed everything but the additional stuff. SO I have:

/
This file is part of Natural Docs, which is Copyright (C) 2003-2005 Greg Valure
Natural Docs is licensed under the GPL/
body {
font: 12px Arial, Tahoma, sans-serif;
color: #222;
margin: 0;

background: #222 url('tempest.jpg') no-repeat top left;

}

.ContentSection,
.IndexSection {
padding-top: 100px;
}

/Menu/

Menu {

position: absolute;
top: 0;
left: 0;
width: 210px;
margin-top: 110px;
background-color: #222;

}

But the image is now cut off of the main index.
As well, the color above and below the menu refuses to change color, so I have this grey everywhere, much like my image 2 posts ago.

Any ideas?'
Cheers

[Greg Valure]

It looks like they're using an older version of Natural Docs, as the CSS classes have changed since then. Apply the padding to #Content and #Index instead of .ContentSection and .IndexSection.

Whatever version you're using, you can open [ND dir]/info/CSSGuide.txt to see the HTML and CSS structure. Unfortunately, it's probably going to change again for the 1.4 final release.

[Chris]

Many thanks =)