小工具背景颜色更改答案

【问题标题】：Gadget Background Colour Change小工具背景颜色更改
【发布时间】：2015-06-21 20:48:16
【问题描述】：

我无法更改我网站上热门帖子小部件的背景颜色。我发现问题与我的粘性导航菜单有关。所以我的粘性导航菜单的背景是黑色的，出于某种原因，这也影响了我的热门帖子小部件的背景颜色。这是我的粘性导航背景颜色代码

/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #000000;
border: 0px solid #eeeeee;
text-align: center  !important;
}

我希望热门帖子小部件的背景颜色为透明或白色，同时保持粘性导航的背景颜色为黑色。

这是我的热门帖子的代码

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -10px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}

.PopularPosts .item-thumbnail img:hover{
background: transparent;
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
color: #555555;
}

.PopularPosts .item-title {
clear:both;
font: 10px verdana;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}

.PopularPosts .item-snippet {
display: none;
}

.widget .widget-item-control a img {
height: 18px;
width: 18px;

}

</style>

我已经尝试过实现

background: #ffffff;

在该代码块中，但它仍然没有改变背景颜色？有关如何解决此问题的任何想法？

【问题讨论】：

标签： html css blogs blogger

【解决方案1】：

将此插入到您的<head> 内的<stye> 标记中：

    .tabs-inner .section:first-child ul {
       background: #000 !important;
    }
    .tabs-inner .widget ul {
       background: transparent !important;
    }

更新： 将li 元素居中

    .popular-posts ul { 
       margin: auto !important; 
       width: 1040px !important;
    }

您可能需要使用@Media queries，来控制这些列表在移动设备中的宽度。

【讨论】：

在我的热门帖子代码的“”标签内？如果是这样，它也会影响粘性导航的颜色。
哇，谢谢！那行得通。现在我需要弄清楚如何使该小部件的这四个帖子居中，但我想我可以管理它！哈哈
更新了可能的中心元素。
我试过使用 .PopularPosts1 {text-align:center !important;} .PopularPosts1 li {display:inline !important; float:none !important;}，但这不起作用：/
您需要将<ul> 元素居中。看：prntscr.com/7jprpm 使用margin:auto; 和属性width，你可以正确居中这个<ul>