Difference between revisions of "Website/Style Guide"

From Apache OpenOffice Wiki
Jump to: navigation, search
m (Reverted edits by Jones (Talk) to last revision by Ivanm)
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
This page contains the style guide for the OpenOffice.org website, launched in March 2008.
+
[[Category:Art]]
 +
[[Category:Website]]
 +
{{Website}}
 +
 
 +
This page contains the style guide for the OpenOffice.org website, launched in March 2008 and subsequently updated in November 2008 - January 2009.
  
 
== Design ==
 
== Design ==
Line 15: Line 19:
 
=== General Guidelines ===
 
=== General Guidelines ===
  
−
The design strives for lightweight minimalism; to load quickly and be simple so as not to distract from the content. Its general guidelines are this: using larger font sizes to improve readability, allowing plenty of white space, and using lighter colors and subtle gradients.
+
The design strives for a lightweight minimalism; pages should load quickly and be simple so as not to distract from the content. The general guidelines are:
 +
 
 +
* Using larger font sizes to improve readability
 +
* Allowing plenty of white space
 +
* Using light colors and subtle gradients
  
 
==== Color Pallete ====
 
==== Color Pallete ====
  
−
[[Image:Ooo-color-scheme.png|center]]
+
[[Image:Ooo-color-scheme.png]]
  
 
==== Page Margins ====
 
==== Page Margins ====
Line 25: Line 33:
 
The page margin and padding is set to 0. However, as a general rule, any text/graphics (excluding background images) should be at least 15 pixels away from the edges of the page.
 
The page margin and padding is set to 0. However, as a general rule, any text/graphics (excluding background images) should be at least 15 pixels away from the edges of the page.
  
−
=== Source Files ===
+
== Templates and Source Files ==
  
−
Source vector files include the key design elements used on the website. They are available in Fireworks PNG, or Photoshop PSD. Templates for more specific graphics (such as the logo, or action statement icons) are provided under their respective CSS section below, or you can choose to download all source files, including templates.
+
=== License ===
  
−
'''Will be available in time for OOo 3'''
+
'''Please Note:''' These graphics are made available for the use of the OpenOffice.org community. The OpenOffice.org logo is a registered trademark and is not licensed under an open source license. ([[Art/Logo/License|More Information]])
  
−
* Fireworks PNG (? KB)
+
=== Website Template ===
−
* Photoshop PSD (? KB)
+
 
−
* Download all source files (Fireworks PNG and Photoshop PSD, ?MB)
+
Source vector files include the key design elements used on the website. They are available in Fireworks PNG, or Photoshop PSD. Templates for more specific graphics (such as the logo, or action statement icons) are provided under their respective CSS section below.
 +
 
 +
* [http://www.patentpending.co.nz/openoffice/resources/website-template.zip Website Template] - Fireworks PNG and Photoshop PSD, 229KB
 +
 
 +
[[Image:Message-Graphic.png|right]]
 +
=== Short Messages ===
 +
 
 +
This graphic is ideal for short messages, and is currently used on the OpenOffice.org download confirmation page.
 +
 
 +
[http://www.patentpending.co.nz/openoffice/resources/message-template.zip Short Message Template] - Fireworks PNG & Photoshop PSD, 317KB.
 +
 
 +
The recommended output setting for the smallest file size (while maintaining good quality) is:
 +
* PNG8 (8-bit PNG, 256 colors, maximum dithering)
 +
<br clear="all" />
  
 
== CSS ==
 
== CSS ==
Line 43: Line 64:
 
=== Standard HTML Elements ===
 
=== Standard HTML Elements ===
  
−
This section should be reasonably self-explanatory. It contains core CSS styles, such as headings, paragraphs, links, lists, etc.
+
This section contains core CSS styles, such as headings, paragraphs, links, lists, etc.
  
 
{| class="prettytable"
 
{| class="prettytable"
Line 57: Line 78:
 
|-
 
|-
 
| body
 
| body
−
| font-size is set to .9em, which subsequently affects all the other font-size properties in the stylesheet. All subsequent font-sizes measured in em's are multiplied by 0.9.
+
| font-size is set to .9em, which subsequently affects all the other font-size properties in the stylesheet. All subsequent font-sizes measured in em's are multiplied by 0.9 (e.g., a CSS property with a font-size of 1em will actually be .9em) as they inherit the body font-size.
  
−
 
+
The background-color property is necessary to suppresses the default browser background color as some users may have it set to a color other than white.
−
The background-color property is necessary to suppresses the default browser background color.
+
 
|  
 
|  
  
Line 141: Line 161:
 
|-
 
|-
 
| hr
 
| hr
−
| Display is set to none; an alternative version is commented out at the end of this block.
+
| Display is set to none by default.
 
|  
 
|  
  
Line 175: Line 195:
  
 
=== Header ===
 
=== Header ===
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#nonfooter</nowiki>
 
−
| Wraps around all non-footer content. This is required so that the footer appears at the bottom of the page even if its content is vertically shorter than the user's vertical resolution
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#header</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#positioner</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#positioner img</nowiki>
 
−
| The OpenOffice.org logo
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#positioner h1</nowiki>
 
−
| The 'slogan' (currently “the free and open productivity suite”). text-shadow property added for enhanced readability, validates only under CSS 2/3 (not 2.1)
 
−
|
 
−
 
−
|-
 
−
| colspan="3" bgcolor="white" |
 
−
 
−
|-
 
−
| <nowiki>#minitabs</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs a</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs p</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs label</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs input</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs a.tab</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs ul.minitabs</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.minitab</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.minitab a.tab</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.minitab .tabcontent</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li:hover a.tab</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li:hover .tabcontent</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.first_in_list</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search *</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search:hover *</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search:hover input</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search a.tab</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search input</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search input.inputtext</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search </nowiki>input.searchbutton
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs li.search .tabcontent</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs #loginbox</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs #loginbox input</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs #loginbox input.loginbutton</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#minitabs #loginbox #joina a</nowiki>
 
−
|
 
−
|
 
−
 
−
 
−
|-
 
−
| colspan="3" bgcolor="white" |
 
−
 
−
|-
 
−
| <nowiki>#minilinks</nowiki>
 
−
| Applies to Internet Explorer 6 only, hence display:none. The IE6-only stylesheet overrides it to display: visible;
 
−
|
 
−
 
−
|}
 
−
 
−
=== Top Menu / Navigation ===
 
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#subheader</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation ul</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation li</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation a</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation a:hover</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation a:hover span</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation span</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation li.th a</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navigation li.th a span</nowiki>
 
−
|
 
−
|
 
−
 
−
|}
 
−
 
−
=== Breadcrumbs ===
 
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#breadcrumbs</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#breadcrumbs a</nowiki>
 
−
|
 
−
|
 
−
 
−
|}
 
−
 
−
=== Content (informational body) Layout ===
 
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#content</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#main</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#bodycol</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#bodycol li</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#bodycol dd</nowiki>
 
−
|
 
−
|
 
−
 
−
|}
 
−
 
−
=== NavColumn Layout ===
 
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#navcol</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#navcolumn</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| dl.navgroup
 
−
|
 
−
|
 
−
 
−
|-
 
−
| dl.navgroup, dl.navgroup div.body
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup ul li
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup, .navgroup dt, .navgroup dd, .navgroup li
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup dd
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup ul
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup li
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup dd li, .navgroup dd div
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup dd li:hover, .navgroup div.body div:hover, #searchbox dd div:hover
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup dt, .navgroup div.label
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup a
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup div.body
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup div.body div
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .navgroup div.body div:hover
 
−
|
 
−
|
 
−
 
−
|-
 
−
| dl.navgroup > dd div.body
 
−
| Minor bugfix
 
−
|
 
−
 
−
|}
 
  
 
=== CommunityCol ===
 
=== CommunityCol ===
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#communitycol</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#communitycol h3</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#communitycol h3 a</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#rightcol</nowiki>
 
−
|
 
−
|
 
−
 
−
|}
 
  
 
=== IssueZilla & Filebrowser Specific Styling ===
 
=== IssueZilla & Filebrowser Specific Styling ===
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| div.application
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.application th
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.application th a
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.application td a
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.application td
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.application pre, #helpbox pre
 
−
|
 
−
|
 
−
 
−
|-
 
−
| colspan="3" bgcolor="white" |
 
−
 
−
|-
 
−
| <nowiki>#topmodule div</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#topmodule table</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#issuezilla select</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#issuezilla table</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#issuezilla h2</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#issuezilla .h2</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| colspan="3" bgcolor="white"  |
 
−
 
−
|-
 
−
| div.h2 div p, p.blue
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#projectmailinglist p, p.gray</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#projectmailinglist form p</nowiki>
 
−
| Overrides #projectmailinglist p, so that the borders and background-color effect is not applied to paragraphs encapsulated by a form.
 
−
|
 
−
 
−
|-
 
−
| div.h2 form div p
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.h2 div p a, div.h2 form div p a, #projectmailinglistlist p a, p.blue a, p.gray a, p.green a
 
−
|
 
−
|
 
−
 
−
|-
 
−
| p.yellow
 
−
|
 
−
|
 
−
 
−
|-
 
−
| p.green
 
−
|
 
−
|
 
−
 
−
|-
 
−
| colspan="3" bgcolor="white"  |
 
−
 
−
|-
 
−
| .filebrowse h2
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse ul, .filebrowse-alt ul
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse li, .filebrowse-alt li
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse ul ul, .filebrowse-alt ul ul
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse .leaf, .filebrose-alt .leaf
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse .leafnode, .filebrowse-alt .leafnode
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse-alt .expanded, .filebrowse-alt .collapsed, .filebrowse-alt .leaf, .filebrowse-alt .leafnode, .sortup, .sortdown
 
−
|
 
−
|
 
−
 
−
|-
 
−
| .filebrowse-alt .leaf, .filebrowse-alt .leafnode, .sortup, .sortdown
 
−
|
 
−
|
 
−
 
−
|}
 
  
 
=== Custom Stylings ===
 
=== Custom Stylings ===
  
 
=== Campaign ===
 
=== Campaign ===
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| div.campaign
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.campaign h2
 
−
|
 
−
|
 
−
 
−
|-
 
−
| div.campaign p
 
−
|
 
−
|
 
−
 
−
|}
 
  
 
=== Footer ===
 
=== Footer ===
−
 
−
{| class="prettytable"
 
−
| CSS Style
 
−
| Comment
 
−
| Diagram
 
−
 
−
|-
 
−
| <nowiki>#footer </nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#footer a</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#footer a:hover</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#footer ul</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#footer li</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#footer img</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#sunlogo</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#collabnetlogo</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#smallprint</nowiki>
 
−
|
 
−
|
 
−
 
−
|-
 
−
| <nowiki>#smallprint p</nowiki>
 
−
|
 
−
|
 
−
 
−
|}
 
  
 
=== Formerly tigris.css ===
 
=== Formerly tigris.css ===

Latest revision as of 21:35, 30 December 2010

Website Project

Quick Navigation:

Main Pages:


View or edit this template.


This page contains the style guide for the OpenOffice.org website, launched in March 2008 and subsequently updated in November 2008 - January 2009.

Design

Goals and Motivations

The reason behind the redesign was spurred by a Google ads campaign that got a large amount of hits which did not translate well into downloads. The mandate of the new design was to increase downloads as the target audience of the homepage shifted its primary concern toward end-users (the initial OOo website was primarily targeted at developers, the 2005 redesign balanced developers and end-users, and now it is aimed primarily at end-users) .

In order to accomplish the mandate, three key changes were made:

  • Implementing a one-click download on the homepage
  • Using action statements (e.g. "I need help with my OpenOffice.org") to better explain things to new users, and to easily allow users to move quickly into more specific, targeted sections of the website.
  • Updating the design to look more friendly and modern (hopefully also more future-proof!)

General Guidelines

The design strives for a lightweight minimalism; pages should load quickly and be simple so as not to distract from the content. The general guidelines are:

  • Using larger font sizes to improve readability
  • Allowing plenty of white space
  • Using light colors and subtle gradients

Color Pallete

Ooo-color-scheme.png

Page Margins

The page margin and padding is set to 0. However, as a general rule, any text/graphics (excluding background images) should be at least 15 pixels away from the edges of the page.

Templates and Source Files

License

Please Note: These graphics are made available for the use of the OpenOffice.org community. The OpenOffice.org logo is a registered trademark and is not licensed under an open source license. (More Information)

Website Template

Source vector files include the key design elements used on the website. They are available in Fireworks PNG, or Photoshop PSD. Templates for more specific graphics (such as the logo, or action statement icons) are provided under their respective CSS section below.

Message-Graphic.png

Short Messages

This graphic is ideal for short messages, and is currently used on the OpenOffice.org download confirmation page.

Short Message Template - Fireworks PNG & Photoshop PSD, 317KB.

The recommended output setting for the smallest file size (while maintaining good quality) is:

  • PNG8 (8-bit PNG, 256 colors, maximum dithering)


CSS

Below is a line-by-line explanation of style.css, which contains all the relevant CSS for the OpenOffice.org website. Actual CSS is not included, as it is subject to minor tweaks. Instead, text comments and annotated screenshots will be used to show the function of each line of CSS. Your best reference to follow along with is the current stylesheet.

Style.css is separated into blocks by comments. Each block is a grouping of related styles. The first block is "Standard HTML Elements", followed by "Header", and so on.

Standard HTML Elements

This section contains core CSS styles, such as headings, paragraphs, links, lists, etc.

Style Comment Example
html, body
body font-size is set to .9em, which subsequently affects all the other font-size properties in the stylesheet. All subsequent font-sizes measured in em's are multiplied by 0.9 (e.g., a CSS property with a font-size of 1em will actually be .9em) as they inherit the body font-size.

The background-color property is necessary to suppresses the default browser background color as some users may have it set to a color other than white.

p
a
a:hover
ul
li
h1, h2, h3 Properties that are shared by all headings
h1
h2
h2 a
h3
img
form
th, td
dt
hr Display is set to none by default.
del
label
fieldset
th
.nonscreen Hides content provided for accessibility purposes from regular users (e.g. “skip to content” links).

Header

CommunityCol

IssueZilla & Filebrowser Specific Styling

Custom Stylings

Campaign

Footer

Formerly tigris.css

Retrieved from "https://wiki.openoffice.org/w/index.php?title=Website/Style_Guide&oldid=190944"
Personal tools