php/css/html language buttons current language

2 Views

I have “buttons”, which change language on the web-page: 

<div class="wrapper">
    <a class="button-link" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>" target="_parent">DE</a>
    <a class="button-link" href="<?php echo qtrans_convertURL(get_permalink(), 'en'); ?>" target="_parent">EN</a>
</div>

And I make a hover effect, to show, which language is about to be chosen:

Read More
.button-link:hover {
    color: #fff;
    border-bottom: 2px solid #e95252;
}

Now I am trying to keep this border line under the chosen language. So that the user always sees the active language. I thought it would be as simple as: 

.button-link:active{}

But it doesn’t work the way I want it, so I guess I have to write a php function. I have found examples of how to show the current page, but it is not the same as with the languages. Because the language button is independent of the page, it should always stay underlined if a person has chosen English, for example.

Post Views: 2

Related posts

3 comments

  1. One way of doing this, would be to add a class="<?= $lang = 'de' ? 'active' : '' ?>" to every .button-link. Since they are all doing the same it would be simpler:

    <?php
    $langs = array('de', 'fr', 'it', 'en');
?>

<div class="wrapper">
    <?php foreach ($langs as $lang) : ?>
        <a class="button-link" href="<?= qtrans_convertURL(get_permalink(), $lang); ?>" class="<?= qtrans_getLanguage() == $lang ? 'active-lang' : '' ?>" target="_parent"><?= strtoupper($lang); ?></a>
    <?php endforeach; ?>
</div>

    and in css you would simply select the class either as

    .active-lang {}

    or 

    .button-link.active-lang {}

  2. You can try doing the following
    PHP:

    <?php if(qtrans_getLanguage()=='de'): ?>
<a class="button-link active" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>"
       target="_parent">DE</a>
<?php endif; ?>

    CSS:

    .active {
   border-bottom: 2px solid #e95252;
}

    Good Luck!

  3. something like this can be done:
    define new class>

    .button-link-active {
    border-bottom: 2px solid #e95252;
}

    then use following code to add class in your link:

    <?php if ( qtrans_getLanguage() == "en" ){ echo "button-link-active" } ?>

    final code will be like this:

    <a class="button-link <?php if ( qtrans_getLanguage() == "en" ){ echo "button-link-active" } ?> " href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>" target="_parent">DE</a>

Comments are closed.