The template for the basic index.html page should be enough to get you started.
For basic color scheme, see "Colors" below.
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.
There are three major types of pages you'll see on the
OpenOffice.org Web site:
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.
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.
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.
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.
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> |
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.
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:
All applicable site styles can be found in:
You'll see both these referenced in nearly all documents for the OOo site.
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".
.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.
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.