I'm having trouble changing the background colour of my popular posts widget on my website. I figured out the problem was linked to my sticky navigation menu. So my sticky navigation menu's background is black and for some reason this has also affected the background colour of my popular posts widget. This is my code for the background colour for my sticky navigation
/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #000000;
border: 0px solid #eeeeee;
text-align: center !important;
}
I want the background colour of my popular posts widget to be transparent or white while keeping the background colour of my sticky navigation black.
Here's my code for my popular post
<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>
I've tried implementing
background: #ffffff;
within that block of code but it still does not change the background colour? Any ideas on how to fix this?
Insert this in your
<head>inside of<stye>tags:Update: To center the
lielementsMay be you need to use @Media queries, to control the width of these list in mobile devices.