Return to previous page

WPML language area styling not picking up

This topic has 29 replies, 6 voices, and was last updated 8 years, 8 months ago ago by Jack Richardson

andreataylor

Participant

July 26, 2015 at 15:01

Hi there,

We installed WPML (language translation) and are having a problem with the styling of the languages area in the header top bar. The colours that we select in the WPML settings are not reflected on the front end. I’ve copied the response from WPML below. As you will read, they suggest getting in touch with yourselves for the reason given – is this something that you can help with?

Best wishes, Andrea

— RESPONSE FROM WPML TO THE ISSUE —

Thanks for your info.

I’m afraid of that this is a problem with the theme since it’s affecting the language switcher style by WPML.

The theme style http://www.taylorstimeless.com/wp-content/themes/legenda/style.css?ver=2.7.1 is using !important to control the language switcher style and other styles can not be applied.
You can search with “.languages-area” on this file.

On this case, I suggest contacting with your theme support because there is a lot of styles.
If I try to remove these styles on style.css, the ‘look and feel’ is really bad.

Reference: http://webdesign.about.com/od/css/f/blcssfaqimportn.htm ( What does !important mean in CSS? )

#77064 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2

28 Answers

Jack Richardson

Support staff

July 27, 2015 at 08:42

Hello,

Please clarify how you want the languages bar to be looked like.

Thank you.
Best regards,
Jack Richardson.

#77119 Copied

andreataylor

Participant

July 27, 2015 at 15:44

Hi Jack,

We set up the WPML language switcher colours as follows:
Current language font color:#ffffff
Current language background color:#6f6f6f
Other languages font color:#ffffff
Other languages background color:#6f6f6f
Background:#6f6f6f
Border:#6f6f6f
Hover colours, where appropriate, are the same colour as the normal colours.

However, on the front end, the current language colour is white, the other languages colour is grey, and the hover is black. At the moment, we are experimenting with the colours, we may wish to change these. So, I’d rather we get the theme working with WPML rather than changes to the CSS if possible.

Best wishes, Andrea

#77258 Copied
Eva Kemp

Support staff

July 27, 2015 at 16:06
Hello,

I’ve added this code in Additional CSS block in WPML > Languages:
```
#lang_sel_list a.lang_sel_sel {
    background-color: #6F6F6F !important;
   color: #ffffff;
}
```
Please check the style of the current language item.

Regards,
Eva Kemp.
#77265 Copied
andreataylor

Participant

July 27, 2015 at 18:09

Hi Eva,

Many thanks for taking a look. The current language colour is white in Safari, which we want, but grey in Firefox, and the hover colour is black (or very dark grey). We set white as the hover colour in WPML, but as I mentioned, we would like to be able to see how other colours look. Re: other languages, were you just waiting to check the current language first?

Best wishes, Andrea

#77288 Copied

Robert Hall

Support staff

July 27, 2015 at 18:29

Hello,

As I see it’s working fine in FireFox. Please update browser and clean cache.
See screenshot: http://prntscr.com/7xmx08

Regards,
Robert Hall.

#77291 Copied

andreataylor

Participant

July 27, 2015 at 21:01

Hi Robert,

Thank you, yes, I cleared my cache and it’s still not working for me. But I will check on another computer when I have access in a couple of days.

That aside, what about the hover and other languages font colours? Referring back to my first post, the colours that I set in WPML are:

Current language font color – HOVER:#ffffff
Other languages font color:#ffffff
Other languages font color – HOVER:#ffffff

Many thanks, Andrea

#77326 Copied
Jack Richardson

Support staff

July 28, 2015 at 10:36
Hello,

I’ve added this code in Additional CSS block in WPML > Languages:
```
.languages-area #lang_sel_list ul li a, .languages-area #lang_sel_list ul li a:hover {
    color: #ffffff !important;
}
```
Please check languages items now.

Best regards,
Jack Richardson.
#77415 Copied
andreataylor

Participant

July 28, 2015 at 12:11

Hi Jack,

We very much appreciate your continued help with this.. As I mentioned at the beginning, we are experimenting with the colours and the WPML settings gave us flexibility to try different options, which isn’t working with the theme. Looking at your code, I think the other languages font colour as white isn’t working, as it’s not obvious which is the current language selected, however, I couldn’t figure what part of the code to to change, to change the colour.

Basically, I would like to be able to change the:
Current language font color: normal AND hover
Current language background color
Other languages font color: normal AND hover
Other languages background color

What would be really helpful is comments with the code to let me know which bits of code change which of the above, and I then I can change the colours without coming back to you.

Many thanks, Andrea

#77438 Copied
Eva Kemp

Support staff

July 29, 2015 at 09:02
Hello,

Please find the code below:
Current language font color: normal AND hover
```
#lang_sel_list a.lang_sel_sel {
    color: #ffffff;
}
#lang_sel_list a.lang_sel_sel:hover {
    color: #ffffff;
}
```
Current language background color
```
#lang_sel_list a.lang_sel_sel {
    background-color: #6F6F6F !important;
}
```
Other languages font color: normal AND hover
```
.languages-area #lang_sel_list ul li a {
    color: #ffffff !important;
}
.languages-area #lang_sel_list ul li a:hover {
    color: #ffffff !important;
}
```
Other languages background color
```
.languages-area #lang_sel_list ul li a {
   background-color: #6F6F6F !important;
}
```
Regards,
Eva Kemp.
#77595 Copied
andreataylor

Participant

July 29, 2015 at 12:29

Thanks Eva.

It’s still not quite working.. If I change the other languages font colour, the current language font colour changes to the same. Please could you advise?

Also, not sure if this is a question for yourselves or WPML support.. but the language area is not picking up the default font family for the site (Open Sans) – it’s “Lato, Arial”. Is this something that you can help with or is this for WPML support?

Many thanks, Andrea

#77648 Copied

Jack Richardson

Support staff

July 29, 2015 at 15:54

Hello,

As I see the color that you set is shown on your site:
for other languages:
http://storage4.static.itmages.com/i/15/0729/h_1438181143_7988304_386e29ed01.png

and for current language I’ve edited the class to #lang_sel_list a.lang_sel_sel, #lang_sel_list a.lang_sel_sel:visited

Please clear browser cache and check.

Best regards,
Jack Richardson.

#77699 Copied

andreataylor

Participant

July 29, 2015 at 16:32

Hi Jack,

Yeah, I’m on a Mac and it’s not working on Firefox (v39.0) – the current language and other language is still the same colour (#999). I’ve cleared the cache and restarted the browser several times now. In CSS, the current language is set as #FFF. It works fine in my other browsers: Safari and Google Chrome. It also works fine with Firefox on a colleague’s PC. Is there anything that can be done to get it working with Firefox on a Mac?

Best wishes, Andrea

#77718 Copied

Eva Kemp

Support staff

July 30, 2015 at 11:25

Hello,

I’ve checked your site in Firefox and current language is highlighted with white color:
http://storage2.static.itmages.com/i/15/0730/h_1438251838_4035860_e0c6f82e47.png

Is your browser updated to the latest version?

Regards,
Eva Kemp.

#77882 Copied

andreataylor

Participant

July 31, 2015 at 10:59

Hi Eva,

Thanks, yes, I think that’s the screen grab your colleague previously sent.

I’m running Firefox 39.0 with a notification ‘Firefox is up to date’ – on a Mac.

I appreciate that if you can’t see the problem, it’s hard to fix, so I will just keep my fingers crossed that our client doesn’t notice.

Best wishes, Andrea

#77973 Copied

Eva Kemp

Support staff

July 31, 2015 at 11:05

Hello,

You’re welcome.

Regards,
Eva Kemp.

#77980 Copied

Marta Iraola

Participant

September 3, 2015 at 11:57

Hi Eva !

How are you?

I configure the WPML as follow: the post written in one Language has to be shown in the other languages if they are not translated: http://awesomescreenshot.com/0b257gav34

But it dosen’t work.

Any idea ?

Thanks

MArta

#84314 Copied Theme version: 1.4 WooCommerce version: -

Eva Kemp

Support staff

September 3, 2015 at 13:22

Hello,

Please provide us with page link where you have issues and give us wp-admin panel access.

Thank you.
Regards,
Eva Kemp.

#84355 Copied

Marta Iraola

Participant

September 3, 2015 at 14:18

Here you are …

Please, contact administrator
for this information.

#84368 Copied

Eva Kemp

Support staff

September 4, 2015 at 11:27

Hello,

Please update the theme to the latest version.
Also update all required plugins https://www.8theme.com/download-plugins/ .

Don’t forget to create back up of your files and database before starting update process!

(it’s for Legenda theme but the process is the same).

Regards,
Eva Kemp.

#84591 Copied

Marta Iraola

Participant

September 12, 2015 at 12:01

Eva,

I have already updated the theme and the plugins. I have deleted cache but it doesn’t work.

The WPML is configured to shown the post on the correct language but, if the post is not translated, on the original language.

Could you help me.

thanks EVA !!! ;D

#86417 Copied

Marta Iraola

Participant

September 14, 2015 at 22:27

Eva,

One more (and last) thing.

The site treku.es load a bit slowly

I was trying to improve it and in a tool (http://www.webpagetest.org/result/150914_7Y_17EX/1/details/) I have found that the error could be on the customs.css with more than 5 sec. http://awesomescreenshot.com/08158jw884

Is there a way to reduce the loading time of this file ?

Thanks eva !

#86834 Copied

Stan Russell

Participant

September 15, 2015 at 09:00

Hello Marta Iraola,

unfortunately we can only suggest you to check following articles:
http://www.incomediary.com/16-ways-double-website-speed-today
http://www.dwuser.com/education/content/10-steps-to-a-faster-wordpress/

Regards,
Stan Russell.

#86907 Copied

Marta Iraola

Participant

September 17, 2015 at 09:11

Hi again,

Thanks for the links, I will check them.

I contacted my hosting provider and they told me a couple of things:

1 – The theme makes an ajax petition on each page and it doesn’t do anything, because it reloads the cart, but we have no cart. Is it possible to delete that ajax petition?

2- They also say that pages with a visual composer grid take too long to load beacuse it isn’t posible to have a cache of them. Is it possible to load the page’s content wihout using ajax?

Thanks for your help!

#87442 Copied

Stan Russell

Participant

September 17, 2015 at 09:46

Hello Marta Iraola,

please update all required plugins, temporary disable third-party plugins, switch to parent theme and check your site.
After that please let us know results.
You can download latest versions of required plugins here: http://www.8theme.com/download-plugins/

Regards,
Stan Russell.

#87452 Copied

Marta Iraola

Participant

September 21, 2015 at 10:08

Hi,

We have tried this and we detected that the problem is with Post Grid from visual composer.

Is there any way to make it faster, or another way to show the posts/portfolios without using post grid?

Thanks for your help.

#88233 Copied

Jack Richardson

Support staff

September 21, 2015 at 15:23

Hello,

You can try to use this shortcode [portfolio] which inserts Recent Projects slider and [recent_posts] which inserts the slider of recent posts.

Best regards,
Jack Richardson.

#88335 Copied

Marta Iraola

Participant

September 21, 2015 at 16:58

OK ! Thanks !

#88359 Copied

Jack Richardson

Support staff

September 21, 2015 at 17:59

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#88374 Copied
Tagged: area, language, styling, themes, woocommerce, wordpress, wpml
Viewing 29 results - 1 through 29 (of 29 total)