| <!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> |
