Wordpress Themes - WP Forum at BFA - [SOLVED] Styling individual widgets information needed ;)

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - [SOLVED] Styling individual widgets information needed ;) (http://forum.bytesforall.com/showthread.php?t=14157)

[SOLVED] Styling individual widgets information needed ;)

Hey there,

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;
}

widget title box

Quote:

div#alpha_categories-3 div.widget-title {
background: url('http://img853.imageshack.us/img853/4889/pricele.gif') no-repeat;
height: 44px;
}

widget title text

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;
}

Now I'm stuck wanting to style the widget content box and links. I tried using the code below;

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

A link to the site please.

Havent assigned a domain yet.. its at http://50.22.90.189/~mango :)

This is not at all complete but it may head you in the right direction. Part of your problem though is you have a fixed size background image for the widget. You should really just use a background color or a repeatable image so it can expand to fill the area.

HTML Code:

div#alpha_categories-3 ul li a:link {

background: url('http://img853.imageshack.us/img853/4889/pricele.gif') no-repeat top left scroll;

height: 4px;

display: block;

text-align: center;

padding: 20px 0;

}

div#alpha_categories-3 ul li a:hover {

background: url('http://img853.imageshack.us/img853/4889/pricelehover.gif') no-repeat top left scroll;

}

Larry sir thank you so so much for your unconditional help. Took little while to play with the adjustments but finally it really worked and having fixed height widget background didnt give any problems either.

Now, I can use the code to customize other widgets also. :)

Thanks a lot!!