![]() Adjusting the flag size for a language switcher Displaying WPML’s Language Switchers in Custom Locations You can also choose a custom size for all the flags in a language switcher when you add or edit the language switcher. In such cases, you can turn off automatic resizing by adding the following to your wp-config.php file:ĭefine( 'WPML_DO_NOT_RESIZE_UPLOADED_FLAGS', true ) Sometimes, you might not want to resize your flags, perhaps because they are handled by CSS or JavaScript or you want to display an animated GIF. Uploading a custom flagīy default, flags are automatically resized to 18×12 pixels for consistency. If you want to upload a custom flag, you can do so by going to WPML → Languages and clicking Edit Languages. You can configure your language switcher to display a country flag. Menu language switcher after applying the custom CSS Customizing Language Switcher Flags Now, the width of the list items is improved, as displayed in the following image. There is no need to edit your theme’s CSS file, simply add custom rules to the Additional CSS section under the Language switcher options. You can easily fix this by using the wpml-ls-menu-item CSS class. Flags-only language switcher with Twenty Sixteen theme As you can see in the following image, the width of the menu items is oddly large. This simplifies the customization of your menu switcher items (links).įor example, if your site uses the Twenty Sixteen theme and your menu switcher displays only the languages’ flags, the front-end rendering will be odd. Specifically for menu language switchers, WPML uses the CSS class wpml-ls-menu-item. Menu language switcher on the front-end Customizing Menu Language Switchers This way, your theme renders the language switcher just like other menu items.īasically, this allows the language switcher to look better on your site, taking on the look of your theme’s CSS rules. Instead, it injects the language switcher elements into the menu structure. WPML does not render language switchers with its own HTML. HTML Structure of Menu Language Switchers However, it does show you the effect of the different options, color settings, order, and content. The preview is a “schematic.” It does not load the front-end CSS (it is not a good idea to load in the WordPress admin), so the actual language switcher will be styled differently. Settings for footer language switcher Live Preview Showing Language Switcher OptionsĪs you change the settings of the language switcher, the preview updates. This allows you full and independent control over what it includes and how it looks.įor example, the following image displays a dialog box with settings for the footer language switcher. Full Control Over Each Language SwitcherĮach language switcher type has its own settings. Separate sections for each type of a language switcherĮach section has its own button to Add a new language switcher, a Pencil icon to edit the existing switcher, and a Trash icon to delete a language switcher. When you configure a language switcher, you can see a working preview of it, as displayed in the following image. For example, you can display only flags in the menu, but flags and the language name in the footer. The options you apply to language switchers in each location only apply to that language switcher. You can add language switchers to 3 different places on your site: in the menu, in a widget, or in the footer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |