【问题标题】:Editing Wordpress Widget CSS编辑 Wordpress 小部件 CSS
【发布时间】:2015-03-04 00:07:29
【问题描述】:

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

.rotatingtweet{padding-left: 15px;}

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

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

【问题讨论】:

  • 你有链接分享吗?
  • 在 coa.menloschool.org

标签: css wordpress widget


【解决方案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;
}

这似乎完成了你想要的。

【讨论】:

  • 非常感谢 bobdye!成功了……我昨天花了几个小时试图让它工作,所以你为我节省了很多时间!
  • 我试图找出我在主样式表上的 css 属性被覆盖的位置...是主 css 样式表之后包含在 html 中的旋转推文小部件的容器,还是位置优先于填充? (我是一个 CSS 菜鸟......只是想弄清楚我做错了什么:)
  • 在实现你的代码 sn-p 之后,看起来盒子等的背景发生了变化(这是有道理的)。有没有办法从外部覆盖推文容器中的 position:absolute 属性?我尝试在 style.css 中使用.rotatingtweet{ position: relative; left: 15px;},但没有发现任何变化。
  • 感谢您的回复!不幸的是,我无法在我可以使用 wordpress 主题编辑器编辑的主 style.css 文件中找到这个旋转推文容器:coa.menloschool.org/wp-content/themes/voice/style.css?ver=1.2.1你知道你正在谈论的 style.css 文件的位置,以及我怎么能编辑除了 Voice 主题的 style.css 以外的 wordpress 文件?
  • 感谢您的回复!不幸的是,我无法在我可以使用 wordpress 主题编辑器编辑的主 style.css 文件中找到这个旋转推文容器:coa.menloschool.org/wp-content/themes/voice/style.css?ver=1.2.1
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-06-16
  • 2021-09-25
  • 1970-01-01
  • 2014-10-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多