【问题标题】:WordPress Theme modification to swap logos in headerWordPress主题修改以在标题中交换徽标
【发布时间】:2018-04-21 05:34:55
【问题描述】:

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

谁能指导我如何让主题除了文本导航之外还根据背景交换徽标?

【问题讨论】:

  • 在这种情况下,您可以使用与标题背景颜色匹配的两个徽标(具有两种不同的颜色)。
  • 这两个不同颜色的标志很明显。我的问题是如何让主题像导航一样根据背景拉入不同的徽标。

标签: css wordpress header graphical-logo


【解决方案1】:

基本上,当您滚动时,您的主题会切换一个类。

这个:

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

变成这样:

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

您的徽标是通过 html 中的 img 元素加载的。您可以使用的最简单的选择是通过 css 加载徽标。

.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'); }

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

【讨论】:

  • 我试过了,我什至添加了一个 z-index,但它不会显示任何徽标,除非我在主题选项面板中添加它。
  • @CreativEliza 再试一次,我可以看看你的例子。你一定是做错了什么。
  • 在标题中,代码来自原始主题:
  • 我没有看到你在 css 的任何地方设置背景图片。
  • 不知道怎么把背景调进主题里。我在上面展示了调用定制器中添加的徽标的代码。
猜你喜欢
相关资源
最近更新 更多
热门标签