Installing Canadian Laguage/Flag - Almost there, Just flag missing.

[Will H]

I am finally getting around to installing the Canadian Language. I followed information in some posts (back from 2017) and was able to get the base language installed. In Admin, all works as expected.

 

On the website, I can select the Language properly and the currency - however the flag is not shown. As I understand it, the flag used for Admin section is not the flag used for the language selection. I have edited the sprites_flags.png file, I have added the flag to the bottom of the image. I am supposed to look at the Cubecart.css file and round line 231 I am supposed to read and follow the schema. I really don't see the pattern indicated or understand what I am reading.

I am using a purchased skin from the marketplace, however in checking foundation, I have the same issue. Thank you in advance.

Will

[bsmither]

From CubeCart 6.2, for the Foundation skin, the sprite method of showing flags on the storefront has been replaced by a much simpler and more straightforward method.

However, it seems you are using a skin that does, in fact, use a sprite.

A sprite is a larger image that is concealed behind a opaque panel, but the panel has a 16x11 transparent window in it. The sprite image is moved up/down/left/right to precisely show only a portion of the total image through the window of the panel.

The CSS rule uses a pattern of offsets that moves the image in such a way as to show the related country flag through the window. For example, the US flag has an offset of moving the image up by 66 pixels - thus allowing the seventh section (zero is the first section) of the whole image to be seen through the window.

So, if the Canadian flag was added to the bottom of the sprite, its offset is -11 times the section number. The sprite originally had ten sections, numbered 0 through 9. The offsets are then 0, -11, -22, etc. The Canadian flag should now be section number 10, so the offset would be -11 times 10 equals -110. The rule to add would be:
span.flag.flag-CA {background-position: 0 -110px}