编辑 Wordpress 小工具 CSS

Question

我正在学校报纸的 wordpress 网站上工作，我正在尝试将旋转推文小部件的内容缩进 15 像素。我已经尝试将以下代码添加到wordpress主题编辑器的style.css sheet，但它并没有做出任何明显的变化：

.rotatingtweet{padding-left: 15px;}

当我在 google Chrome 的开发者模式下添加相同的代码行时，它达到了预期的效果，但我无法通过编辑网站的主 style.css 文件在 "Voice" wordpress 主题中。

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

Answer 1

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

将内边距放在外div，然后调整表头：

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

并将边框移动到旋转推文容器前后的元素：

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

这似乎实现了你想要的。

编辑 Wordpress 小工具 CSS

Editing Wordpress Widget CSS

css

wordpress

widget