Custom Styling

Locadapt provides six default styling options for the language selector, optimized for high conversion rates. However, you can also customize the appearance to match your website’s design or modify its placement if needed.

​

Default Styling Options

Locadapt offers the following pre-built styles:

1. Default: A light-themed button with flag icons and language names

2. Default-Dark: A dark-themed button with flag icons and language names, suitable for dark mode websites

3. No-Flags: A light-themed button without flag icons, showing only language names

4. No-Flags-Dark: A dark-themed button without flag icons, showing only language names

5. No-Styles: A basic unstyled button with flag icons and language names, allowing for easy custom styling

6. No-Styles-No-Flags: A basic unstyled button without flag icons, showing only language names and providing maximum customization flexibility

You can select these options in the Locadapt dashboard under the “Configuration” page.

​

Custom CSS Styling

If you need more control over the appearance or placement of the language selector, you can use custom CSS rules. To ensure your styles take precedence, you may need to use !important in some cases.

To apply custom styles, update your CSS script or add inline styles to your website. For WordPress or other CMS platforms, you can add these styles to your theme’s custom CSS section.

​

Targetable Elements

Here are the main elements and classes you can target for customization:

• #langSelector: The main container for the language selector
• #languageList: The dropdown list of available languages
• #selectedLanguage: The currently selected language button
• #selectedFlag: The flag icon for the selected language
• #selectedName: The name of the selected language
• #langSelectorChevron: The dropdown arrow icon
• .lang-option: Individual language options in the dropdown
• .flag-icon: Flag icons for each language
• .lang-name: Language names in the dropdown

​

Example Custom Styles

Here’s an example of how you might customize the language selector:

/* Custom positioning */
#langSelector {
  bottom: 20px !important;
  right: 20px !important;
}

/* Custom button style */
#selectedLanguage {
  background-color: #f0f0f0 !important;
  border: 2px solid #333 !important;
}

/* Custom dropdown style */
#languageList {
  background-color: #f9f9f9 !important;
  border: 1px solid #ddd !important;
}

/* Custom language option style */
.lang-option:hover {
  background-color: #e0e0e0 !important;
}

​

Advanced Customization

For more complex customizations, you can modify the HTML structure of the language selector. The basic structure is as follows:

<div id="langSelector" class="language-selector">
  <div id="languageList" class="lang-list">
    <!-- Language options are dynamically inserted here -->
  </div>
  <div id="selectedLanguage" class="lang-selector-button">
    <div>
      <span id="selectedFlag" class="selected-flag flag-icon"></span>
      <span id="selectedName" class="selected-lang-name"></span>
    </div>
    <svg id="langSelectorChevron">
      <!-- SVG path for the dropdown arrow -->
    </svg>
  </div>
</div>

You can modify this structure or add additional elements as needed. Just ensure that the essential IDs and classes are maintained for Locadapt to function correctly.

​

Best Practices

1. Test your custom styles across different devices and browsers to ensure compatibility.
2. Be mindful of accessibility when customizing colors and contrast.
3. If you’re hiding flags or modifying the selector significantly, ensure that language selection remains intuitive for users.
4. Consider using CSS variables for easy theme switching or dynamic styling.

For more detailed information on Locadapt’s styling capabilities or for assistance with complex customizations, please contact our support team.