Figure 1: UI Theme with Language Selector

  1. Place the following code in "Sub Header" in DX 8 Plain Theme. Change line 2 and line 3 #appResource with country flag images.

    <div id="languages">
        <li><a href="?_lang=en_US" class="btn waves-effect btn waves-button waves-float"><img  style= "height:30px;width:40px" title="English" src="#appResource.US-United-States-Flag-icon.png#"/></a></li>
        <li><a href="?_lang=pt_BR" class="btn waves-effect btn waves-button waves-float"><img style= "height:30px;width:40px" title="Portuguese" src="#appResource.PT-Portugal-Flag-icon.png#"/></a></li>
    </div>
     
    <script>
    $(function(){
        $("#page > header > div.navbar-inner > div > div.nav-no-collapse.header-nav > ul").prepend( $("#languages li") );
    });
    </script>
  2. Upload country flags using "App Composer" > "Resources".


Download Sample App


  • No labels