OpenOffice.org Website Guide
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:
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
- and project pages such as the
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.
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:
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:
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:
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
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> <a href="/servlets/ProjectHome">Project home</a> </div>
<div> <a href="/servlets/ProjectMemberList">Membership</a> </div>
<div> <a href="/servlets/ProjectNewsList">Announcements</a> </div>
<div> <a href="/servlets/ProjectMailingListList">Mailing lists</a> </div>
<div> <a href="/servlets/ProjectDocumentList">Documents & files</a> </div>
<div><a href="/source/browse/bizdev">Version control</a> </div>
<div> <a href="/servlets/ProjectIssues">Issue tracker</a> </div>
<div class="label"><a href="/index.html"><b>BizDev</b></a></div>
<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><a href="/project/marketing/index.html">Marketing Project</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>
- 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.
- Minimal Fixed Navigation
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 firstname.lastname@example.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 email@example.com.
Provided Page StylesPages are generally constructed using a series of <div> elements that are styled.
All applicable site styles can be found in:
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.
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
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.
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:
This should go in the head section of a fully constructed html page, i.e. with included <html> and <head> tags, etc.
This area, like the standard header area, can not be changed or overwritten. Applicable styles are: #footer and footerpart.