5. Multilingual Support

Enabling Multilingual Support

This training video ahows how to enable the multilingual support functionality in an Info-Point,


Configuring Multilingual Support

This video shows how to configure an Info-Point to use multilingual support once the modules have been enabled.


Select language to Use

This video demonstrates how to select an additional language for use on the Info-Point. In this demonstration we use Welsh.


Displaying the Language Selector Block

This video shows how to enable the language selector block so Info-point visitors can select the language of their choice.


Reset Menu

This video shows how to reset the menu items of the Info-Point back to a single main menu.


First Multilingual Content

This Video shows how to create your first multilingual content on the Info-Point.


Creating Multilingual Panel Pages

This video shows how to create multilingual panel pages. It includes how to add panel pages to a translation set, which is a "gotcha" that prevents translation working correctly if this step is missed out.


Adding multilingual content to panel pages

This video shows how to add multilingual content to panel pages.

Make sure you work in the language you have selected for the panel page or you might find it difficult to add your content, which must also be in the same language (or language neutral).


Custom style for the language block on a multi-lingual Info-Point

This video explains how to improve the styling on the lanuguage switcher block to emphasise the selected language and remove a spurious strikethrough on translated content.

You will need to cut and paste the following CSS (or your own version) to implement the change.

#block-locale-language li a  {                   /*Select the language switcher block and override the non translated settings */
text-decoration: none;                        /*Do not use decoration such as strike - through */
color: #ffffff;                                    /*Set the text to be white */
}                                             /*Close the statement */

#block-locale-language li a.active {               /*Select the active language in the language switcher block */
background-color: #2573ae;                         /*Set the background colour to be pale blue  */
font-weight: bold;                            /*Make the font bold */
color: #ffffff;                                 /*set the text to be white */
}                                               /*Close the statement */


Custom language links

This rather long video shows how to create custom language switcher buttons.  The supporting text below is the code used in the video.

####### HTML ######

<!-- Custom Button to go to Cymraeg page --!>
<ul class="my-custom-button">
<a href="/node/85?language=cy" > Cymraeg </a>

<!-- Custom Button to go to English page --!>
<ul class="my-custom-button">
<a href="/content/welcome.html?language=en" > English </a>

####### CSS #######

/*Now to make these links look like buttons */

ul.my-custom-button li a{             /*Select the link inside the list in my-custom-button class */
display: block;                    /*Display it as a block so the clickable area of the link can be set */
width: 230px;                    /*Set the block width in pixels */
height: 50px;                    /*Set the block height in pixels */
color: #ffffff;                    /*Set the text colour to white */
background-color: #2573ae;            /*Set the background colour to blue */
text-align: center;                /*Align the text to the centre */
padding-top: 20px;                /*Add 20 pixels of white space to the top of the button */
font-size: large;                /*Set the font size to large */
border-radius: 10px;                /*Round the corners of the block */
box-shadow: 10px 10px 5px #888888;        /*Add a drop shadow to give depth */
float: right;                    /*Ask the button to float to the right hand side of the screen */

ul.my-custom-button {
list-style-type: none;                /*Clear the list bullet */
padding-right: 20px;                  /*Add 20 pixels of padding to the right of the button*/




Subscribe to 5.   Multilingual Support