Question

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

.rotatingtweet{padding-left: 15px;}

当我在开发者模式下在谷歌浏览器中添加相同的代码行时，它具有所需的效果，但我无法通过编辑网站的主要style.css文件来使其工作。＆＃34;语音＆＃34; wordpress主题。

感谢您的时间！ -John

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

并将边框移动到rotatetweets容器之前和之后的元素：

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

这似乎可以达到你想要的效果。

编辑Wordpress Widget CSS

1 个答案: