Problem adding CSS on a per widget basis in sidebar

Tagged: catch box pro, css, widgets

This topic has 6 replies, 2 voices, and was last updated 9 years, 7 months ago by robertjm.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
May 6, 2015 at 10:01 pm #57281
robertjm
Participant
Hi all,

I’m trying to customize the look/feel of the widgets in the “secondary” section. If I put the change inline with a style reference, it works just fine. However, if I create a class in the customized css section of the theme, it does absolutely nothing.

Here’s the widget text:
```
<center>
<strong>
<a href="http://wp.raindefense.com/emergency"  class="no-dec" />
Request 24/7<br>Emergency Leak Repair
</a>
</strong>
</center>
```
And here’s what I’ve got in my Customized CSS:
```
.no-dec {
color: #7FFF00;
text-decoration:none;
}
```
(ignore the garish Chartreuse color. I was using it for testing purposes).

I also tried specifying a .widget:hover section. But, that does nothing either.

Here’s the page link.
May 7, 2015 at 1:11 am #57303
Sakin
Keymaster
@robertjm : You css should be as below:
```
#secondary a.no-dec {
color: #7FFF00;
text-decoration: none;
}
```
May 7, 2015 at 10:43 pm #57345

robertjm
Participant

Thanks!! That fixed the color issue, as well as the underline when the page is brought up. However, when I hover the mouse directly over the link, I’m still getting the line underneath it. I was under the impression the text-decoration:none should take care of that.

Is there another specification I need for turning off the mouseover link?

Thanks!

Robert

May 8, 2015 at 2:45 pm #57386
Sakin
Keymaster
@robertjm: You can add the following css:
```
.widget a:hover,
.widget a:focus,
.widget a:active {
	text-decoration: none;
}
```
May 8, 2015 at 9:05 pm #57406

robertjm
Participant

Hmmm…Tried that. But, it didn’t work. 🙁

To be clear, I’m talking about the link that appears underneath the words of the hypertext link, which appear when your mouse pointer is right on top of the link, and then disappears when your mouse moves away.

May 9, 2015 at 11:04 am #57439

Sakin
Keymaster

@robertjm: Yes that custom css should work. Maybe your other css is not correct in Custom CSS box. So, can you add that CSS at the top of your Custom CSS box, before any other css.

May 9, 2015 at 12:24 pm #57442

robertjm
Participant

Thanks again! It’s now working when I moved it from the very bottom to the very top below a couple of font imports. Strange!
Author

Posts