Different logo for each language

Resolved martindrz
(@martindrz)

7 years, 7 months ago
Hey,

I’m using Polylang plugin and Agama Theme. I would like to use different logos for each language. The solutions found on google didn’t work so far. At the Polylang support they say, it depends on the theme used. So maybe someone here could help me please?

Thank you so much!
- This topic was modified 7 years, 7 months ago by martindrz.
The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

Theme Author themevision
(@themevision)

7 years, 7 months ago
Hello,@martindrz!

Here is the working solution for you:

First, you need to find the specific page ID number on the page which you want to apply the custom logo image.

to discover the page id, please follow the steps below :

1. Navigate in your browser to the page you want to work with.
2. Right-click on that page (anywhere) and select “Inspect Element“.
3. Search inside the site’s markup for the body tag. It should be one of the first element in the source.
You’ll see it has many classes. Look for the class that starts with “page-id-…”. That’s the class you should use.

You can check THIS video guide

then, Open the Customizing->General->Additional CSS
and Copy/Paste the code below for every page you want to change the logo image and replace the page ID and URL to the image for each page.
```
.page-id-64 .pull-left  a img{
    display: none;}
.page-id-64 .pull-left  {
  background-image: url(http://static1.squarespace.com/static/576280dd6b8f5b9b197512ef/t/5b56f91003ce642b5e2547f3/1532426517948/Facts-image-8.gif?format=1000w);
  background-size: contain!important;
  width: 250px;
  height: 250px;
  background-position: center;
  background-repeat: no-repeat;
}
```
https://prnt.sc/litsgz

Regards
- This reply was modified 7 years, 7 months ago by themevision.
Thread Starter martindrz
(@martindrz)

7 years, 6 months ago

Wow! Thank you so much!

Thread Starter martindrz
(@martindrz)

7 years, 6 months ago

It’s working with the logo, but the shrinking header is not working anymore when I put in your code. Hm…
Theme Author themevision
(@themevision)

7 years, 6 months ago
Hi,@martindrz!

In order to have a shrinking header, add next code additionally:
```
.page-id-62 .sticky-header-shrink .pull-left  {
  background-image: url(http://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
    width: 93px;
    height: 93px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
```
Change the width and height values per your needs.

Also, insert this lines into the code I give you earlier:
```
-webkit-transition: height 0.4s;
-moz-transition: height 0.4s;
```
so, in the end, your whole code per page should look like this:
```
.page-id-62 .pull-left  a img{
    display: none;}
.page-id-62 .pull-left  {
  background-image: url(http://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
  width: 250px;
  height: 250px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
}

.page-id-62 .sticky-header-shrink .pull-left  {
  background-image: url(http://www.saxon-roots.de/wp-content/uploads/2018/10/LogoEN.png);
  background-size: contain!important;
  width: 93px;
  height: 93px;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
```
https://prnt.sc/lj9udi

Regards
- This reply was modified 7 years, 6 months ago by themevision.
Thread Starter martindrz
(@martindrz)

7 years, 6 months ago

Thank you so much! 🙂

bibbi1
(@bibbi1)

7 years, 1 month ago

@themevision i tried that solution, it works, but why the logo image keeps repeating in the footer also? I hope you see this as soon as possible. really need a solution to this..

Theme Author themevision
(@themevision)

7 years, 1 month ago

Hello, @bibbi1!

Can you give me a link to your website?
bibbi1
(@bibbi1)

7 years, 1 month ago
Hello, @themevision check it here..
Let me know when you do. Thanks
- This reply was modified 7 years, 1 month ago by bibbi1.
bibbi1
(@bibbi1)

7 years, 1 month ago
here is it how it appears on the other pages.subpages of the site..check the footer also..

As there is no problem when the change happens in the main (home) page but at the others, the logo repeats
- This reply was modified 7 years, 1 month ago by bibbi1.
Theme Author themevision
(@themevision)

7 years, 1 month ago
Hello,@bibbi1!

The next code should help you:
```
.ironthm-copyright.pull-left {
background: none!important;    
}
```
Regards
bibbi1
(@bibbi1)

7 years, 1 month ago

Thank you very much! that really really helped :)) May you have a blessed day!

Theme Author themevision
(@themevision)

7 years, 1 month ago

Hi, @bibbi1!

You are welcome.

I m glad I could help. 🙂

bibbi1
(@bibbi1)

7 years, 1 month ago

Dear @themevision , as I am resuming the yesterday’s work (regarding the same website), would you mind if you check this https://tinyurl.com/y2poy9nt why the logo repeats itself behind the content of the “news” blog page and it is moving the entire content towards left by narrowing it..?

Could you please have a look at it?
Big thanks in advance.
Theme Author themevision
(@themevision)

7 years, 1 month ago
Hello,@bibbi1!

If you want your logo appears only in the header area, you need to insert the .ironthm-header-middle class, before the .pull-left.

So your code should look like this:
```
.page-id-4473 .ironthm-header-middle .pull-left {
    background-image: url(http://www.drzavnopravobranitelstvo.gov.mk/wp-content/uploads/2019/04/Small.png);
    background-size: contain!important;
    width: 448px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
}
```
https://prnt.sc/nmtvzm

Also, I noticed that your blog post thumbnails are missing…to fix that
you need to insert same class in this code too,
```
.page-id-4473 .ironthm-header-middle .pull-left  a img{
    display: none;
}
```
If you want your logo to appear on all pages (and not just individual ones), you can use only these two codes for all pages:
```
.ironthm-header-middle .pull-left  a img{
    display: none;}

.ironthm-header-middle .pull-left {
    background-image: url(http://www.drzavnopravobranitelstvo.gov.mk/wp-content/uploads/2019/04/Small.png);
    background-size: contain!important;
    width: 448px;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
}
```
in that case, you can freely remove all 25 codes you have previously inserted.

https://prnt.sc/nmu4hc

Hope this will help you.

Regards
- This reply was modified 7 years, 1 month ago by themevision.
- This reply was modified 7 years, 1 month ago by themevision.
bibbi1
(@bibbi1)

7 years, 1 month ago

Thank you Tons!! @themevision ! you are incredible:) wish I had your knowledge.

All the best!
bibbi