编辑Wordpress部件CSS

我正在学校报纸的wordpress网站上工作，我正在尝试将旋转tweet小部件的内容缩进15px。我试着将以下代码添加到WordPress的主题编辑器的style.css的表，但它并没有作出任何显着的变化：编辑Wordpress部件CSS

.rotatingtweet{padding-left: 15px;}

当我添加相同的代码行谷歌浏览器开发者模式，它具有所需的效果，但我无法通过在“Voice”wordpress主题中编辑网站的主style.css文件来实现它。

谢谢你的时间！ -John

来源

2015-03-03 JulietKiloMike

您有分享链接吗？ – CristiC 2015-03-03 00:23:45

这是在coa.menloschool.org – JulietKiloMike 2015-03-03 00:32:28

推文在其容器中显示为position: absolute，所以他们忽略填充。

把填充的外层div代替，然后调整头：

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

编辑：上面，用另外的调整，以边界并且这样，将工作，但可能有一个稍微容易的解决方案。

而不是使用填充，给旋转tweets容器左边距。在你的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; 
}

这似乎达到你想要的。

来源

2015-03-03 01:01:53 bobdye

非常感谢bobdye！那就是诀窍......我花了几个小时试图让它在昨天工作，所以你为我节省了很多时间！ – JulietKiloMike 2015-03-03 01:18:20

我想弄清楚我的主要样式表的CSS属性被覆盖...是主要的CSS样式表后的html中包含的旋转tweets小部件的容器，还是位置优先于填充？（我是一个CSS noob ...只是想弄清楚我做错了什么:) – JulietKiloMike 2015-03-03 01:20:55

执行你的代码片段后，它看起来像框等背景被转移（这是有道理的）。有没有办法来覆盖位置：来自外部的推文容器中的绝对属性？我尝试使用'.rotatingtweet {position：relative; left：15px;}'在style.css中，但没有注意到任何更改。 – JulietKiloMike 2015-03-03 01:35:08

编辑Wordpress部件CSS

回答

相关问题