Mar
Moderator
Nice tip, make the work less.
currency switcher
- Thread starter George96
- Start date
Direct Webstore
Well-Known Member
Mar
Moderator
I saw some articles about different currency switchers having different effects in loading speed. I will test it out.
chris37
Well-Known Member
24px x 24px ? Your screenshots flags they look nice but they are not square,(not in naked eye ,I don't know if you use this phrase is English language
)What dimensions have? I like them they size you have them.
Direct Webstore
Well-Known Member
Actually, I am, right at this minute trying 16x16. The 24x24 was too big. Maybe 20x20 ... still experimenting.24px x 24px ? Your screenshots flags they look nice but they are not square,(not in naked eye ,I don't know if you use this phrase is English language
What dimensions have? I like them they size you have them.
Flags are rectangular.
chris37
Well-Known Member
That I mean, 24x24px how you make them rectangular?
chris37
Well-Known Member
Mine was 36×43 px and I scale them down with the css code provide by them in the article.
Direct Webstore
Well-Known Member
Blank transparent spaces top and bottom ...
I need to adjust the line height too.
I need to adjust the line height too.
chris37
Well-Known Member
Thank
Direct Webstore
Well-Known Member
chris37
Well-Known Member
Thanks
I download this from the original alidropship currency switcher and I cut them on Photoshop.
Direct Webstore
Well-Known Member
I've settled on 20x20 and moved the visible part up into the transparent part to center it.
.. open
Example image...
Looks the same on mobile too.
Mission complete!
.. open
Example image...
Looks the same on mobile too.
Mission complete!
chris37
Well-Known Member
Nice i will come back later with mine
Direct Webstore
Well-Known Member
Not yet! I need to change that blue colour on the active currency to match my theme.
Direct Webstore
Well-Known Member
One last thing. Change this ...
... to this ...
by adding this ...
.select2-container--default .select2-results>.select2-results__options {
max-height: 100%;
}
So the whole CSS is ...
select,.select2-container .select2-choice, .select2-container .select2-selection {
background-color: #f7f7f7;
border-radius: 18px;
width: 90px;
}
.select2-container--default .select2-results>.select2-results__options {
max-height: 100%;
}
... to this ...
by adding this ...
.select2-container--default .select2-results>.select2-results__options {
max-height: 100%;
}
So the whole CSS is ...
select,.select2-container .select2-choice, .select2-container .select2-selection {
background-color: #f7f7f7;
border-radius: 18px;
width: 90px;
}
.select2-container--default .select2-results>.select2-results__options {
max-height: 100%;
}
Direct Webstore
Well-Known Member
Looks OK in Mobile too ...
Direct Webstore
Well-Known Member
But I bet I get an email from Google Console saying the "Clickable elements are too close together".
Shut up Google.
chris37
Well-Known Member
I get this message every time, so I choose to dont do nothing about it
Mar
Moderator
How did you set it so that it will show the currency code like this instead of the default country and currency?Not yet! I need to change that blue colour on the active currency to match my theme.
View attachment 12938