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
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 13, 2011, 10:26 PM
pranzyt
 
21 posts · Jun 2010
[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
Attached Thumbnails
Click image for larger version

Name:	widget-sample.gif
Views:	194
Size:	16.6 KB
ID:	1357  
  #2  
Old May 13, 2011, 10:44 PM
lmilesw's Avatar
lmilesw
 
10,099 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.
  #3  
Old May 13, 2011, 11:44 PM
pranzyt
 
21 posts · Jun 2010
Havent assigned a domain yet.. its at http://50.22.90.189/~mango

Last edited by pranzyt; May 13, 2011 at 11:58 PM.
  #4  
Old May 14, 2011, 08:03 AM
lmilesw's Avatar
lmilesw
 
10,099 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.
  #5  
Old May 14, 2011, 10:49 PM
pranzyt
 
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!!

Bookmarks

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 11:34 PM.


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