Question

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

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

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

如果我看一下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

添加以下CSS以解决按钮的对齐

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

Answer 2

#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 3

使用Chrome检查屏幕阅读一些内容 - 我已经添加了图像以提供帮助。要获得此屏幕，请右键单击搜索按钮。

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

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

这使您可以键入新参数的临时值。我键入了： margin-top：0;

你会在我附上的图片中看到这一点。现在按钮对齐了。放置在样式表中的css位于插入的margin-top字段的上方。

您会看到按钮现在与搜索字段对齐。因此Mando的答案应该有效。

Answer 4

位置：相对。这应该工作

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

4 个答案: