qtranslate plus positioning

Sparkling
1

Hi there,

I have a question about positioning the qtranslate plus pluging. Currently I placed the widget in my sidebar… that´s not very elegant.

Do you know how I can place the language symbols next to my navigation bar on top of the page? And how can I place the language flags horizontally as I did in the attached Screenshot?

Thanks in advance!

Here´s a link to my page: www.woodberg.de/blog

2

There must be some shortcode or code snipped provided by this plugin developer that you can use as there are no widget are in the header. When you find this shortcode, make sure to add it inside header.php right after <?php sparkling_header_menu(); ?> and notify me. I will try to style those flags accordingly but it is possible that they will behave differently when placed in menu and maybe there won’t be any customizations required. Will see.

3

Thank you!

I put the code from their faq´s in the header.php as you said! I´m not sure where to exactly put the css lines to remove the bullets or to get flags instead of letters.

HOW DO I MAKE THE QTRANSLATE WIDGET PRETTY? The qTranslate Widget creates a list, which can be formatted to be vertical or horizontal. The Code generated looks as follows: ``` ```

So to remove bullet points, add this CSS line:
.qtrans_language_chooser { list-style-type:none }
A Horizontal List can be made by adding this CSS line:
.qtrans_language_chooser li { float:left; margin-right:3px }
A border around the flags can be added with:
.qtrans_flag { border:1px solid #b6b6b6 }
The best way if to learn CSS and customize it to match your needs.

4

This is not the right code because it shows output but you can see that those flags are pointing to pages that doesn’t exist on your website. There must be some PHP code that generates, so links to translated pages gets generate dynamically.

And this code also looks outdated as it doesn’t even work with your existing sidebar widget.

5

Thanks for your help so far!

I think I finally found the right code and put it header.php

6

Thanks for your help so far!

I think I finally found the right code and put it in header.php. So maybe now you can help me style it.

7

Add this code to Theme Options - Other - Custom CSS.

.navbar-default .navbar-collapse {
  float: right;
}

ul#qtranslate-chooser {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul#qtranslate-chooser li {
  display: inline-block;
  padding: 0 10px;
}

@media (min-width: 768px) {
  ul#qtranslate-chooser {
    margin-top: 27px;
  }
}

Language selector will be display on the left of menu items instead of right side. I done this on purpose because there would be many problems with layout on tablets, smartphones and other mobiles devices.

8

Man, you´re awesome. Thanks for this extraordinary support. You don´t know how much I appreciate this!!!