Flags disorder

[Goyzueta]

Hi to everyone, first of all Merry Christmas!

I had a problem, I just configured CubeCart v6 with 11 languages and the flags appeared in different order and some times the same flag for different languages. Changing to any language work well, its only the flag appearance. Any suggestions will be helpful.

Thank you very much for your attention.

[bsmither]

Welcome Goyzueta! Glad to see you made it to the forums.

There is a difficulty with the Foundation skin in that the flag situation requires a bit of image editing.

Let's look at the image at /skins/foundation/images/sprite_flags.png. It is used as a sprite by having the CSS move the image up or down so that a specific part of the image peaks through a flag-sized window in the header.

There are ten flags already built, and you have an eleventh language that needs a flag. Did the language pack you downloaded come with it's flag?

If not, fetch the latest package of CC5. That package has hundreds of flags.

You will need to use an image editor to paste the eleventh flag to the bottom of the sprite image.

Next, let's look at the CSS file at /skins/foundation/css/cubecart.css. At line 224, you will find a list of position offsets for each flag. Having added the eleventh flag to the sprite, we now need to add the CSS rule to position it.

[Goyzueta]

 

Thanks for your response bsmither it means a lot for new people like me to have some support.

I´m sorry to get back so late, but I went on vacations and forgot my administrator user name and password. So I got another problem first to solve, because the email tool to reset the psw didn't work and took me some time to solve. That´s why I´m going to comment this issue too, because somebody can pass thru this, like me a newbie.

I learn how to force directly the database in order to access the administrator Cubecart panel ... 

https://support.cubecart.com/knowledgebase/article/View/205/0/i-cant-login-to-the-admin-side-of-my-store-and-the-password-reset-tool-doesnt-work

I did all steps but still, at log in didn't work my changes. The thing I discovered, after a while (days)  that didn't work is that I was using a simple info:

user: admin

psw: admin123

Once I change the info to a more complicated, not using part of the user and not consecutive numbers, work perfectly. I hope it will help somebody, because is frustrating to go nowhere doing all instructions you receive.

 

BACK to the problem with the flags ...

First, I thought, maybe there was a restriction script on the number of languages you can use. So I start deleting languages from 11 to 8, because all first languages never change their flag, in the following order Deutsch, Dansk, English (UK), English (USA), Español, Française, (עברית (ישראל and Dutch. I wanted to have Italy, Russia and Swedish too, but with this last the flag always change to the german flag.

But the thing is that, no matter if I delete the languages to 6, the Italy language all ways get the german flag.

1) I check the .png file for the Italy flag and its correct, there is no error in the image, the flag is green, white and red.

2) I added row 234 in cubecart.css file:   234 span.flag.flag-IT {background-position: 0 -110px}

218 span.flag {
219    display: inline-block;
220    width: 16px;
221    height: 11px;
222    background:url(../images/sprite_flags.png) no-repeat
223 }
224 span.flag.flag-DE {background-position: 0 0}
225 span.flag.flag-ES {background-position: 0 -11px}
226 span.flag.flag-FR {background-position: 0 -22px}
227 span.flag.flag-GB {background-position: 0 -33px}
228 span.flag.flag-IL {background-position: 0 -44px}
229 span.flag.flag-NL {background-position: 0 -55px}
230 span.flag.flag-US {background-position: 0 -66px}
231 span.flag.flag-TR {background-position: 0 -77px}
232 span.flag.flag-DK {background-position: 0 -88px}
233 span.flag.flag-PT {background-position: 0 -99px}
234 span.flag.flag-IT {background-position: 0 -110px}
235 .back-to-top {
236    position: fixed;
237    bottom: 3em;
238    right: 0px;
239    text-decoration: none;
240    color: #000 !important;
241    background-color: #EBEBEB;
242    padding: 0.5em 1em;
243    display: none;

244    z-index: 100;
245 }

 

No good results, any idea?

Thanks!

 

[bsmither]

Deleting languages will have no effect on how the flags sprite gets displayed. Adding languages will have no effect on how the flags sprite gets displayed.

It is a combination of editing the actual flags sprite (and forcing your browser to reload that image instead of letting it use its internal cached copy), and editing the CSS file to position the sprite appropriately (and forcing your browser to reload that CSS file instead of letting it use its internal cached copy).

The edited CSS rules posted above looks good. The position offsets say the PT flag starts 99 pixels down from the top of the flags sprite, and the IT flag starts 110 pixels down from the top of the flags sprite.

If the DE flag is shown, then the browser does not have the edited CSS file (the browser is not aware of the new IT rule), or somehow the HTML is not getting the IT characters applied to the flags sprite image tag.

May we have a web address to check?