编辑 Wordpress 小部件 CSS

Question

我正在研究我校报的 wordpress 网站，我正在尝试将旋转推文小部件的内容缩进 15 像素。我尝试将以下代码添加到 wordpress 主题编辑器的 style.css 表中，但没有做出任何明显的更改：

.rotatingtweet{padding-left: 15px;}

当我在开发人员模式下在谷歌浏览器中添加相同的代码行时，它具有预期的效果，但我无法通过在“语音”wordpress 主题中编辑网站的主要 style.css 文件来使其工作.

感谢您的宝贵时间！ -约翰

Answer 1

推文在其容器中显示为position: absolute，因此它们忽略了填充。

把padding放在外层div上，然后调整header：

.widget_rotatingtweets_widget {
    padding-left: 15px;
}
.widget_rotatingtweets_widget h4 {
    margin-left: -15px;
}

编辑：以上内容，加上对边框等的额外调整，将起作用，但可能有一个稍微简单的解决方案。

不要使用填充，而是为旋转的推文容器留出左边距。在您的 style.css 文件中（可能是第 102 行），有一个选择器：

#content .rotatingtweets,
#content .norotatingtweets  {
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    margin-bottom: 3%;
}

如果您将其更改为：

#content .rotatingtweets,
#content .norotatingtweets  {
    margin-bottom: 3%;
    margin-left: 15px;
}

并将边框移动到rotatingtweets 容器前后的元素：

.sidebar .widget_rotating_tweets .widget_title {
    border-bottom: 1px solid #DDD;
}
.widget_rotating_tweets .follow-button {
    border-top: 1px solid #DDD;
}

这似乎完成了你想要的。