Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

WPML custom icons : how to change their CSS according to active language/url.

Alt:

Hi there,

I have 2 custom language icons (top-right) that link correctly to corresponding language/url.

url in french : www.myexample.com url for dutch : www.myexample.com/nl

So as you can see, when I'm on www.myexample.com the FR (french) button is 'pushed/active', as I have styled it in CSS.

If I click on the NL (dutch) button, it redirects correctly to www.myexample.com/nl... Perfect.

Here is my question : Now that I'm on www.myexample.com/nl, I want to see the NL button being pushed/active, i guess via CSS.

How can i do this ? Any idea ?

Thank you !

Johan

2 Answers

Johan,

One (and possibly the simplest) method would be to use JavaScript to check the location of your window and style conditionally based on the results, using something like I've got below:

//set a location variable to contain the pathname of your URL
var loc = window.location.pathname;

//gain access to the appropriate elements in the DOM
var myDutchLink = document.getElementById('insert-your-element-here');
var myFrenchLink = document.getElementById('insert-your-element-here');

//create a conditional to check if the 'nl' Dutch designator is found in your pathname, and style your links accordingly
if(loc.indexOf('nl') != -1) {
    //style your links here if 'nl' IS found in the pathname of the url, either via checking then adding and removing styled classes, or styling the elements directly
} else {
    //style your links if 'nl' is NOT found in the pathname of the url, either via checking then adding and removing styled classes, or styling the elements directly
}

You would probably want to put this in the header or footer files of your site, though without testing I'm not sure which or if there is a huge difference either way. I would expect that because it's so small, it shouldn't have much of an issue either way. But, of course, testing that is the only way to know for sure!

For more information on some of these JavaScript pieces (in case you're unfamiliar with any of them), check the links below:

1) window.location

2) document.getElementById

3) .indexOf

4) .classList

Hope this helps!

Erik

It sounds good ! I'll dig it... Thanx Erik !

Johan

Let me know if you can piece it together from there or if you need any more help!

Happy coding!

Erik

It works perfectly... Thank you!

Best regards from Belgium...

Johan

Johan,

What is your site built with? Is it a dynamic PHP site or static HTML?

Erik

Erik, It comes from a self-made static html now brought to Wordpress...