Portal UI Customization: Basic

Adding New Language Style Sheets

If you add support for an additional language to the portal, you must add the corresponding style sheets for that language.  The CSS Mill was designed to make adding languages and generating the language style sheets relatively easy.  

Each language file in the \ptimages\tools\cssmill\prop-text folder has language-specific values for font style, font size, text style, etc.  This design makes it easy to change the default font for each language.  For example, if you want the default font for the Japanese user interface to be Tahoma, add Tahoma to the "ja" language file in the prop-text folder.

After adding a language file, you must also edit the build.xml file to generate the new language style sheets.  

For example, the steps below explain how to add "Dutch" as a portal user interface language.  

  1. Navigate to the \ptimages\tools\cssmill\prop-text folder in the Image Service.  Copy one of the existing files to the same folder and rename it using the language conventions in ISO-639-1 and ISO-3166.  For example, for Dutch, rename the file to “nl”.  

  2. Open the new file in a text editor and make any necessary modifications for the new language.  For example, to add a new default font, you could change the following line:
    font.largest=20px verdana,arial,helvetica,"sans-serif"
    to:
    font.largest=21px Tahoma,"MS PGothic",Verdana,"sans-serif"
    Be sure to add the new font for each font attribute in the language file.

  3. Navigate to the \ptimages\tools\cssmill\prop-color folder in the Image Service. Add the new language's translation for the name of the color in every color properties file. For example, open the color.1.properties file and copy the last colorscheme.name entry.  Change the name according to the new language ID used in step 1.  In this example, we could copy the following line:
    colorscheme.name.zh=\\u6DE1\\u7D2B
    and change it to:
    colorscheme.name.nl=Lavendelblauw

  4. Modify the Ant build script (build.xml) to include the new language to the style sheet collection by following the steps below.  (This is the only way the script knows to create versions of the new style sheet for each language supported by the portal.)

      1. Navigate to the \cssmill directory and open the build.xml file in a text editor.
      2. Add an entry for the new language within the make_main_css target:  
        Copy the last <antcall target="make_main_language_css"> entry and paste it at the end of the list.  Modify the <param name="LANGUAGE" value="pt"/> tag by changing the value ("pt") to the language ID used in step 1 (e.g., "nl").
      3. Add an entry for the new language within the make_comm_color_css target:  
        Copy the last <antcall target="make_comm_lang_color_css"> entry and paste it at the end of the list. Modify the <param name="LANGUAGE" value="pt"/> tag by changing the value ("pt") to the language ID used in step 1 (e.g., "nl").
      4. Add an entry for the new language within the append_index_for_color target:  
        Copy the last <concat destfile="${INDEX}" append="true">mainstyle${COLOR}-pt.css=${colorscheme.name.pt}</concat> entry and paste it at the end of the list. Change the language id in the new line to the new language id by changing the value ("pt") to the language ID used in step 1 (e.g., "nl"). In our example, the new line would look like this:
        <concat destfile="${INDEX}" append="true">mainstyle${COLOR}-nl.css=${colorscheme.name.nl}</concat>
      5. Save the build.xml file and close it.

  5. Create the new style sheets by running the make_all batch file as explained in Creating New Style Sheets. To change the default style sheet used by the portal, follow the instructions under Changing the Default Style Sheet.

  6. Verify that the new language style sheets were created based on the new language property file.  Navigate to the cssmill\css directory and confirm that there are 20 new style files with the new language ID used in step 1 (e.g., “mainstyle-nl.css”).  For further verification, open the community-themes.txt file (in the \css directory) and confirm that there is a new entry corresponding to the language ID used in the new language property file.  

  7. After confirming that your changes are correct, move the new style sheet files from the \cssmill\css folder to the \imageserver\common\public\css folder used by the portal.  

  8. Restart the Java Application Server.  (The community-themes.txt file is loaded during ALI Publisher startup and stored in memory.)