English:

The Free and Open Productivity Suite
New: Apache OpenOffice 4.1.0 released!

OpenOffice.org Website Guide

  1. Basics

    • Essentials
      • The default charset is UTF-8.

      The template for the basic index.html page should be enough to get you started.

      For basic color scheme, see "Colors" below.

  2. 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:

      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.

  3. 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.

     

  4. Provided Page Styles

    Pages 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.

    • 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.

Apache Software Foundation

Copyright & License | Privacy | Website Feedback | Contact Us | Donate | Thanks

Apache, the Apache feather logo, and OpenOffice are trademarks of The Apache Software Foundation. OpenOffice.org and the seagull logo are registered trademarks of The Apache Software Foundation. Other names appearing on the site may be trademarks of their respective owners.