[MattHollParticipant]

Hello.

I managed to remove the dotted underline and box-shadow from most elements in my sidebar with the css below, but cannot get rid of it under the tags and divider lines within the boxes. I want no underline of anything here and now drop shadow. Help?

Here is the css I have implemented thus far:

/* remove dotted underline on sidebar links */

.widget ul, .widget ol {
text-shadow: none;
box-shadow: none;
}

.widget ul li a, .widget ol li a {
border: none;
text-shadow: none;
box-shadow: none;
}

/* remove drop shadow on sidebar links */

.h-widget {
text-shadow: none;
box-shadow: none;
}

Please see attached for the drop shadow I still have that I want to get rid of.

Any help is greatly appreciated. Thanks!

[MattHollParticipant]

I’d like to remove drop shadow from tags on the entire site as well, please.

Thanks for any help!

[LelyModerator]

Hello Matt,

Please do give us your page URL with tag so we can check and be specific on our suggestion.

[MattHollParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please add the following CSS:

.widget_tag_cloud .tagcloud a, 
.widget_product_tag_cloud .tagcloud a,
.widget ul li, 
.widget ol li {
    box-shadow: none;
}

Hope it helps 🙂

[MattHollParticipant]

Great! Thanks!

Is there a way to get rid of it on the tags globally as well? On that same page, if you look at the blog post, underneath it says “Irish” for a tag on the post and that still has the drop shadow. I’d like that gone. And I use tags and they show up on other pages and I’d like it gone for all of them. Is it possible.

Thanks!

[ThaiModerator]

Please update the previous CSS to this:

.widget_tag_cloud .tagcloud a, 
.widget_product_tag_cloud .tagcloud a,
.widget ul li, 
.widget ol li,
.entry-footer a {
    box-shadow: none;
}

Let us know how it goes!

[MattHollParticipant]

Perfect!

Sorry to be a bother, but what’s the code for customizing the hover color? Right now it’s white when I hover over an element for the tags and all sidebar content. Would rather customize that. See attached, please.

Thanks again. You guys are great.

[MattHollParticipant]

I’d like to control the non hover background color for all sidebar elements and tags as well. Please.

[ChristopherModerator]

Hi there,

Please add this code:

.widget ul li:hover, .widget ol li:hover {
    background-color: red;
    color: #000;
}
.widget ul li:hover a, .widget ol li:hover a, .widget.widget_text ul li a, .widget.widget_text ol li a, .widget_nav_menu .current-menu-item > a {
    color: #fff;
}

Hope it helps.

[MattHollParticipant]

Thanks! That mostly worked.

I used this to control the regular background color without hover. Does this look okay?

.widget ul li, .widget ol li {
background-color: blue;
color: #000;
}

The hover is not fixed on the tags and tag cloud in the sidebar, though.

Please see attached. I just dropped a blue in there for testing. Tag and tag cloud unaffected for regular colors or hover.

Thanks again for your help.

[ChristopherModerator]

Hi there,

Please update previous code to :

.widget ul li:hover, .widget ol li:hover, .widget_tag_cloud .tagcloud a:hover, .widget_tag_cloud .tagcloud a:active {
    background-color: rgb(224, 219, 192);
    color: rgb(32, 28, 64);
}
.widget ul li, .widget ol li, .widget_tag_cloud .tagcloud a {
    background-color: blue;
    color: #000;
}

Hope it helps.

[MattHollParticipant]

That partially works.

The tags in other areas aren’t affected by this. So, every place that shows tags on the entire site should be affected by this.

And some of these tweaks make it so non clickable stuff is having hover colors. For instance, the site statistics at the bottom of the sidebar are not actually clickable, so I don’t want their colors to change at all with a hover. Right now, their colors are affected the same as the tagcloud. Please see attached.

And another thing I noticed. For the “recent posts”, that entire little box is clickable and shows hover colors for the background and text. I can click anywhere inside of that box and it will take me to the link. The other elements in the widget are not that way other than the tag cloud. If at all possible, I’d like all elements in that sidebar that are clickable to have it so hovering over the box is clickable and changes colors on hover. Right now, those other elements, archive, categories and some links, have the color of the background change on hover over that box, but it’s not clickable until you get right over the letters. The letters do not change until you get right over the letters. It’d be better if anyone could just hover or click anywhere over that box. Does that make sense? Like a button.

The site can be viewed at the link I posted in my original post.

Thanks for your help. It’s almost there!

[ChristopherModerator]

Hi,

Please add this :

footer.entry-footer.cf a:hover {
    background-color: rgb(224, 219, 192);
    color: blue;
}
div#wpstatistics_widget-3 li:hover {
    background: transparent;
}
.widget ul li a {
    display: block;
    width: 100%;
}

Making whole li clickable will drop posts number in second line and we can’t fix this with CSS.

Hope it helps.

[MattHollParticipant]

Nearly perfect. Thanks!

I think, hope this is the last thing for this thread:

The entire box is not clickable. The center area is. Like, if you hover over the edge of the box, it only changes the hover color on those numbers and is not yet clickable. You don’t have to go right over top of the letters for it to be clickable, but it doesn’t extend to the edge of the box. If possible, I’d like it to be the entire box as clickable and hoverable.

Thanks again. Just about done with this.

Edited to correct something I didn’t notice that you addressed already.

[Author]

Posts