I searched throughout the forum about the information for what I wanted to achieve but the threads where limited and not enough information. So, I finally decided to post a thread with the hope that some talented member out there will guide me through.
ok here is a little background. I use Alpha categories plugin to show categories in separate widgets. And now I want to style each individual category widgets. I've been able to style widget background, widget title box and widget title with the codes below.
widget container
Quote:
div#alpha_categories-3 { background: url('http://img98.imageshack.us/img98/6163/pricebg.gif') no-repeat; height: 217px; } |
Quote:
div#alpha_categories-3 div.widget-title { background: url('http://img853.imageshack.us/img853/4889/pricele.gif') no-repeat; height: 44px; } |
Quote:
div#alpha_categories-3 div.widget-title h3 { color: #ffffff; font-size: 1.1em; font-weight: bold; letter-spacing: -0.5px; padding: 20px 0 0 16px; } |
div#alpha_categories-3 div.widget ul li {
background: background: url('http://img853.imageshack.us/img853/4889/pricele.gif') no-repeat;
height: 30px;
}
div#alpha_categories-3 div.widget ul li:hover {
background: background: url('http://img853.imageshack.us/img853/4889/pricele.gif') no-repeat;
color: #000000 !important;
}
However, the codes seems to be not working or I'm missing something here. Please guide me the correct way of achieving following things. (I know the universal styling for these but I want to make change in only the particular widgets not in all widgets)
1. widget list link color
2. widget list background image
3. widget list height equal to background image
4. widget list link hover color
5. widget list link hover background.
I've attached the image in here too.
Hoping for the positive response.
Thanking you,
Ranzyt Paul