[solved] flags on changelanguage 2.1.1

Hello to everybody,
I just installed changelanguage v. 2.1.1 stable on contao 3.0, set up the website tree structure with two separate language roots and added a change_language module.

Everythong is working fine, except that I expected to see a change_language layout with language flags. Instead, I get a text-only layout like

Code:

---

<div class="mod_changelanguage block">
<ul class="level_1">
<li class="lang-en first">EN
<li class="lang-it last"><span class="lang-it last">IT</span>[/list]
</div>

---

This is how I configured my change_language module, which is shown in the website header:

http://s4.postimage.org/5tprmy8gp/Is...3_10_28_23.jpg

I didn't add any CSS specific attribute except position and margin, in order to put the selector in the top right corner of the page.

The question is: how can I (and can I?) change from text-only to flags-style language menu?

Thank you
Marco

I'm very surprised nobody could answer to this question, since I suppose everybody who uses this extension for multi language actually wants flags, and not language tags, to be shown :?

I'm pretty sure it's just a simple tweak, but I can't figure it.

Hi,

Quote:

---

Originally Posted by marco.zanetti

I'm very surprised nobody could answer to this question, since I suppose everybody who uses this extension for multi language actually wants flags, and not language tags, to be shown :?

---

Do you want to show a picture for each language?

CHANGELOG of changelanguage 2.0.0's contains a line:

Code:

---

- Removed country flag icons, they can be added using CSS background images

---

Isn't it an answer to your question??

Best regards.

Hello Taca,
yes, this definitely answers my question :-) I think I can get the flag by downloading Open Source pictures for each flag and then filtering in the CSS by the hreflang field, right?

Then, where have you put those flag's files?

On Contao 3, system folder is protected by .htaccess default against direct access .
(For example, if you allow access via http://example.net/contao/system/.../dir/file.png,
you should put /contao/system/.../dir/.htaccess to allow access.)

Shouldn't I load the files I need in "/files/themes/themename/folder" using the upload utility? Then I can map them with a relative path, isn't it?

Quote:

---

Originally Posted by marco.zanetti

Shouldn't I load the files I need in "/files/themes/themename/folder" using the upload utility? Then I can map them with a relative path, isn't it?

---

Yes, I think that you can do it by customizing template files of changelanguages extension.

Best regards.

Uhm... how can I avoid having the text ('EN', 'IT', 'DE' etc...) in foreground? I see it above the background picture...

I tried with a font-size=0 and fixed width and height for the DIV. I got the flag, don't see the text but, being the anchor on the text and not on the[*] element, I don't have any link either. This is quite disappointing :roll:

How do you usually configure the plugin in order to avoid such issues?

Thank you

This is the best I could obtain yet

http://img6.imageshack.us/img6/807/i...2201315002.png

I've re-read the code of changelanguage and I find out that it is difficult by customizing template file for your case.

I quit this. I removed the flags and let the "EN / IT" labels instead. Please allow me to say that a change-language extension not allowing you to easily replace the language tags with national flags is, uh, pretty useless indeed.

Thank you anyway

Hi Marco,
I currently don't use this extension but have in the past and maybe in the future. I understand the need for a flag, so was curious with your struggles. I found this post in german https://community.contao.org/de/showthr ... post204143 (I'm not a speaker), so with the help of google have figured this out and it should work.

So this is the main of it:
In module settings for changelanguage module. You tick and edit section 'Custom language texts', example below is for languages english and danish, your flags should appear without text and you just then need so some nice CSS.

Code:

---

Value = en
Label = [img]tl_files/icons/flags/england.gif[/img]

Value = da
Label = [img]tl_files/icons/flags/da.gif[/img]

---

Naturally use your own path url to your flag. I've tested this locally and it seems fine.

Quote:

---

Originally Posted by marco.zanetti

I tried with a font-size=0 and fixed width and height for the DIV. I got the flag, don't see the text but, being the anchor on the text and not on the[*] element, I don't have any link either. This is quite disappointing :roll:

How do you usually configure the plugin in order to avoid such issues?

Thank you

---

The CSS to get text out of the way is easy:

Code:

---

text-indent: -9999px;

---

It moves the content to the left and everything on the left edge of a container is hidden by default.

Hello to everybody!

First of all, thank you for coming into the discussion! I tried to read the german topic, I even tried to translate part of it but sincerely couldn't get what the solution is :-(
I then tried to use geung's code but I don't know where to put it! Finally, I tried with "text-indent: -9999px". It works, I mean, the text disappears, but so does the anchor, and then I see the flags but they're not clickable at all :-( :-( :-(

So, to make it short: I don't know what to do yet.

This is where the codes goes, within your Change Language module - see image. (not sure whether you have to tick default boxes)

This worked flawlessly, awesome! :-D

Thank you very very much! I owe you a beer, at least!

No problem man ;)
I'm just passing on good karma. I'm sure It'll be you one day.