This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 7 replies, has 2 voices.

Last updated by Vitaliy 6 years, 7 months ago.

Assigned support staff: Amit.

Author Posts
August 28, 2013 at 8:50 am #158302

Vitaliy

Hi, everybody!
I have some problem with CSS. I cannot change color of my language selector links.
Here is my website. <a href="hidden link" title="hidden link"></a>

I have put this code to function.php

function language_selector(){
$languages = icl_get_languages('skip_missing=0&orderby=code');
if(!empty($languages)){
$count=0;
foreach($languages as $l){
$count++;
if($count==3)
{
$pipe = '';
}
else
{
$pipe = ' | ';
}
if(!$l['active']) echo '<a href="'.$l['url'].'">';
echo ''.$l['native_name'].$pipe;
if(!$l['active']) echo '</a>';
}
}
}

This to header.php

<div class="lang_sel">	<?php language_selector() ?></div>

and this to style.css

.lang_sel{
margin-bottom: 25px;
text-align: center;
color:white; 
}
.lang_sel ul{
color:black;
}

.lang_sel ul li{
color:black; 
}
.lang_sel ul li a, .lang_sel ul li a:visited{
color: #999999;
text-decoration:underline;
}
.lang_sel ul li a:hover, .lang_sel ul li a:active{
color: #333333;
}

I could change only one things - white color of selected language. Where I did mistake?
Thanks.

August 28, 2013 at 9:31 am #158324

Amit
Supporter

Hi Vitally,

As a first step can you please check that you have added the CSS at the end of your style.css ? you can also apply !important to the selectors so they'll overwrite any other selector ? thanks!

Cheers!

August 28, 2013 at 9:52 am #158336

Vitaliy

Hi Amit!
Thanks for answer.
1) Yes. it is in the end of style.css.
2) I've just apply !important and it also didn't help. 🙁

August 28, 2013 at 9:57 am #158339

Amit
Supporter

Vitally,

You have the right button deactivated so I can't take a look at the code - can you please deactivate that block please ?

Thanks!

August 28, 2013 at 9:58 am #158340

Vitaliy

I've notice that apply only this code

.lang_sel{
margin-bottom: 25px;
text-align: center;
color:white; 
}

but not this

.lang_sel ul{
color:black;
}
 
.lang_sel ul li{
color:black; 
}
.lang_sel ul li a, .lang_sel ul li a:visited{
color: #999999;
text-decoration:underline;
}
.lang_sel ul li a:hover, .lang_sel ul li a:active{
color: #333333;
}
August 28, 2013 at 10:03 am #158346

Vitaliy

Hmmm. Strange.
I didn't do anything with deactivation for right button. And I've just check my website and right button is working. Hmmm.

August 28, 2013 at 10:09 am #158350

Amit
Supporter

Well I can't use it here...

I am sending you an email asking for login details, please let me know here when you have got it & responded,

Thanks!

August 28, 2013 at 11:55 am #158401

Vitaliy

The problem is resolved.
I had to put this code

.lang_sel{
text-align: right !important;
margin-right: 20px !important;
color:#92d1f5 !important;
font-size: 120%;
}

.lang_sel a, .lang_sel a:visited{
color: white !important;
}
.lang_sel a:hover, .lang_sel a:active{
color: #92d1f5 !important;
}