Button for multilingual site

Site URL: https://www.patricialindner.com/

I used code to make my site multilingual. I would like to have two buttons to switch languages, english and german. I would like the buttons to be transparent with just a white outline and white text that says EN and DE. Can anyone help with this? I would like these buttons to be in line with the nav links if possible. site password is Patricia. Thanks!

19 hours ago, JennWalker said:

Site URL: https://www.patricialindner.com/

I used code to make my site multilingual. I would like to have two buttons to switch languages, english and german. I would like the buttons to be transparent with just a white outline and white text that says EN and DE. Can anyone help with this? I would like these buttons to be in line with the nav links if possible. site password is Patricia. Thanks!

First, change your scripts

From:

/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/en/home" class="lang-en">English</a> | <a href="/de/home/" class="lang-de">Deutsch</a></div>');

To: 

/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/en/home" class="lang-en">EN</a> | <a href="/de/home/" class="lang-de">DE</a></div>');

Secondly, add to the Custom Css

.language a {
    border: 1px solid #fff !important;
    padding: 5px;
}

Here is the result 

7 hours ago, bangank36 said:

Here is the result 

Thank you so much!! Do you happen to know how to make the footer in 2 languages?

@JennWalker Add 2 sections in Footer for 2 languages

• Top section for English
• Bottom section for DE

Next, find this code

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
  }

edit it to

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
	$('body').addClass('body-de');
  }

Next, add this to Code Injection > Header

<style>
  body.body-de footer.sections section:nth-child(1) {
  	display: none;
  }
  body:not(.body-de) footer.sections section:nth-child(2) {
  	display: none;
  }
</style>

16 hours ago, tuanphan said:

@JennWalker Add 2 sections in Footer for 2 languages

• Top section for English
• Bottom section for DE

Next, find this code

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
  }

edit it to

if (lang == "de") {
    $('a[href="/"]').attr("href", "/de/home/");
	$('body').addClass('body-de');
  }

Next, add this to Code Injection > Header

<style>
  body.body-de footer.sections section:nth-child(1) {
  	display: none;
  }
  body:not(.body-de) footer.sections section:nth-child(2) {
  	display: none;
  }
</style>

 

Thank you so much! That worked great. The only issue is the disclaimer is now pushed up on the button. Not a big deal, I can just delete it if needed but do you know how to fix it easily?

On 9/30/2021 at 7:26 AM, JennWalker said:

Thank you so much! That worked great. The only issue is the disclaimer is now pushed up on the button. Not a big deal, I can just delete it if needed but do you know how to fix it easily?

It looks fine to me. Do you use Mac or Windows?

2 hours ago, tuanphan said:

It looks fine to me. Do you use Mac or Windows?

windows. What I did is just space it down a couple of lines, so in editing mode it looks down really far but once I save it looks fine.