Child pages
  • Internationalizing User Interface Options

Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

These notes are in draft format.

To translate User Interface Options, you will need to create a copy of the HTML templates and translate any text within, and then supply custom URLs for those templates.

The English templates are in the 'infusion' folder, in the 'components/uiOptions/html' folder. The easiest way to localize would be to create new folders beside the HTML folder (i.e. as a sibling to the HTML folder) for other languages and keep the file names the same. Then you can simply modify the 'prefix' option in your code:

fluid.uiOptions.fatPanel(".flc-uiOptions", {
	prefix: static_url + "javascripts/infusion/components/uiOptions/html-translated/",
	slidingPanel: {

To translate the strings in the drop downs:

The strings are defined as options to the UI Options component, so they can be overridden by the integrator by passing in new strings. You do this where the UI Options component is created

The tool is created by the call

uiOptions = fluid.uiOptions.fatPanel.withMediaPanel(".flc-uiOptions", {…});

The second argument contains the options for configuring the tool; this is where you would specify the strings, by adding a 'textControls' property to the object. The format for doing this is as follows:

slidingPanel: {...},
components: {...},
textControls: {
   options: {
       strings: {
           textFont: ["translatedDefault", "translatedTimes New Roman", "translatedComic Sans", "translatedArial", "translatedVerdana"],
           theme: ["translatedDefault", "translatedBlack on white", "translatedWhite on black", "translatedBlack on yellow", "translatedYellow on black"]
  • No labels