qTranslate horizontal flaggs

The language-choise flags can be presented in a nicer way, with horizontally aligned flags:
! update from 2/4/2014 !
It is best to first create a “Child Theme”.
Next, add the following lines to your Style.css (in ‘Design’ -> ‘Editor’):

/** flags horizontal */
ul.qtrans_language_chooser { list-style: none; margin: 0; padding: 0; }
ul.qtrans_language_chooser li { display: inline-block; float: left; position: relative; margin: 0; padding: 0; }
a.qtrans_flag { margin-left: 10px; margin-top: 0px }

ul.qtrans_language_chooser is the List of flags itself. list-style: none hides the enumeration point in front of each flag, margin and padding move the position. It is not needed here, because the enumeration points are invisible.
ul.qtrans_language_chooser li stands for each list entry. display: inline tells that the flags are displayed within the list, float: left that they are positions left-bound and position: relative that the following position settings are to be interpreted relative to the other page elements.
a.qtrans_flag is the flag itself (actually the link), margin-left: 10px adds 10 pixel of space left of each flag, while margin-top: 0px removes all pixels above the flags.

You can use any of the usual CSS List attributes.

23 thoughts on “qTranslate horizontal flaggs

  1. Hey There,

    As you can see i implemented the css and the flags on my website are now horizontally aligned.

    Is there a way i can play with their position? I would like the flags to be placed a bit higher and more to the left.

    It would be great if you could help me!

    Thanks in advance!

    • Hey,

      sure, just manipulate the ‘ul’-element like this:
      ul.qtrans_language_chooser { list-style: none; margin: 0; padding: 0; position: relative; left: 5px; top: -34px; }
      Specifying position tells the style to interprete to following position settings relative to the placement of the list on the page – so that changing the window size moves the list accordingly and it stays in place.
      The Position settings ‘left’ and ‘top’ move the list. You can use negative values here as well.
      To see the effect of the choosen values I recommend using the plugin ‘firebug’. This allows you to interactively set values and see their impact immediatly.

  2. Hi, could youhelp me with my problem?
    Whatever code I insert into style.css, – no effect on language chooser on the page. I tried to get rid of bullet points, align the choose the page, make the images horisontal – no reaction. Would be really grateful if u could advise.

    • Hi,

      how did you added the code? I recommend doing it via the admin interface: Tab Appearance (was renamed from “Design”?), tab Editor, paste the code here.

  3. Hallo,

    ich habe es jetzt mit Hilfe Ihres Blogs geschafft die Fahnen ganz links oben (oberhalb meines Logos) zu platzieren, allerdings vertikal. Wenn ich die obenstehende Code ins css kopiere (ganz unten), verschwinden die wieder. Was mache ich falsch? Wo genau soll der Code hinkopiert werden?

    Vielen Dank im Voraus

    • Hi,

      im Admin-Bereich gibt es links einen Tab, der inzwischen “Appearance” genannt wird, darauf klicken, dort den Punkt “Editor” auswählen. Hier dann den Code hineinschreiben.

      Hoffe es klappt so!

    • You are welcome 🙂
      Uff, ie is in many cases not sticking to the standard. It depends as well which i.e. version you use.
      I simply decided not to bother and support ie. One solution could be to detect which i.e. is used and implement a variant for that i.e. version, which is used alternatively … or find a solution which works for all, which is mostly not possible. For me: To much hustle!

  4. Hi,
    I made my own flags and substituted them in the flag folder. They are uploaded correctly but are so small.How can I make the flags bigger?


    • Hi,

      the images can be resized with:
      a.qtrans_flag_de {background-size:18px 19px;}
      where 18px is the width and 19px is the height. Strangely the image is set as the background of a cell.
      Maybe you have to resize the borders of that cell, which you can do with the additional properties:
      width: 20px heigth: 20px
      in the same element.
      So combined it would be:
      a.qtrans_flag_de {background-size:180px 19px; width: 200px heigth: 20px}

      Good luck!

  5. Hello
    I have similar problem I use qTranslate plugin and all work just fine except one thing when I put all flags on header below of top line flags are visible but NOT possible to click on any flag, in other hand if I move all flags out of header and relocate them on background all work fine. I don’t understand where is problem, any help.

  6. Patrick,

    I found your article very useful. Moreover, thank you for sharing your knowledge with the online community.

    Following your instructions, I successfully managed to align the language icons/text horizontally. However, there remains a small problem; its not mobile friendly. You can view the site at http://www.juzlova.cz

    Have you any advice on how I may fix this, your time and effort is very much appreciated.

    Thank you in advance

    • Hi,

      I guess for that you have to change the template for the mobile version – but I did not look into how to do that, sorry.
      However, your nice site does not look bad (in iOS 8.1 using Chrome).

      And thanks for the compliments!

Leave a Reply to patmuk Cancel reply

Your email address will not be published. Required fields are marked *