qTranslate horizontale Flaggen

Die Sprachenauswahl kann man auch schöner, mit horizontalen Flaggen anzeigen lassen.

Zuerst erstellt man am besten ein „Child Theme„.

Dann einfach folgendes zur Style.css hinzufügen (unter Design -> Editor):


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

ul.qtrans_language_chooser steht für die Liste der Flaggen. list-style: none blendet den Aufzählungspunkt vor jeder Flagge aus, margin und padding verschiebt die position. Hier eigentlich unnötig, da deaktiviert.
ul.qtrans_language_chooser li ist nun jeder Listeneintrag. display: inline bestimmt, dass die Flaggen in der Liste angezeigt werden, float: left, dass diese linksbündig positioniert werden und position: relative, dass die folgenden Positionsangaben relativ zu den anderen Elementen auf der Seite interpretiert werden sollen.
a.qtrans_flag ist nun die Flagge selbst (bzw. der Link), margin-left: 10px gibt an, dass links von jeder Flagge 10 Pixel Platz sein soll, während margin-top: 0px angibt, dass über den Flaggen kein Platz reserviert wird.

Hier kann man natürlich alle gängigen CSS Listenattribute nutzen.

23 Gedanken zu “qTranslate horizontale Flaggen

  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?

    thanks

    • 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.
    Thanks

  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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.