Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Styling individual widgets information needed ;)

Build custom WP THEMES, without
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
Old May 13, 2011, 10:26 PM
21 posts · Jun 2010
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
div#alpha_categories-3 {
background: url('http://img98.imageshack.us/img98/6163/pricebg.gif') no-repeat;
height: 217px;
widget title box
div#alpha_categories-3 div.widget-title {
background: url('http://img853.imageshack.us/img853/4889/pricele.gif') no-repeat;
height: 44px;
widget title text
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
Attached Thumbnails
Click image for larger version

Name:	widget-sample.gif
Views:	225
Size:	16.6 KB
ID:	1357  
Old May 13, 2011, 10:44 PM
lmilesw's Avatar
10,168 posts · Jul 2009
Central New York State USA
A link to the site please.
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
Old May 13, 2011, 11:44 PM
21 posts · Jun 2010
Havent assigned a domain yet.. its at

Last edited by pranzyt; May 13, 2011 at 11:58 PM.
Old May 14, 2011, 08:03 AM
lmilesw's Avatar
10,168 posts · Jul 2009
Central New York State USA
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 (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
Old May 14, 2011, 10:49 PM
21 posts · Jun 2010
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!!


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Styling individual menu item eonelson Page & Category Menu Bars 6 Apr 1, 2011 03:04 PM
custom shortcodes css styling help needed kirks Atahualpa 3 Wordpress theme 1 Mar 13, 2011 10:06 PM
[SOLVED] Align individual widgets in a sidebar mvheun Sidebars & Widgets 2 Dec 22, 2010 07:11 AM
Change background color of individual widgets Photokitchen Sidebars & Widgets 4 May 9, 2009 05:55 AM

All times are GMT -6. The time now is 10:44 AM.

Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd.