Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   "Recent-comment" widget (list style) (http://forum.bytesforall.com/showthread.php?t=2274)

cosmiclove Jul 6, 2009 10:53 AM

"Recent-comment" widget (list style)
 
Hi there,
I am a new ATAHUALPA user but first of all, let me tell how happy I am to have found this theme. It rocks, and I will make a donation pretty soon. The developers and forum admin deserve every single penny for their hard work!!!

Now back to my question...I was looking at how to style the list in widget and was able to do so in HTML/CSS Insert-->CSS INSERT . It worked just fine (pls, look below at the code i inserted). But now I placed/activated the "Recent Comment" widget in the sidebar and I notice that this widget unfortunately still uses the not-so-good-looking gray bars that come with Atahualpa by default. I thought the change I made earlier would apply to ALL subsequent widget I will place in sidebars. Could you please tell me if I must specifically also style a "Recent-Comment" div/class in CSS INSERT? Will I have to do the same again for other widget (Blogroll for example) if I choose to activate them? I am pasting the code in inserted in CSS INSERT for my widgets "Meta" and "Category". I want the same format as below for all items in any widgets in sidebars. How can I do this? Thanks much in advance.
HTML Code:

.widget ul li a:link,
.widget ul li a:visited,
.widget ul li a:active {
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/bullets/control_play.gif) no-repeat 0 3px;
}

.widget ul li a:hover {
/* leave out the next line if you want to keep the default black font color on hover,
just showing you where you would change the hover font color */
color: #4177bb !important;
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/bullets/control_play_blue.gif) no-repeat 0 3px;
}
.widget ul li ul li a:link,
.widget ul li ul li a:visited,
.widget ul li ul li a:active {
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/bullets/arrow_right.gif) no-repeat 0 3px;
}
.widget ul li ul li a:hover {
/* leave out the next line if you want to keep the default black font color on hover,
just showing you where you would change the hover font color */
color: #4177bb !important;
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/bullets/arrow_right_green.gif) no-repeat 0 3px;
}

.widget ul {
list-style-type: none !important;
padding-left: 0;
margin-left: 0;
}

.widget ul li {
padding-left: 0px;
margin-left: 0px;
display: list-item;
}

/* indent sub items a bit more */
.widget ul li ul li {
margin-left: 10px;
}


juggledad Jul 6, 2009 11:35 AM

What's the url

cosmiclove Jul 6, 2009 11:38 AM

Thanks for your quick reply.
the url is http://frenchtasticpeople.com
Thanks for taking a look at it.

juggledad Jul 6, 2009 01:33 PM

recent comments uses '.widget_recent_comments' for styling

cosmiclove Jul 6, 2009 07:10 PM

Good evening, Jugglehead.

I used '.widget_recent_comments' to style the sidebar comments as u suggested. However, I do not see any changes to the sidebars after I saved my modifications in CSS Insert. Here is the code I inserted: Could you or anyone please tell me if I did it wrong? Thanks for all the help!
HTML Code:

.widget_recent_comments ul li a:link,
.widget_recent_comments ul li a:visited,
.widget_recent_comments ul li a:active {
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/bullets/control_play.gif) no-repeat 0 3px;
}
.widget_recent_comments ul li a:hover {
/* leave out the next line if you want to keep the default black font color on hover,
just showing you where you would change the hover font color */
color: #4177bb !important;
border-left: 0 !important;
padding-left: 13px !important;
background: url(/wp-content/themes/atahualpa/images/bullets/control_play_blue.gif) no-repeat 0 3px;
}


Flynn Jul 13, 2009 06:05 PM

Since 3.4 the left-border is on the <LI> instead of the <A>, except for the pages and categories widgets, for better plugin compatibility.

div.widget ul li {
border-left: 0 !important;
...put here what you have on the links <a> now, i.e. the icons
}

Set the <A> to no padding, no margin, display: block

Put the decoration and left-padding on the <LI>

Also, you have that Wordpress specific inline style for .recentcomments in the header. Add this to functions.php

remove_filter('wp_head', 'wp_widget_recent_comments_style' );


All times are GMT -6. The time now is 03:49 AM.

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