Question

我正在为我的Wordpress网站http://www.praktijkvanginkel.nl/new/寻找一个css解决方案。它正在运行Avada主题。

在除1以外的所有页面上，正常徽标照常显示。在例外页面（http://praktijkvanginkel.nl/new/huid-vitaal/）上，我需要一个不同的徽标。

我尝试过：在css中使用page-id将原始徽标替换为新徽标。问题是：旧徽标仍然显示在新徽标下。我已应用以下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 } ?>

Wordpress中其他页面上的特定徽标

4 个答案: