Конкретный логотип на другой странице в Wordpress

Question

Я ищу решение css для моего сайта Wordpress http://www.praktijkvanginkel.nl/new/. Он запускает тему Avada.

На всех страницах, кроме 1, обычный логотип отображается как обычно. На странице исключения (http://praktijkvanginkel.nl/new/huid-vitaal/) мне нужен другой логотип.

Что я пытался: Использовать идентификатор страницы в css для замены оригинального логотипа на новый. Проблема: старый логотип по-прежнему отображается под новым. Я применил следующие css:

.page-id-90 #header .fusion-logo img a{ 
display: none !important 
} 

.page-id-90 .fusion-footer-copyright-area { 
background-color: #ff008e!important; 
border-color: #4b4c4d; 
border-top-width: 1px; 
padding-top: 18px; 
padding-bottom: 16px; 
} 

body.page-id-90 .fusion-logo img { 
background: url('http://praktijkvanginkel.nl/new/wp-content/uploads/2016/06/huidvitaal.png') top left no-repeat !important; 
display: block !important; 
height: 85px !important; 
width: 212px !important; 
} 


body.page-id-90 .fusion-logo .fusion-logo-2x { 
display: none!important; 
} 

.page-id-90 .fusion-is-sticky .fusion-logo img { 
background: url('http://praktijkvanginkel.nl/new/wp-content/uploads/2016/06/huidvitaal.png') top left no-repeat !important; 
display: block !important; 
height: 52px !important; 
width: 129px !important; 
} 

Я просто не могу понять, почему старый логотип все еще там. Кто-нибудь может мне с этим помочь? Я также был бы признателен за решение для липкого логотипа заголовка, который имеет ту же проблему

Answer 1

CSS не является лучшим решением для этого ... Однако, так как вы просили, вы можете применить фон в теге ссылки вместо тега изображения:

body.page-id-90 .fusion-logo-link img { 
    display: none; 
} 
body.page-id-90 .fusion-logo-link { 
    background: url('../2016/06/huidvitaal.png') no-repeat top left; 
    display: block; 
    height: 85px; 
    width: 212px; 
} 

Для выполнения этой работы не требуется использовать другой код, который вы использовали.

Answer 2

Если вам нужно сделать это только в CSS, как насчет изменения непрозрачности изображения на 0 и вместо этого добавить фоновое изображение к ссылке на логотип?

body.page-id-90 a.fusion-logo-link { 
    background: url('http://praktijkvanginkel.nl/new/wp-content/uploads/2016/06/huidvitaal.png') top left no-repeat; 
    background-size: 100%; 
} 

body.page-id-90 .fusion-logo img { 
    opacity: 0; 
} 

Установка размера фона для ссылки также должна устранить проблему с вашим липким заголовком. Надеюсь, это поможет!

Answer 3

Возможное решение, я думаю, что логотип зашиты в вашем файле index.php

<img src="//praktijkvanginkel.nl/new/wp-content/uploads/2016/06/praktijkvanginkel-1.png"... 
<img src="//praktijkvanginkel.nl/new/wp-content/uploads/2016/06/praktijkvanginkel-1.png"... 

Вы можете удалить эти строки, не забудьте сделать резервную копию этой строки, если ее не работает.

Затем в CSS-файл можно добавить:

.fusion-logo img {background: url('../2016/06/praktijkvanginkel-1.png')... 
.page-id-90 .fusion-logo img {background: url('../2016/06/huidvitaal.png')... 

Answer 4

попробуйте этот код в файле header или footer.php.

<?php if(is_page('huid-vitaal')){ ?> jQuery(document).ready(function(){ $('.fusion-logo .fusion-logo-link img').attr('src','second.jpg'); }); <?php } ?>