WordPress Twenty Twelve主题中的页脚内部样式小部件

时间:2014-04-15 10:02:53

标签: html css wordpress widget

我正在使用WordPress的Twenty Twelve主题。我已根据this tutorial向页脚添加了三个窗口小部件列,其中包含您可能需要查看的所有代码。

使用的唯一额外css:

#colophon {
background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;
background-color: #00A0E1;
color: white;
padding: 115px 0 0 100px;
margin-bottom:20px;
}

链接到网站:http://lenkapage.com/daylight

结果是带有徽标的蓝色矩形(根据需要),小部件位于其下方。我希望徽标和小部件形成一个页脚块。 如何将小部件包含在蓝色背景中?

一个选项是忘记#colophon并自己设置小部件的样式,但这并不理想,因为它在调整屏幕大小和其他问题时会感到不愉快。造型对我来说不起作用。

由于小部件在代码中的#colophon中,我玩定位(相对等),但这并没有达到预期的效果。我的直觉是这就是答案所在。到目前为止还没有雪茄。

我搜索了wordpress.org,谷歌和堆栈溢出的几个和很多搜索词,但大多数得到如何在页脚上实现三个小部件区域的答案。

非常感谢!

1 个答案:

答案 0 :(得分:0)

向#colophon添加溢出。这当然会起作用,但你总是可以对这些元素使用clearfix。

#colophon {
    background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;
    background-color: #00A0E1;
    color: white;
    padding: 115px 0 0 100px;
    margin-bottom: 20px;
    overflow: hidden;
}