Difference between revisions of "Website/Localization"

From Apache OpenOffice Wiki
Jump to: navigation, search
m
Line 4: Line 4:
 
To localize the content of your NL project page(s), you will need the following file: [http://www.patentpending.co.nz/openoffice/locale.js locale.js].
 
To localize the content of your NL project page(s), you will need the following file: [http://www.patentpending.co.nz/openoffice/locale.js locale.js].
  
'''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)
+
'''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 <tt>project_tools.html</tt> page so that every one of your project pages will run the script so that you do not have to insert it manually in each page.
  
 
== Locale.js ==
 
== Locale.js ==
Line 64: Line 64:
 
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.
 
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.
  
* '''setActive(Integer)''' - allows you to specify (using an integer) the tab in the navigation menu that should appear selected. This will only work if you have a custom navigation array specified in locale.js.  
+
* '''setActive(Integer)''' - allows you to specify (using an integer) the tab in the navigation menu that should appear selected. This will only work if you have a custom navigation array specified in locale.js. 0 = the first tab, 1 = the second tab and so on.
0 = the first tab, 1 = the second tab and so on.
+
 
* '''localize()''' - this function should be run last of all.
 
* '''localize()''' - this function should be run last of all.
  
Line 100: Line 99:
  
 
Please use the [http://wiki.services.openoffice.org/w/index.php?title=Talk:Website/Localization&action=edit Discussion tab] or the [http://website.openoffice.org/servlets/SummarizeList?listName=dev website-dev mailing list] for feedback.
 
Please use the [http://wiki.services.openoffice.org/w/index.php?title=Talk:Website/Localization&action=edit Discussion tab] or the [http://website.openoffice.org/servlets/SummarizeList?listName=dev website-dev mailing list] for feedback.
 +
 +
== Other Strategies ==
 +
 +
=== Localizing the Navigation without JavaScript ===
 +
 +
Insert your custom navigation code at the top of your <tt>project-tools.htm</tt>. The structure is as follows:
 +
 +
<source lang="xml">
 +
<div id="navigation2">
 +
<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>
 +
</source>
 +
 +
Then, in your project CSS file, use absolute positioning to place your custom navigation over the default.
 +
 +
<source lang="css">
 +
#navigation { display: none; }
 +
#navigation2 { position: absolute; height: 140px; right: 15px; z-index: 100; background: #CBDEFA; }
 +
</source>
 +
 +
Please feel free to add your solutions to this section.

Revision as of 23:40, 20 November 2008

You can now localize the content of your NL project website with this JavaScript based solution. If users have JavaScript disabled, they will see the standard header.

To localize the content of your NL project page(s), you will need the following file: locale.js.

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 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 the most common strings.

Header

var showPositioner =		true;
var logoLinkTitle =		"Click to 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 usernameText =		"username";
var passwordText =		"password";
var rememberMeText =		"Keep me logged in";
var advancedSearchText =	"Click for advanced search";
var searchLabel =		"Search";
var searchText =		"Search Terms";
  • 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.
  • 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.
  • registerText (String) - Translation of 'Register'.
  • orText (String) - Translation of 'or'.
  • logInText (String) - Translation of 'Log In'.
  • 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'.
  • searchLabelt (String) - Translation of 'Search'.
  • searchText (String) - The text you want to appear by default in the Search textbox.

Links

var links =	[['http://www.openoffice.org/', 'Return to the homepage', 'Home'],
		['http://wiki.services.openoffice.org/', '', 'Wiki'],
		['http://download.openoffice.org/', '', 'Download']];

This is a two-dimensional array representing the links that you would like to appear in your navigation menu. Each row represents a 'tab' (link). The first column in each row is the link (URL) you want the tab to point to. The second column is the title attribute assigned to that link (shown on mouse-over). You can leave this empty if you wish. The third column is the text that appears in the browser.

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

  • setActive(Integer) - allows you to specify (using an integer) the tab in the navigation menu that should appear selected. This will only work if you have a custom navigation array specified in locale.js. 0 = the first tab, 1 = the second tab and so on.
  • localize() - this function should be run last of all.

Custom Overrides

These functions allow you to override any settings specified in locale.js on a page-by-page basis:

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

<script type="text/javascript" src="locale.js"></script>
<script type="text/javascript" src="/branding/localization.js"></script>
<script type="text/javascript">
	setPositionerText("My Custom String");
	setActive(0);
	localize();
</script>

The bare minimum code is shown below, and it must appear in this order:

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

Please use the Discussion tab or the website-dev mailing list for feedback.

Other Strategies

Localizing the Navigation without JavaScript

Insert your custom navigation code at the top of your project-tools.htm. The structure is as follows:

<div id="navigation2">
	<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>

Then, in your project CSS file, use absolute positioning to place your custom navigation over the default.

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

Please feel free to add your solutions to this section.

Personal tools