Style Language Switch Block

Permalink 2 users found helpful
I would like to change the style of my language switch block but I am not satisfied with the standard options of the internationalization add-on.

Instead of having a select-button or the flags provided in the custom templates I would like to have just clean text like «English» or «French» or «EN» …

Has anyone already done such a custom template for this block that he would like to share or has anyone an easy solution for this?

Thx 4 ur help

View Replies:
sambody replied on at Permalink Reply
I'm also very interested in having the option to have simple text (in a list for example) for the language switcher...
sambody replied on at Permalink Reply 1 Attachment
I've managed to create two custom templates that outputs something like "english français" and "en fr" respectively. Not sure it it's the best way (I'm no php programmer), but it works for me. Here's how you can add it too:
1. download and extract the attached file (see attachement to this comment). It contains switch_language/templates/text and text_short. These are the custom templates.
2. Put the folder "switch_language" in yoursiteroot/blocks (or, if it exists, just copy the template folders) - see you'll have ROOT/blocks/switch_language/templates/text and text_short
3. In you block's context menu, choose Custom template - choose Text or Text short
4. Test.
5. Now add css to your stylesheet (for example floating the list items and links to make it horizontal, add text-transform:uppercase to links, etc).

- Custom template "Text" will result in something like "english français"
- Custom template "Text short" will result in something like "en fr"
- It will result in the following html structure (and classes):

<div class="ccm-multilingual-switch-language-text">
<div class="ccm-multilingual-switch-language-text-label">Language:</div>
<ul class="ccm-multilingual-switch-language-list">
<li class="">
  <a href="" class="">en</a>
<li class="ccm-multilingual-active-item">
  <a href="" class="ccm-multilingual-active-item">fr</a>

Would be nice to have something similar in core.
Hope this helps.
chrismodlao replied on at Permalink Reply
Thanks a lot.
It was perfect for a modification.

KarlWecker replied on at Permalink Reply

I was wondering about this, too. While I was looking around online I came accross this link.

It shows how to change the apperance of the language block. In the end there are only two designs available from the start (which don't match my design ideas eather).

I don't have the solution so far, but I believe it should be possible somehow to create your own custom block skins.

Also, maybe take a look here:

KarlWecker replied on at Permalink Reply 1 Attachment

I believe the best way is to add an additional custom template (view).

just add a new folder to

and add a new view.php file. You could use the already existing templates as a startingpoint for your own creation.

I attached a view file for a simple language switch, which creates a language nav with only the county code (en | de | ru ...)

sambody replied on at Permalink Reply
Hi Karl. I already posted two custom templates - see my comment above. I put it in /blocks instead of /packages - not sure what the best choice is here. (your attachement file seems to be empty by the way)
blinkdesign replied on at Permalink Reply
has anybody worked out this on a 5.7 site yet?
i tried a few things to style the switch language block but without success.
all i want is a simple text-link like deutsch/english
thanks in advance.
grafoman replied on at Permalink Reply 1 Attachment

I came across this post.
I remade 2 templates for the language switch block for concrete 5.7. The 'text' template for the full name of the language ("français"). The 'text_short' template for the short version ("fr").

Install by adding this to application/blocks folder.
PaiviK replied on at Permalink Reply
Thank you thank you thank you!
I can style the flags and default. But I wanted the short "En" etc text, but was not skilled enough to do that myself. Your templates work fine!