| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta name="generator" content= | |
| "HTML Tidy for Linux/x86 (vers 1st December 2004), see www.w3.org" /> | |
| <meta http-equiv="Content-Type" content= | |
| "text/html; charset=utf-8" /> | |
| <title>OpenOffice.org Web Style Guide</title> | |
| <style type="text/css"> | |
| ol { | |
| margin: 1px 5px 5px 5px; | |
| padding: 5px 5px 5px 5px; | |
| } | |
| ul { | |
| margin: 1px 5px 5px 5px; | |
| padding: 5px 5px 5px 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>OpenOffice.org Website Guide</h2> | |
| <ol><!-- 1 --> | |
| <li> | |
| <h3>Basics</h3> | |
| <ul> | |
| <li><u>Essentials</u></li> | |
| <li style="list-style: none"> | |
| <ul> | |
| <li>The default charset is UTF-8.</li> | |
| </ul> | |
| <p>The template for the basic index.html page should be enough to | |
| get you started.</p> | |
| <ul> | |
| <li><a href="index_template.html">Index Template</a></li> | |
| </ul> | |
| <p>For basic color scheme, see "<a href="#colors">Colors</a>" | |
| below.</p> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3>General Structure: Site Layout, Page Layouts,<br /> | |
| Default Elements and Overriding</h3> | |
| <ul><!-- 1.1 --> | |
| <li> | |
| <h4>Site Management Files: the "look" Project</h4> | |
| <p>Site layout is principally controlled by a series of "window | |
| management" script files found in the "look" project. You can | |
| <em>look</em> at the look files by navigating to:</p> | |
| <p><a target="_blank" href= | |
| "http://look.openoffice.org/source/browse/look/www/">look.openoffice.org/Version | |
| control/www</a></p> | |
| <p>We'll be referring to some of the files in the "look" area in | |
| this document. <!-- 1.2 --></p> | |
| </li> | |
| <li> | |
| <h4>Page Types: Home page, Misc pages, Project Pages</h4> | |
| <p>There are three major types of pages you'll see on the | |
| OpenOffice.org Web site:<br /></p> | |
| <ul> | |
| <li>the home page</li> | |
| <li>miscellaneous pages such as<br /> | |
| <a target="_blank" href= | |
| "//about_us/new.html">Welcome</a><br /> | |
| and<br /> | |
| <a target="_blank" href= | |
| "/download/index.html">Download</a></li> | |
| <li>and project pages such as the<br /> | |
| <a target="_blank" href="http://website.openoffice.org/">Website | |
| Project</a><br /> | |
| and<br /> | |
| <a target="_blank" href="http://api.openoffice.org/">API | |
| Project</a></li> | |
| </ul> | |
| <p>When you look at these types, you'll notice that each page type | |
| looks somewhat different in terms of the elements provided on each | |
| page. This guide will attempt to describe and define the various | |
| elements that make up pages in the OpenOffice.org web site with | |
| respect to its SourceCast architecture, and how these elements can | |
| be customized for your project and pages. We touch on <a href= | |
| "#exceptions">exceptions</a> to the rule below. <!--1.3 --></p> | |
| </li> | |
| <li> | |
| <h4>Header area</h4> | |
| <p>The "header" area for all pages in the OpenOffice.org site is | |
| defined as the top portion of the page including the blue | |
| horizontal menu bar across the page. Except for the Home Page and | |
| other exceptions, this element is static and cannot be changed. The | |
| default header can be found on all pages (with the exception of the | |
| Home page and those that purposefully avoid the requirement) within | |
| the OpenOffice.org site.</p> | |
| </li> | |
| <!-- 1.4 --> | |
| <li> | |
| <h4>Left Navigation area</h4> | |
| <p>Applicable site files:<br /> | |
| <a target="_blank" href= | |
| "http://look.openoffice.org/overrides/templates/NavColumn.vm">http://look.openoffice.org/overrides/templates/NavColumn.vm</a></p> | |
| <p>The Left Hand navigation portion of OOo pages is likely what | |
| you'll notice changing considerably from page to page.</p> | |
| <ul> | |
| <li><u>Minimal Fixed Navigation</u> | |
| <p>The "Search" box and the "How do I..." areas are a minimum | |
| left-hand navigation for any sub-page in the OOo site. Examples of | |
| pages that contain ONLY these elements can be seen at:</p> | |
| <p><a target="_blank" href= | |
| "/download/">download.openoffice.org</a><br /> | |
| and<br /> | |
| <a target="_blank" href= | |
| "http://about.openoffice.org/index.html">about.openoffice.org</a></p> | |
| <p>These minimal elements will show up on ANY page on the site that | |
| is part of the "main" area of the site not associated with a | |
| project, i.e., any area that begins with the URL | |
| "www.openoffice.org"; or in category home pages (not project) that | |
| do not have mail lists, etc. for instance, download.openoffice.org. | |
| Additional elements on some pages not adhering to this rule have | |
| been manually added.</p> | |
| </li> | |
| <li><u>Project Default Left Hand Navigation</u> | |
| <p>For OpenOffice.org projects, an additional default "Project | |
| Tools" menu is automatically prepended before the minimal fixed | |
| navigation when the page is loaded. You can see an examples of the | |
| default project left hand navigation by at the:</p> | |
| <p><a href= | |
| "http://scripting.openoffice.org">scripting.openoffice.org</a><br /> | |
| or<br /> | |
| <a target="_blank" href= | |
| "http://sc.openoffice.org/">sc.openoffice.org</a></p> | |
| <p>main project pages.</p> | |
| </li> | |
| <li><u>Customized Left Hand Navigation</u> | |
| <p>A customized left-hand navigation for any project can be used | |
| <i>instead of</i> the default "Project Tools" menu by including a | |
| file called</p> | |
| <p><b>project_tools.html</b></p> | |
| <p>at the top-level of a project "www" area. That is, a site area | |
| whose URL begins with something other than www.openoffice.org. See | |
| examples at: <a target="_blank" href= | |
| "http://marketing.openoffice.org/">marketing.openoffice.org</a><br /> | |
| <a target="_blank" href= | |
| "http://api.openoffice.org/">api.openoffice.org</a></p> | |
| <p>The project_tools.html page is simply marked up. Follow the | |
| guide below; it is from <a href="/project/bizdev/index.html">BizDev | |
| project's</a> and you need only substitute your project's URL's; | |
| you can also use the <a href= | |
| "/project/www/styles/project_tools_template.html">project_tools_template</a>. | |
| Note that the first section covers necessary links to "Project | |
| Home" to "Issue tracker". The second section contains elective | |
| links.</p> | |
| <p>Note: for ease of linking, instead of hard linking you can use | |
| the alias+relative link of this form: | |
| "/project/[projectname]/[directoryname]/[filename.html]. If you | |
| need to refer to the "look" project images, say, the link is, | |
| however: /branding/images/[filename.gif/jpg/whatever]</p> | |
| <br /> | |
| <table> | |
| <tr> | |
| <td><code><div class="label"> <a | |
| href="/servlets/ProjectHome"><strong>Project | |
| tools</strong></a> </div><br /> | |
| <div class="body"><br /> | |
| <div> <a href="/servlets/ProjectHome">Project | |
| home</a> </div><br /> | |
| <div> <a | |
| href="/servlets/ProjectMemberList">Membership</a> | |
| </div><br /> | |
| </div><br /> | |
| <div class="body"><br /> | |
| <div> <a | |
| href="/servlets/ProjectNewsList">Announcements</a> | |
| </div><br /> | |
| <div> <a | |
| href="/servlets/ProjectMailingListList">Mailing lists</a> | |
| </div><br /> | |
| </div><br /> | |
| <div class="body"><br /> | |
| <div> <a href="/servlets/ProjectDocumentList">Documents | |
| &amp; files</a> </div><br /> | |
| <div><a href="/source/browse/bizdev">Version | |
| control</a> </div><br /> | |
| </div><br /> | |
| <div class="body"><br /> | |
| <div> <a href="/servlets/ProjectIssues">Issue | |
| tracker</a> </div><br /> | |
| </div><br /> | |
| <div class="label"><a | |
| href="/index.html"><b>BizDev</b></a></div><br /> | |
| <div class="body"><br /> | |
| <div><a | |
| href="/project/bizdev/consultants.html">Consultants | |
| Page</a></div><br /> | |
| <div><a href="/project/bizdev/todos.html">How To | |
| Help</a></div><br /> | |
| <div><a href="/project/about/index.html">About | |
| OpenOffice.org</a></div><br /> | |
| </div><br /> | |
| <div | |
| class="label"><strong>Other</strong>...</div><br /> | |
| <div class="body"><br /> | |
| <div><a href="/project/marketing/index.html">Marketing | |
| Project</a></div><br /> | |
| <div><a | |
| href="/project/development/index.html">Development</a></div><br /> | |
| <div><a href="/project/projects/index.html">The | |
| community</a></div><br /> | |
| <div><a | |
| href="/project/native-lang/index.html">Native-Language | |
| Confederation</a></div><br /> | |
| <div><a | |
| href="/project/distribution/index.html">Distributing | |
| OpenOffice.org</a></div><br /> | |
| </div></code></td> | |
| </tr> | |
| </table> | |
| <br /></li> | |
| <li><u>Body Area</u> | |
| <p>SourceCast will merge your HTML documents into its own | |
| framework, so you don't need to take special care about the above | |
| described elements.</p> | |
| <p>HTML rendering as simple as:</p> | |
| <pre> | |
| <html> | |
| <body> | |
| <h2>Hello Folks! | |
| This is a page without html intro... | |
| <p> | |
| How does it render??? | |
| </body> | |
| </html> | |
| </pre> | |
| <p>and saved to file with the ".html" extension gets rendered as a | |
| complete well-formed page with headers, default left-hand side | |
| navigation, and footers.</p> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <!-- 2.0 --> | |
| <li> | |
| <h3><a name="colors">Colors</a></h3> | |
| <p>OpenOffice.org is forgiving and flexible in its look, especially | |
| for the <a href="http://native-lang.openoffice.org/">Native Language | |
| Confederation Projects</a>, but we do have standard colors.</p> | |
| <p>The colors whose style is specified <a href= | |
| "#bodyelement">below</a> suggest the basic sets: light blue, dark | |
| blue, pale gray--essentialy the colors of the OOo icon. Variations | |
| are permissible but there should be good reason for it. We want the | |
| basic look of OpenOffice.org to be readily identifiable. Some | |
| points:</p> | |
| <ul> | |
| <li>Language: If in English, it can be British or US spelling (or | |
| mix, even)</li> | |
| <li>Font: plain, easy to read, browser default</li> | |
| <li>CSS vs. HTML.: We prefer CSS. However, simple HTML is | |
| acceptable, as for a simple table, like the example below. Nested | |
| tables are strongly discouraged. If you need help creating a web | |
| page, contact us as <a href= | |
| "mailto:dev@website.openoffice.org">dev@website.openoffice.org</a></li> | |
| <li style="list-style: none"><a name="exceptions" id= | |
| "exceptions"></a></li> | |
| <li>Exceptions: Say you want to create a page that does not use the | |
| default elements but still adheres to the color scheme. That is | |
| permissible, just a little more difficult. Projects that have done | |
| so include the <a href="/project/de/index.html">DE</a> and <a href= | |
| "/project/hu/index.html">HU</a> projects, to name but two. How to | |
| do this is not very difficult, and instructions will be added | |
| shortly. In the meanwhile, contact the us at <a href= | |
| "mailto:dev@website.openoffice.org">dev@website.openoffice.org</a>.</li> | |
| </ul> | |
| <p> </p> | |
| </li> | |
| <li> | |
| <h3>Provided Page Styles</h3> | |
| Pages are generally constructed using a series of | |
| <b><div></b> elements that are styled. | |
| <p>All applicable site styles can be found in:</p> | |
| <ul> | |
| <!--<li>DEFAULT<br /> | |
| <a target="_blank" href= | |
| "http://look.openoffice.org/overrides/static/csi/css/tigris.css">tigris.css</a></li>--> | |
| <li>OVERRIDES<br /> | |
| <a target="_blank" href= | |
| "http://look.openoffice.org/overrides/static/csi/css/inst.css">inst.css</a></li> | |
| </ul> | |
| <p>We used to also use tigris.css and it along with inst.css is referenced in nearly all documents for the | |
| OOo site. We now only use inst.css. </p> | |
| <ul> | |
| <li><u>Header</u><br /> | |
| This area can not be changed or overwritten. Applicable style | |
| classes are:<br /> | |
| <b>#banner</b> and <b>#toptabs</b></li> | |
| <li><u>Left Hand Navigation</u><br /> | |
| As previously discussed, the left-hand navigation items can be | |
| overridden with the inclusion of a <i>project_tools.html</i> file | |
| in the top web area of a project. | |
| <p>The major applicable styles governing the left-hand navigation | |
| "menu" are:<br /> | |
| <b>#navcolumn</b> and <b>.toolgroup</b>.</p> | |
| <p>It is <i>not</i> recommended to override these style definitions | |
| in order to maintain general site "look".</p> | |
| </li> | |
| <li><u><a name="bodyelement" id="bodyelement"></a>Body Element | |
| Styling</u><br /> | |
| There are far too many styles to list all body (normal) html | |
| styling elements here. Both of the internal style files are fairly | |
| well documented in this respect. However, the following table shows | |
| various character styles that are available. [Note: I know that | |
| there are duplicate and even silly styles here and if someone wants | |
| to normalise or rationalise the set, go ahead and let me, Louis, | |
| <a href="mailto:louis@openoffice.org">know</a>.] | |
| <table> | |
| <tr> | |
| <td class="blue">.blue</td> | |
| <td class="alt1">.alt1</td> | |
| <td class="alt3">.alt3</td> | |
| <td class="graybold">.graybold</td> | |
| </tr> | |
| <tr> | |
| <td class="alt4">.alt4</td> | |
| <td class="alt2">.alt2</td> | |
| <td class="darkblueleftmiddle">.darkblueleftmiddle</td> | |
| <td class="darkbluebold">.darkbluebold</td> | |
| </tr> | |
| <tr> | |
| <td class="darkblueleft">.darkblueleft</td> | |
| <td class="alt5">.alt5</td> | |
| <td class="alt6">.alt6</td> | |
| <td class="alt7">.alt7</td> | |
| </tr> | |
| <tr> | |
| <td class="alt8">.alt8</td> | |
| <td class="alt8b">.alt8b</td> | |
| <td class="bigboldlef">.bigboldlef</td> | |
| <td class="alt9">.alt9</td> | |
| </tr> | |
| <tr> | |
| <td class="alt9b">.alt9b</td> | |
| <td class="alt10">.alt10</td> | |
| <td class="alt12">.alt12</td> | |
| <td class="blueboldcenter">.blueboldcenter</td> | |
| </tr> | |
| <tr class="liteblue-back"> | |
| <td class="fontwhite">White font regular</td> | |
| <td class="fontwhite">.fontwhite</td> | |
| <td class="fontwhitesmall">White font small</td> | |
| <td class="fontwhitesmall">.fontwhitesmall</td> | |
| </tr> | |
| <tr> | |
| <td class="fontredochre">.fontredochre</td> | |
| <td class="small">.small</td> | |
| <td class="smaller">.smaller</td> | |
| <td class="alt14">.alt14</td> | |
| </tr> | |
| <tr> | |
| <td class="boldcenter">.boldcenter</td> | |
| <td class="it_nav">.it_nav</td> | |
| <td class="liteblue">.liteblue</td> | |
| <td class="liteblue-back">.liteblue-back</td> | |
| </tr> | |
| </table> | |
| <p>The main area of project documents will be subject elements in | |
| the <b>#body</b>, <b>#bodytd</b> and <b>#bodycol</b> styles.</p> | |
| </li> | |
| <li><u>Tables</u><br /> | |
| Of note is the default styling for tables. The site default is | |
| borderless tables. See for instance: | |
| <hr /> | |
| <table width="100%" border="1" cellpadding="4" cellspacing="2"> | |
| <tr> | |
| <th colspan="4" align="left" class="darkbluebold">Sample Table</th> | |
| </tr> | |
| <tr> | |
| <th class="liteblue">Name</th> | |
| <th class="liteblue">Data</th> | |
| <th class="liteblue">Object</th> | |
| <th class="liteblue">Quality</th> | |
| </tr> | |
| <tr> | |
| <td class="tableF0">name1</td> | |
| <td class="tableF0">data1</td> | |
| <td class="tableF0"><a href="http://">object1</a></td> | |
| <td class="tableF0">**</td> | |
| </tr> | |
| <tr> | |
| <td class="tableF0">name2</td> | |
| <td class="tableF0">data2</td> | |
| <td class="tableF0"><a href="http://">object2</a></td> | |
| <td class="tableF0">***</td> | |
| </tr> | |
| <tr> | |
| <td class="tableF0">name3</td> | |
| <td class="tableF0">data3</td> | |
| <td class="tableF0"><a href="http://">object3</a></td> | |
| <td class="tableF0">***</td> | |
| </tr> | |
| </table> | |
| <hr /> | |
| <p> </p> | |
| <p>To display a table with alternating color rows include a | |
| reference to the <i>tableDecorate</i> script along with some | |
| scripting to assign colors to rows. Example:</p> | |
| <br /> | |
| <pre> | |
| <script src="/branding/scripts/tableDecorate.js | |
| type="application/x-javascript"> | |
| </script> | |
| <style type="text/css"> | |
| .oddRow {background:#EEEEEE} | |
| .oddCol {color:black} | |
| </style> | |
| </pre> | |
| <p>This should go in the head section of a fully constructed html | |
| page, i.e. with included <html> and <head> tags, | |
| etc.</p> | |
| </li> | |
| <li><u>Footer</u><br /> | |
| This area, like the standard header area, can not be changed or | |
| overwritten. Applicable styles are: <b>#footer</b> and | |
| <b>footerpart</b>.</li> | |
| </ul> | |
| </li> | |
| </ol> | |
| </body> | |
| </html> |