I am experiencing difficulty in altering the background color of my popular posts widget on my website. Upon investigation, I discovered that the issue is associated with my sticky navigation menu. The background of my sticky navigation menu is black, and inexplicably, this has impacted the background color of my popular posts widget. Below is the code governing the background color for my sticky navigation:
/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #000000;
border: 0px solid #eeeeee;
text-align: center !important;
}
My aim is to have the background color of my popular posts widget as transparent or white while preserving the black background color of my sticky navigation.
The following is the 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 have attempted to add:
background: #ffffff;
within the specified code block, but it has not resulted in a change in the background color. Any suggestions on how to address this issue?