Change flag size

Search…
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 :
1
.weglot-flags.flag-3 a::before, 
2
.weglot-flags.flag-3 span::before {
3
    background-image: url("../images/circular_flag.png");
4
    width: 24px !important;
5
    height: 24px !important;
6
    -webkit-background-size: auto 24px !important;
7
    background-size: auto 24px !important;
8
}
Copied!
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 :
1
/* For English flag */
2
.weglot-flags.flag-3.en > a::before, 
3
.weglot-flags.flag-3.en > span::before {
4
    background-position: -2520px 0 !important;
5
}
6
​
7
/* For Portuguese flag */
8
.weglot-flags.flag-3.pt > a::before, 
9
.weglot-flags.flag-3.pt > span::before {
10
    background-position: -4344px 0 !important;
11
}
Copied!
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
1
/* Customize English flag */
2
.weglot-flags.flag-3.en > a::before,
3
.weglot-flags.flag-3.en > span::before {
4
    background-position: -1680px 0 !important;
5
}
6
​
7
/* Customize Portuguese flag */
8
.weglot-flags.flag-3.pt > a::before,
9
.weglot-flags.flag-3.pt > span::before {
10
    background-position: -2896px 0 !important;
11
}
12
​
13
.weglot-flags.flag-3 a::before,
14
.weglot-flags.flag-3 span::before {
15
    width: 16px !important;
16
    height: 16px !important;
17
    -webkit-background-size: auto 16px !important;
18
    background-size: auto 16px !important;
19
}
Copied!
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
1
/* Customize English flag */
2
.weglot-flags.flag-3.en > a::before,
3
.weglot-flags.flag-3.en > span::before {
4
    background-position: -5040px 0 !important;
5
}
6
​
7
/* Customize Portuguese flag */
8
.weglot-flags.flag-3.pt > a::before,
9
.weglot-flags.flag-3.pt > span::before {
10
    background-position: -8688px 0 !important;
11
}
12
​
13
.weglot-flags.flag-3 a::before,
14
.weglot-flags.flag-3 span::before {
15
    width: 48px !important;
16
    height: 48px !important;
17
    -webkit-background-size: auto 48px !important;
18
    background-size: auto 48px !important;
19
}
Copied!
Calculation for English flag: (48/24)*-2520 = -5040
Calculation for Portuguese flag: (48/24)*-4344 = -8688
Language Selector Styling
Exclude a Custom Post Type
Last modified 2yr ago
Copy link