<html><head><title>CSS Styles - Natural Docs</title><link rel=stylesheet type="text/css" href="styles.css"><style type="text/css"><!--
.StyleTable {
margin: 1em 5ex 0 5ex }
.StyleTable td {
padding-bottom: .5em}
.StyleName {
font: bold 12pt Georgia, serif;
}
.StyleView,
.StyleDownload
{
padding-left: 3ex;
}
.StyleDescription {
width: 100%;
padding-left: 3ex }
.StyleView,
.StyleDownload,
.StyleDescription {
padding-top: 1px;
}
.IE .StyleView,
.IE .StyleDownload,
.IE .StyleDescription {
padding-top: 0;
}
--></style><script language=JavaScript src="javascript/PNGHandling.js"></script><script language=JavaScript src="javascript/BrowserStyles.js"></script></head><body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0><script language=JavaScript><!--
OpeningBrowserTags();// --></script>
<!-- saved from url=(0026)http://www.naturaldocs.org -->
<table width=100% border=0 cellspacing=0 cellpadding=0 class=PageTable float=center><tr><td colspan=3 class=Header><table width=100% border=0 cellspacing=0 cellpadding=0><tr><td><img src="images/header/leftside.png" width=30 height=75><a href="index.html"><img src="images/header/logo.png" width=524 height=75 alt="Natural Docs"></a></td><td align=right><img src="images/header/rightside.png" width=30 height=75></td></tr></table></td></tr><tr><td><img src="images/header/overleftmargin.png" width=10 height=6></td><td class=SideMenuTop><img src="images/header/overmenu.png" width=14 height=6></td><td class=BodyTop><img src="images/header/overbody.png" width=24 height=6></td></tr><tr><td></td><td class=SideMenu nowrap><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/about.png" width=52 height=13 alt="About"></div><div class=SideMenuBody><a href="languages.html" class=SideMenuEntry>Language Support</a><a href="output.html" class=SideMenuEntry>Output Formats</a></div></div><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/using.png" width=45 height=13 alt="Using"></div><div class=SideMenuBody><a href="documenting.html" class=SideMenuEntry>Documenting<br>Your Code</a><a href="keywords.html" class=SideMenuEntry>Keywords</a><a href="running.html" class=SideMenuEntry>Running</a><a href="troubleshooting.html" class=SideMenuEntry>Troubleshooting</a></div></div><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/customizing.png" width=96 height=13 alt="Customizing"></div><div class=SideMenuBody><a href="menu.html" class=SideMenuEntry>Organizing the Menu</a><span class=SideMenuEntry id=SelectedSideMenuEntry>CSS Styles</span><a href="customizingtopics.html" class=SideMenuEntry>Topics and Keywords</a><a href="customizinglanguages.html" class=SideMenuEntry>Languages, Indexes,<br>and Prototypes</a></div></div><div class=SideMenuSection><div class=SideMenuTitle><img src="images/menu/community.png" width=86 height=13 alt="Community"></div><div class=SideMenuBody><a href="http://www.naturaldocs.org/" class=SideMenuEntry>Web Site</a><a href="http://www.naturaldocs.org/mailinglist.html" class=SideMenuEntry>Mailing Lists</a><a href="http://www.naturaldocs.org/messageboards.html" class=SideMenuEntry>Message Boards</a><a href="http://www.naturaldocs.org/bugs.html" class=SideMenuEntry>Bugs and<br>Feature Requests</a></div></div></td><td class=Body width=100%><div class=PageTitle>CSS Styles</div><div class=TOC><a href="#DefaultStyles">Default Styles</a> · <a href="#Customizing">Customizing</a> · <a href="#CommonCustomizations">Common Customizations</a></div><div class=Topic><a name="DefaultStyles"></a><div class=TopicTitle>Default Styles</div><p>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.</p><p>You choose which style you want for your project by adding “<code>-s <i>[style name]</i></code>” to the command line.</p><table width=100% border=0 cellspacing=0 cellpadding=0 class=StyleTable><tr><td class=StyleName>Default</td><td class=StyleDescription>This is the default style that Natural Docs uses. Most of the text is 10pt Verdana.</td></tr><tr><td class=StyleName>Small</td><td class=StyleDescription>Smaller 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.</td></tr><tr><td class=StyleName>Roman</td><td class=StyleDescription>Serif 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.</td></tr></table></div><div class=Topic><a name="Customizing"></a><div class=TopicTitle>Customizing</div><p>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 <code>-p</code>) or if you plan on sharing it between many projects, in Natural Docs’ Styles directory.</p><p>To use a custom file, no matter where you put it, you just use it with <code>-s</code> without the CSS extension. So if you made Red.css, you use “<code>-s Red</code>”. If you made a touch-up file instead, you use it after one of the default styles, such as with “<code>-s Default Red</code>”. 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.</p><p>The <a href="http://www.naturaldocs.org/documentation/html/files/Info/CSSGuide-txt.html">CSS Guide</a> documents the page structure and CSS styles of Natural Docs’ output. Always remember to check its <a href="http://www.naturaldocs.org/documentation/html/files/Info/CSSGuide-txt.html#Revisions">revisions section</a> every time you upgrade Natural Docs because it may change between releases.</p></div><div class=Topic><a name="CommonCustomizations"></a><div class=TopicTitle>Common Customizations</div><a name="WebStyleParagraphs"></a><div class="SubTopic First">Web-Style Paragraphs</div><p>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><pre class=Example>p {
text-indent: 0;
margin-bottom: 1em;
}
</pre><a name="PrototypeColors"></a><div class="SubTopic">Prototype Colors</div><p>If you’ve <a href="customizingtopics.html#AddingTopicTypes">added a custom topic type</a> and have it <a href="customizinglanguages.html#Prototypes">finding prototypes for you</a>, you may want to have them appear in a different color than the default black and white. Add this to your custom CSS file:</p><pre class=Example>.C<i>[type]</i> .Prototype {
background-color: <i>[color]</i>;
border-color: <i>[color]</i>;
}
</pre><p>Replace <code><i>[type]</i></code> 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 “<code>.CSoundEffect .Prototype</code>”.</p></div></td></tr><tr><td></td><td class=SideMenuBottom><table width=100% border=0 cellspacing=0 cellpadding=0><tr><td class=SideMenuBottomLeft><img src="images/menu/bottomleft.png" width=18 height=19></td><td class=SideMenuBottomRight><img src="images/menu/bottomright.png" width=18 height=19></td></tr></table></td><td class=BodyBottom>Copyright © 2003-2010 Greg Valure</td></tr></table><script language=JavaScript><!--
ClosingBrowserTags();// --></script></body></html>
