Logo Image - Polylang translation — One Designs Support Forums

Viewing 6 posts - 1 through 6 (of 6 total)

July 5, 2017 at 11:04 pm July 5, 2017 #22954

[email protected]
Participant

Hi,
please, I created english version of my slovak website (http://kvae.web2v.ukf.sk/) with the help of Polylang plugin…, instead of the site title text (in original slovak version) I used logo image (with text), so now I need to put there english version of that logo image, I prepared the image, but I dont know how to put it there to be able to switch between slovak and english and at the same time to change the slovak and english logo image…(I tried to solve it by changing “Filters content by language” at the top of the screen and uploading english and slovak versions of logo images, but it does not work), plaese, help me to fix the problem. Thanks!
July 6, 2017 at 1:26 am July 6, 2017 #22955

Daniel Tara
Keymaster
The following hack should be able to allow you to add a custom logo for the English version without modifying the theme files:

First create a file with the english logo named logo-english.png and upload it to your server. Next, go to Appearance → Theme Options → Design and add the following custom CSS:
```
html[lang="en-GB"] .site-logo {
    opacity: 0;
}

html[lang="en-GB"] .navbar-brand {
    background-image: url(http://kvae.web2v.ukf.sk/wp-content/uploads/2017/07/logo-english.png);
    background-position: 15px 16px;
    background-repeat: no-repeat;
    background-size: calc(100% - 30px) auto;
}
```
You may need to replace the 2017/07 part with the appropriate date.
July 6, 2017 at 6:21 pm July 6, 2017 #22956

[email protected]
Participant
Hi, Daniel

thanks a lot for your help, it works however I forgot that in case of slovak logo I have added this CSS rule before in order to fit it correctly in navbar:
```
.navbar-brand > .site-logo {
display: inline-block;
width: auto;
max-height: 70px;
vertical-align: middle;
-webkit-transition: height .25s ease, max-height .25s ease;
-moz-transition: height .25s ease, max-height .25s ease;
-ms-transition: height .25s ease, max-height .25s ease;
-o-transition: height .25s ease, max-height .25s ease;
transition: height .25s ease, max-height .25s ease;
}
```
sorry, I do not have experience in CSS, is it possible to combine it with your previous CSS rule? because now, the english logo is not correctly fitted in navbar as you can see here: http://kvae.web2v.ukf.sk/en/home-2/ (when shrinked by scrolling down)

Thanks a lot!
July 6, 2017 at 11:48 pm July 6, 2017 #22957

Daniel Tara
Keymaster
Here’s a new CSS code that should make the logo ft properly and shrink on scroll:
```
html[lang="en-GB"] .site-logo {
    opacity: 0;
}

html[lang="en-GB"] .navbar-brand {
    background-image: url(http://kvae.web2v.ukf.sk/wp-content/uploads/2017/07/logo-english.png);
    background-position: 15px 16px;
    background-repeat: no-repeat;
    background-size: auto 44px;
    transition: background-size .25s ease;
}

html[lang="en-GB"] .navbar-large .navbar-brand {
    background-size: auto 64px;
}
```
July 7, 2017 at 2:52 pm July 7, 2017 #22961

[email protected]
Participant

it works, thanks a lot for your solution and work on the theme!

July 11, 2022 at 9:57 pm July 11, 2022 #23972

[email protected]
Participant

There is also great plugin if you don’t want to mess with code snippets

Polylang logo translate