Style Guide

Tabbed navigation

Organization

The concept of the Vector tabbed navigation is to separate views or types of pages from actions to be performed on those pages. Some of these actions can be performed on the article and discussion page independently (e.g. Edit, View History) and some actions can be applied to both pages (e.g. Watch). The most used tabs site-wide are always visible, others are placed in a drop-down menu. If you are adding a new page, please maintain this functional separation. If it is a page type, it should be grouped with the tabs on the left. If it is an action that is performed on the page, it should be grouped with the tabs on the right. Please maintain an appropriate hierarchy within the "page type" and "page action" categories.

• Illustrations needed
  • Image of tabs highlighting types Vs. actions
  • Example of added tabs (language variant, admin tools)

Background Color

The background color of the tabs plays an important role in their function. Vector uses separate colors for "active" tabs and "inactive tabs". The background of the content area should match the background color of an active tab (in Vector HEX VALUE). This way, the active tab is grouped with the content area. Additionally, the inactive tabs should be a significantly different color to reinforce this activity. Breaking these conventions would break the tab/folder metaphor.

We additionally do not recommend adding any extra lines or other things that visually disconnect the active tab from the content area or removing lines that visually connect inactive tabs from the content area.

• Illustrations needed
  • tab, content area
  • good example, bad example (that polish one that adopted our stuff)

Text Labels

The text labels are displayed in "Arial", 12px, regular. We recommend to keep this typeface. If you want to change it you should choose a legible and simple typeface. We recommend to use the same typeface as used in other navigation elements (left navigation, ntoc, toolbar). Please note that the tabbed navigation is the main navigation element of a wiki. For this reason it should be prominent, easy to access and the text labels should be displayed in a propper, legible size.

Text Label Colors

The text labels basically behave just like normal links:

• blue text = link to existing page
• red text = link to not existing page (only occurs for "discussion")
• black text = active

We use regular font weight. If you decide to change this, we recommend to keep that value on all status. For example: A switch from regular to bold as a mouse over effect evokes resizement of the tab, which looks like a "jump effect". This should be avoided.

Interaction

As a mouse over effect we use underlinement of text labels. This corresponds to commonly used link behaviour and supports good user interaction. We recommend not to use a change of background color or font weight (using bold as mouse over effect).

Underlinement as mouse over effect may be turned off, though we encourage to keep it.

The Toolbar

The basic idea of the toolbar is a limited, preselected row of the most important icons according to the data we collected with a clicktracking survey. If you change this row, we highly recommend not to display more than 7 icons, to maintain easy, comprehensible interaction. The expanded toolbar, as you get it when you click on "advanced", is the right place to add extra icons.

Icons

Text format icons

In an effort to be comprehensible in many languages, the toolbar uses the letter "A" for character formatting icons as the default value. However we support the use of language specific icons (for example, "B" for Bold and "I" for Italic in English and "F" for Fettdruck and "K" for Kursiv in German). The set of textformatting icons can be found on this page on Wikimedia Commons. If you use a language wiki that does not have language-specific icons already on Commons, and have basic knowledge of Inkscape + Gimp or Adobe Illustrator + Photoshop, we welcome your contributions. We have created this "How To" guide to walk you through the steps to create these icons and get them on Wikimedia Commons.

Toolbar icons

If you want to add any icons to the toolbar we recommend to keep the icon style, which adopted the GNOME Icon Style. We created another "How To" Page to help you creating appropriate icons.

Feel free to add new icons for the toolbar to this Additionally Vector Toolbar Icons or leave a comment on the discussion page.

Article Page Content Area

Thumbnails

220px now. phasing out 180px.