Difference between revisions of "Website/Localization"

Latest revision as of 05:31, 23 December 2008

You can now easily localize the content of your NL project website with the methods and tools listed on this page. Please use the Discussion tab or the website-dev mailing list for feedback.

Localizing the Header

Update: The new header is being fine-tuned based on user feedback, so JS-based localization for the header is currently disabled.

To localize the header content of your NL project page(s), you will need the following file: locale.js, which you will need to place among your NL project's files.

Please Note: This will only work for pages where you have added the HTML code to make these scripts work (please see the Example Usage section for more information). You can add the code to your project_tools.html page so that every one of your project pages will run the script and so that you do not have to insert it manually in each page.

Locale.js

This file contains a list of variables where you can specify the translations to all the strings in the header.

var showPositioner =		true;
var logoLinkTitle =		"Return to the OpenOffice.org homepage";
var logoLinkURL =		"http://www.openoffice.org";
var logoImageURL =		"/branding/images/bannerlogo.png";
var positionerText =		"the free and open productivity suite";
var languageProjectsText =	"Language Projects";
var userNotLoggedInText =	"You are not logged in.";
var userLoggedInText =		"You are logged in as";
var registerText =		"Register";
var orText =			"or";
var logInText =		"Log In";
var logOutText =		"Log Out";
var usernameText =		"username";
var passwordText =		"password";
var rememberMeText =		"Keep me logged in"; // Remember Me functionality is not currently available
var advancedSearchText =	"Advanced search";
var searchText =		"Search";

• showPositioner (Boolean) - Lets you specify whether or not you want the positioner to be displayed.
• logoLinkTitle (String) - The title attribute for the OpenOffice.org logo's link in the header - this will appear as a tooltip when the user hovers over the image (link).
• logoLinkURL (String, URL) - The URL (website address) that you want the header logo to link to. You may want to link this to your NL project homepage rather than the general OpenOffice.org homepage. If you change this, please make sure that the headerLinkTitle string informs the user as to where they will be taken.
• logoImageURL (String, URL) - Lets you replace the default OpenOffice.org logo image. A template will be made available soon.
• positionerText (String) - Lets you specify your own positioner text.
• languageProjectsText (String) - Translation of 'Language Projects' link (or 'Native Language Projects')
• userNotLoggedInText (String) - Translation of the text shown when the user is not logged in.
• userLoggedInText (String) - Translation of the text shown when the user is logged in - something like 'Logged in as' or 'You are logged in as'
• registerText (String) - Translation of 'Register'.
• orText (String) - Translation of 'or'.
• logInText (String) - Translation of 'Log In'.
• logOutText (String) - Translation of 'Log Out'.
• usernameText (String) - Translation of 'username'.
• passwordText (String) - Translation of 'password'.
• rememberMeText (String) - Translation of 'Keep me Logged In'.
• advancedSearchText (String) - Translation of 'Click for advanced search'.
• searchText (String) - Translation of 'Search'.

Localize.js Functions

This file will be stored and maintained by the website-dev team so that if the HTML code of the OpenOffice.org website's header changes, you will not need to make any updates, and your design will not break.

• localize() - this function should be run last of all.
• setPositionerDisplay(Boolean) - allows you to set the positioner to be hidden (single page only). This will override the setting in locale.js.
• setPositionerText(String) - allows you to specify a custom string for the positioner (single page only). This will override the existing string specified in locale.js.

Example Usage

Below is an example of the HTML code necessary to implement localization (the examples below assume your locale.js file is in your project's root directory).

The bare minimum code is shown below. It must appear in this order, and it must be placed below #header in your HTML code (i.e., it will not work if you place it in your <head> section).

<script type="text/javascript" src="/locale.js"></script>
<script type="text/javascript" src="/branding/scripts/localization.js"></script>
<script type="text/javascript">
	localize();
</script>

Customizing the Links

Insert your custom navigation code at the top of your project-tools.htm page. The structure of the HTML code should be like this:

<div id="navigation2" class="navigation">
	<ul>
		<li><a href="/index.html" title="Link 1 Description"><span>Link 1</span></a></li>
		<li><a href="/index.html" title="Link 2 Description"><span>Link 2</span></a></li>
		<li><a href="/index.html" title="Link 3 Description"><span>Link 3</span></a></li>
	</ul>
</div>

Please Note: It is important to use class="navigation" as this class is associated with the navigation bar styles (e.g. tabs).

In your project CSS file, use absolute positioning to place your custom navigation over the default:

#navigation  { display: none; }
#navigation2 { position: absolute; top: 125px; right: 15px; z-index: 100; background: #CBDEFA; }

Projects With Header/Navigation Localization

If your NL project, or a NL project you know of uses localization (it doesn't have to be using the methods outlined on this page), please add it to this list.

• German NL Project - de.openoffice.org - Custom header - HTML
• French NL Project - fr.openoffice.org - Custom header - HTML
• Serbian NL Project - sr.openoffice.org - Custom header and navigation - JS
• Swedish NL Project - sv.openoffice.org - Custom navigation - HTML