Natural Docs
CSS Styles
Default Styles

These are the styles that come with Natural Docs.  They all follow the same color scheme and general layout; the choices are more so that you can choose the style of text you want.

You choose which style you want for your project by adding “-s [style name]” to the command line.

DefaultThis is the default style that Natural Docs uses.  Most of the text is 10pt Verdana.
SmallSmaller fonts than Default with most of the text using 8pt Verdana.  Some people like the small fonts because you can fit more on the screen at once.  However, some people hate them and find them hard to read.
RomanSerif fonts with most of the text using 12pt Roman.  Some people prefer Roman fonts, usually those that have decent anti-aliasing displays like Mac OS X or Windows XP with ClearType.
Customizing

There are two ways to customize the CSS files.  One is to build your own file from scratch, and the other is to make a touch-up file that gets applied after one of the default styles.  Either way you want to create your own CSS file in your project directory (the one you use with -p) or if you plan on sharing it between many projects, in Natural Docs’ Styles directory.

To use a custom file, no matter where you put it, you just use it with -s without the CSS extension.  So if you made Red.css, you use “-s Red”.  If you made a touch-up file instead, you use it after one of the default styles, such as with “-s Default Red”.  If you’re so inclined, you can string as many touch-up files together as you want or use one of your own as a base.

The CSS Guide documents the page structure and CSS styles of Natural Docs’ output.  Always remember to check its revisions section every time you upgrade Natural Docs because it may change between releases.

Common Customizations
Web-Style Paragraphs

Natural Docs defaults to print-style paragraphs like the one you are reading.  Each one is indented and there are no blank lines between them.  To switch to web-style paragraphs, which have blank lines and no indents, add this to your custom CSS file:

p {
   text-indent: 0;
   margin-bottom: 1em;
   }
Prototype Colors

If you’ve added a custom topic type and have it finding prototypes for you, you may want to have them appear in a different color than the default black and white.  Add this to your custom CSS file:

.C[type] .Prototype {
   background-color: [color];
   border-color: [color];
   }

Replace [type] with the name of your topic type, minus any symbols and spaces.  So if you added a type “Sound Effect”, you would apply the style to “.CSoundEffect .Prototype”.

Copyright © 2003-2008 Greg Valure