css - WordPress 主题修改以交换标题中的 Logo

Question

在此站点上:http://new.thebeatfitness.net/我正在使用这个主题的子主题:https://organicthemes.com/demo/startup/在主题中，它内置了两个标题，一个用于浅色背景，一个用于深色背景。主题有导航交换明暗但没有标志。看起来很愚蠢，但当我询问主题开发人员时，他们说它是那样构建的。

除了文本导航之外，谁能指导我如何让主题也根据背景交换 Logo ？

Answer 1

基本上来说，您的主题会在您滚动时切换一个类。

这个:

<div id="nav-bar" class="dark">

变成这样:

<div id="nav-bar" class="light">

您的 Logo 通过 html 中的 img 元素加载。最简单的选择是通过 css 加载 Logo 。

.dark .site-logo a{ background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_dark.png'); }
.light .site-logo a{ background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_light.png'); }

您正在修改的原始主题实际上是在两种情况下都使用一张图片。相反，他们更改文本颜色，这更容易。