| <html> |
| <head> |
| <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> |
| <title>OpenOffice.org Web Style Guide</title> |
| </head> |
| <body> |
| <h2>OpenOffice.org Website Guide</h2> |
| <ol> |
| <!-- 1 --> |
| <li> |
| <h3>Basics</h3> |
| <ul> |
| <li><u>Essentials</u></li> |
| <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> |
| </ul> |
| <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. 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>Colors</h3> |
| <p>OpenOffice.org is forgiving and flexible in its look, especially for the <a href="/project/native-lang.openoffice.org/index.html">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> |
| <a name="exceptions"></a> |
| <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> |
| <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> You'll see both these referenced in nearly all documents for the OOo site. </p> |
| <p> </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> |
| <p> </p> |
| </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> |
| <p> </p> |
| </li> |
| <li><u><a name="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>.] |
| <p> |
| <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</a> |
| </tr> |
| <tr class=liteblue-back> |
| <td class="fontwhite">White font regular</td> |
| <td class="fontwhite">.fontwhite</td> |
| <td class="fontwhitesmall">White font small |
| <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> |
| <p></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</a></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> |
