Change Language Button on website created with RH 2019 (classic version)

[FraPas]

Hi all,

I am developing a website for documents using RH 2019 (Classic Version) and I am having trouble to insert buttons to let the user to change the language (for example: switching between Italian and English). I inserted this code:

<div class="engLang">
<input onclick="setLanguage('ENG')" type="image" name="image" width="30" src="../Azure_Blue/engicon.png" />
</div>
<div class="itaLang">
<input onclick="setLanguage('ITA')" type="image" name="image" width="30" src="../Azure_Blue/itaicon.png" />
</div>

into the <div class="topic main"><div class="functionholder"><div class="buttons"> into topic.slp file and it works for desktop version of the website.

I want to insert the same buttons into the mobile and landscape version of the website and I tried to insert buttons into <div class="functionbar"><div class="nav"> for the landscape version and into <div class="mobilespecialfunctions"> for the mobile version but it does not work as the other buttons (basically my buttons are always displayed in every version of my website). I saw that the other buttons, for example <a class="menubutton">, have some attributes but I cannot understand how to use them on my custom buttons. Here is the code for <a class="menubutton"> for the mobile version:

<div class="mobilespecialfunctions" data-class="sidebar-opened: $mc.isSidebarTab(@KEY_ACTIVE_TAB); mobile-header-visible: @.l.mobile_header_visible; searchpage-mode: @Key_ACTIVE_TAB == 'fts'" data-attr="aria-hidden: !@KEY_SCREEN_PHONE" role="banner">
<a class="menubutton" data-attr="href: '#'; title:@KEY_LNG.NavTip; aria-hidden: !@.l.mobile_menu_enabled" data-click="$mc.toggleSideBar()"
data-if="@.l.mobile_menu_enabled === true">
<span class="rh-hide" aria-hidden="true" data-html="@KEY_LNG.NavTip"></span>
</a>

</div>

Could you please help me to understand how to show only the proper buttons on the specific version of my website like the other ones?

Thank you in advance for the help.

[Jeff_Coatsworth]

Maybe someone on here knows enough Javascript to help you out, but I suspect you're going to need to find a programmer to assist in this.

[Amebr]

I think you just need to add your classes into the appropriate spot in the stylesheet. Find the section in the layout.css that contains the body.media-desktop div.header div.brs_next style and add your styles in the same format. That should hide your desktop icons from your mobile views.

[FraPas · Accepted solution]

Hi @Jeff_Coatsworth , Hi @Amebr , Thanks for the help. I solved adding the "Change language" buttons in the correct place into Topic.slp file without modifying the layout.css or layout-rtl.css file. Using the web browser's developer tools, I found that the "functionbar" object is in common to all the layouts (media-desktop, media-landscape, media-mobile). So I decided to not use media-landscape layout and I add my custom buttons into "mobilespecialfunctions" object for media-mobile layout and into "functionholder" object for media-desktop layout. To not use media-landscape layout I choose 1023px as limit for both "Phone maximum width" and "Tablet maximum width" properties set into Layout Customization: <LayoutName>\Media Query. Thanks to both of you for the help