在现有主题之上自定义 WordPress CSS

Question

我在我的 WordPress 网站上安装了一个主题。

在主题之上，我添加了 bbPress（论坛）...不幸的是 CSS 渲染论坛功能非常糟糕...

例如，下图显示了搜索按钮与搜索框的重叠情况

Search box-button overlapping

如果我查看 css 我可以看到：

element.style {
}
vlog-bbpress.css?ver=1.8.1:9
#bbpress-forums #bbp-search-form {
    position: relative;
    float: none;
}

bbpress.css?ver….5.14-6684:429
#bbpress-forums #bbp-search-form {
    clear: left;
}

我应该在 css 中更改什么？？？（我已经安装了 Simple Custom CSS 插件（https://en-ca.wordpress.org/plugins/simple-custom-css/)so 我不需要做任何自定义 css，但我应该能够添加自定义 CSS）

如果你们中有人想看一下该网站，可以在这里找到它（还没有上线，只是玩玩）

http://italiancrypto.it/forums/

非常感谢大家

此致

Answer 1

位置：相对。这应该有效

Answer 2

添加下面的CSS解决按钮对齐问题

#bbpress-forums #bbp-search-form .button {
    margin: 0;
    padding: 9px 20px;
}

Answer 3

#bbpress-forums #bbp-search-form .button {
    margin-top:0;
}
#bbpress-forums #bbp-search-form #bbp_search {
    height: 42px;
}

您可能需要包括 !important 标签，这取决于您的 CSS 覆盖被注入的位置。但只在必要时使用。

例如：

#bbpress-forums #bbp-search-form .button {
    margin-top:0 !important;
}
#bbpress-forums #bbp-search-form #bbp_search {
    height: 42px !important;
}

Answer 4

阅读一些有关使用 Chrome 检查屏幕的信息——我添加了一张图片来提供帮助。要获得此屏幕，请右键单击搜索按钮。

您会在左侧（输入字段）看到突出显示的 html 代码。在右侧，您会看到 css 及其在该字段中的值。

看到每个字段旁边的复选标记>？我点击边距设置将其删除。然后，我点击了检查屏幕右上角的加号。

这样您就可以为新参数键入一个临时值。我输入：上边距：0；

您会在我附上的图片中看到这一点。现在按钮已对齐。 css 放置在您的样式中 sheet 就在插入的 margin-top 字段上方。

您会看到该按钮现在与搜索字段对齐。所以 Mando 的回答应该有效。

在现有主题之上自定义 WordPress CSS

Customize WordPress CSS on top of an existing Theme

html

css

wordpress

bbpress