Weglot
WebsiteGithubSlack
  • Developer Documentation
  • WordPress
    • Getting Started
    • Helpers Functions
    • Hooks
      • Translations Hooks
      • Other Hooks
    • Use cases
      • Lang attribute
      • Translate link
      • Implementing Custom Link Translation
      • Wp-rocket Lazyload
      • Deactivate Weglot on Elementor
      • Weglot translate on Elementor
      • Language Selector Styling
      • Change flag size
      • Exclude a Custom Post Type
      • Exclude the search page
      • Exclude draft or private status post
      • Plugin Woocommerce: Translate all email sent to customers
      • Plugin WooCommerce: Translate Product URLs
      • Use custom language code (URL, lang and hreflang attribute)
      • Theme OceanWP: Use language selector in the main menu
      • Theme Avada: Use language selector in the main menu
      • LinkedIn Share Post: Translate oEmbed WP URL
      • Hide button on excluded page
      • Auto switch only for HomePage
      • Proxify Url
      • Translate pdf for Woocommerce pdf invoice
      • Translate pdf with Gravity pdf
      • Translate Dublin core meta (or other meta)
      • How to not translate specific ajax action
      • How to get translated url programmatically
      • How to set WP locale based on Weglot current language
      • How to translate mail from Photo Reviews for WooCommerce
      • How to translate schema from schema.org generate by Yoast plugin
      • How to translate email sending by plugin WP Mail SMTP
      • How to hide the Weglot admin button for non administrator roles
      • Exemple of snippet to translate search from JetSearch plugin
      • Example of snippet to translate your checkout element (override/added by the Funnel Builder plugin)
      • LScache
      • How to fix live builder issue with Weglot
      • Add translated url to Rankmath sitemap index
      • Advanced Woo Search X Weglot
      • Conditionally Disabling Weglot Translation for Specific URLs
    • Weglot filters
      • weglot_translate_email
      • weglot_cancel_init
      • weglot_translate_email_languages_forced
      • weglot_menu_parent_item_title
      • weglot_active_current_menu_item
      • weglot_ajax_no_translate
      • weglot_active_translation_before_process
      • weglot_active_translation_before_treat_page
      • weglot_debug_file
      • weglot_autoredirect_only_home
      • weglot_autoredirect_skip
      • weglot_remove_google_translate
      • weglot_add_hreflang
      • weglot_get_replace_modify_link
      • get_replace_modify_link_in_xml
      • weglot_get_flag_class
      • weglot_get_name_with_language_entry
      • weglot_get_class_dropdown
      • weglot_button_html
      • weglot_get_dom_checkers
      • weglot_replace_div_id
      • weglot_replace_weglot_menu
      • weglot_render_default_button
      • weglot_render_switcher_editor_button
      • weglot_href_lang
      • weglot_get_options_from_cdn_cache
      • weglot_get_options_from_cdn_cache_duration
      • weglot_get_slugs_from_cache
      • weglot_get_slugs_cache_duration
      • weglot_exclude_blocks
      • weglot_exclude_urls
      • weglot_get_parser_ignored_nodes
      • weglot_navigator_language
      • weglot_url_auto_redirect
      • weglot_replace_url
      • weglot_replace_link
      • weglot_ajax_replace_urls
      • weglot_proxify_urls
      • weglot_add_json_keys
      • weglot_json_treat_page
      • weglot_html_treat_page
      • Copy of weglot_xml_treat_page
      • weglot_render_dom
      • weglot_default_current_language_empty
    • Algolia integration
  • Proxy
    • Headers
  • Javascript
    • Getting Started
    • Options
    • Javascript functions
    • Language link Hooks
    • Translate iframe
    • Advanced concepts
      • Translation engines
  • CMS Specific
    • Shopify
  • API
    • Reference
  • Cookies
Powered by GitBook
On this page
  1. WordPress
  2. Use cases

Change flag size

Changing the Weglot flag size with CSS

Because Weglot has grouped all flags within a file (CSS Sprite) for performance, it can be tricky to change the flag size on your website.

1st step: With your browser code inspector, find the CSS properties who give the global flags size. It's depends to your flags settings. In this example (setting: circle flags), the finding CSS properties is :

.weglot-flags.flag-3 a::before, 
.weglot-flags.flag-3 span::before {
    background-image: url("../images/circular_flag.png");
    width: 24px !important;
    height: 24px !important;
    -webkit-background-size: auto 24px !important;
    background-size: auto 24px !important;
}

Override width, height and background-size properties with the wanted size.

2nd step: For each flag, find his background-position properties and override it. In this example, background-position properties is :

/* For English flag */
.weglot-flags.flag-3.en > a::before, 
.weglot-flags.flag-3.en > span::before {
    background-position: -2520px 0 !important;
}

/* For Portuguese flag */
.weglot-flags.flag-3.pt > a::before, 
.weglot-flags.flag-3.pt > span::before {
    background-position: -4344px 0 !important;
}

To override it, you must calculate the new property with a cross product include original size (24px), wanted size and default background-position.

New background-position = ( Wanted size / Default size ) * current background-position

Example 1: Smallest flags

Type of flags: Circle Languages: English and Portuguese Wanted size: 16px * 16px

/* Customize English flag */
.weglot-flags.flag-3.en > a::before,
.weglot-flags.flag-3.en > span::before {
    background-position: -1680px 0 !important;
}

/* Customize Portuguese flag */
.weglot-flags.flag-3.pt > a::before,
.weglot-flags.flag-3.pt > span::before {
    background-position: -2896px 0 !important;
}

.weglot-flags.flag-3 a::before,
.weglot-flags.flag-3 span::before {
    width: 16px !important;
    height: 16px !important;
    -webkit-background-size: auto 16px !important;
    background-size: auto 16px !important;
}

Calculation for English flag: (16/24)*-2520 = -1680 Calculation for Portuguese flag: (16/24)*-4344 = -2896

Example 2: Biggest flags

Type of flags: Circle Languages: English and Portuguese Wanted size: 48px * 48px

/* Customize English flag */
.weglot-flags.flag-3.en > a::before,
.weglot-flags.flag-3.en > span::before {
    background-position: -5040px 0 !important;
}

/* Customize Portuguese flag */
.weglot-flags.flag-3.pt > a::before,
.weglot-flags.flag-3.pt > span::before {
    background-position: -8688px 0 !important;
}

.weglot-flags.flag-3 a::before,
.weglot-flags.flag-3 span::before {
    width: 48px !important;
    height: 48px !important;
    -webkit-background-size: auto 48px !important;
    background-size: auto 48px !important;
}

Calculation for English flag: (48/24)*-2520 = -5040 Calculation for Portuguese flag: (48/24)*-4344 = -8688

PreviousLanguage Selector StylingNextExclude a Custom Post Type

Last updated 5 years ago