OpenOffice.org Web Style Guide

OpenOffice.org Website Guide

Basics
- Essentials
- - The default charset is UTF-8.
  The template for the basic index.html page should be enough to get you started.
  - Index Template
  For basic color scheme, see "Colors" below.

General Structure: Site Layout, Page Layouts,
Default Elements and Overriding

Site Management Files: the "look" Project

Site layout is principally controlled by a series of "window management" script files found in the "look" project. You can look at the look files by navigating to:

look.openoffice.org/Version control/www

We'll be referring to some of the files in the "look" area in this document.
Page Types: Home page, Misc pages, Project Pages

There are three major types of pages you'll see on the OpenOffice.org Web site:
- the home page
- miscellaneous pages such as
  Welcome
  and
  Download
- and project pages such as the
  Website Project
  and
  API Project
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 exceptions to the rule below.
Header area

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.

Left Navigation area

Applicable site files:
http://look.openoffice.org/overrides/templates/NavColumn.vm

The Left Hand navigation portion of OOo pages is likely what you'll notice changing considerably from page to page.

Minimal Fixed Navigation
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:

download.openoffice.org
and
about.openoffice.org

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.
Project Default Left Hand Navigation
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:

scripting.openoffice.org
or
sc.openoffice.org

main project pages.

Customized Left Hand Navigation

A customized left-hand navigation for any project can be used instead of the default "Project Tools" menu by including a file called

project_tools.html

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: marketing.openoffice.org
api.openoffice.org

The project_tools.html page is simply marked up. Follow the guide below; it is from BizDev project's and you need only substitute your project's URL's; you can also use the project_tools_template. Note that the first section covers necessary links to "Project Home" to "Issue tracker". The second section contains elective links.

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]

<div class="label"> <a
href="/servlets/ProjectHome"><strong>Project
tools</strong></a> </div>

<div class="body">

<div> <a href="/servlets/ProjectHome">Project
home</a> </div>

<div> <a
href="/servlets/ProjectMemberList">Membership</a>
</div>

</div>

<div class="body">

<div> <a
href="/servlets/ProjectNewsList">Announcements</a>
</div>

<div> <a
href="/servlets/ProjectMailingListList">Mailing lists</a>
</div>

</div>

<div class="body">

<div> <a href="/servlets/ProjectDocumentList">Documents
&amp; files</a> </div>

<div><a href="/source/browse/bizdev">Version
control</a> </div>

</div>

<div class="body">

<div> <a href="/servlets/ProjectIssues">Issue
tracker</a> </div>

</div>

<div class="label"><a
href="/index.html"><b>BizDev</b></a></div>


<div class="body">

<div><a
href="/project/bizdev/consultants.html">Consultants
Page</a></div>

<div><a href="/project/bizdev/todos.html">How To
Help</a></div>

<div><a href="/project/about/index.html">About
OpenOffice.org</a></div>

</div>

<div
class="label"><strong>Other</strong>...</div>


<div class="body">

<div><a href="/project/marketing/index.html">Marketing
Project</a></div>

<div><a
href="/project/development/index.html">Development</a></div>


<div><a href="/project/projects/index.html">The
community</a></div>

<div><a
href="/project/native-lang/index.html">Native-Language
Confederation</a></div>

<div><a
href="/project/distribution/index.html">Distributing
OpenOffice.org</a></div>

</div>

Body Area
SourceCast will merge your HTML documents into its own framework, so you don't need to take special care about the above described elements.

HTML rendering as simple as:
```
<html>
<body>
<h2>Hello Folks!
This is a page without html intro...
<p>
How does it render???
</body>
</html>
                
```
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.

Colors

OpenOffice.org is forgiving and flexible in its look, especially for the Native Language Confederation Projects, but we do have standard colors.

The colors whose style is specified below 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:
- Language: If in English, it can be British or US spelling (or mix, even)
- Font: plain, easy to read, browser default
- 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 dev@website.openoffice.org
- 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 DE and HU 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 dev@website.openoffice.org.

Provided Page Styles

Pages are generally constructed using a series of <div> elements that are styled.

All applicable site styles can be found in:

DEFAULT
tigris.css
OVERRIDES
inst.css

You'll see both these referenced in nearly all documents for the OOo site.

Header
This area can not be changed or overwritten. Applicable style classes are:
#banner and #toptabs
Left Hand Navigation
As previously discussed, the left-hand navigation items can be overridden with the inclusion of a project_tools.html file in the top web area of a project.
The major applicable styles governing the left-hand navigation "menu" are:
#navcolumn and .toolgroup.

It is not recommended to override these style definitions in order to maintain general site "look".

Body Element Styling
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, know.]

.blue	.alt1	.alt3	.graybold
.alt4	.alt2	.darkblueleftmiddle	.darkbluebold
.darkblueleft	.alt5	.alt6	.alt7
.alt8	.alt8b	.bigboldlef	.alt9
.alt9b	.alt10	.alt12	.blueboldcenter
White font regular	.fontwhite	White font small	.fontwhitesmall
.fontredochre	.small	.smaller	.alt14
.boldcenter	.it_nav	.liteblue	.liteblue-back

The main area of project documents will be subject elements in the #body, #bodytd and #bodycol styles.

Tables
Of note is the default styling for tables. The site default is borderless tables. See for instance:

Sample Table

Name Data Object Quality

name1 data1 object1 **

name2 data2 object2 ***

name3 data3 object3 ***

To display a table with alternating color rows include a reference to the tableDecorate script along with some scripting to assign colors to rows. Example:
```
                   
<script src="/branding/scripts/tableDecorate.js 
  type="application/x-javascript">
</script>
<style type="text/css">
   .oddRow {background:#EEEEEE}
   .oddCol {color:black}
</style>
        
```
This should go in the head section of a fully constructed html page, i.e. with included <html> and <head> tags, etc.
Footer
This area, like the standard header area, can not be changed or overwritten. Applicable styles are: #footer and footerpart.

Sample Table
Name	Data	Object	Quality
name1	data1	object1	**
name2	data2	object2	***
name3	data3	object3	***

OpenOffice.org Website Guide

Basics

General Structure: Site Layout, Page Layouts, Default Elements and Overriding

Site Management Files: the "look" Project

Page Types: Home page, Misc pages, Project Pages

Header area

Left Navigation area

Colors

Provided Page Styles

General Structure: Site Layout, Page Layouts,
Default Elements and Overriding