Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Underline links in widgets when hovering


  #1  
Old Oct 5, 2011, 12:26 PM
JulesG
 
47 posts · Sep 2011
Hi,

Using Wordpress 321 and Atrahualpa 367 - ata-round

My work-in-progress Web site is here:
http://julesgobeil.com/wpfr/

Searching has found a few suggestions to underline links when hovering in widgets but they don't seem to work:

Code:
.widget ul li a:hover {
text-decoration: underline !important;
}
Code:
div.widget a:hover {
text-decoration: underline !important!;
}
Any suggestions ?

Thanks
Jules
  #2  
Old Oct 5, 2011, 03:40 PM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you have to get an understanding of CSS. If you have two rules that could apply to an element, the more specific will win out, so if you coded
HTML Code:
.widget ul li a:hover {
text-decoration: underline !important;
}
but there is also a
HTML Code:
div.widget ul li a:hover {
text-decoration: none;
}
the second wins out
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 6, 2011, 05:16 PM
JulesG
 
47 posts · Sep 2011
Thanks for your answer.

Last week, you have shown me that a CSS element that sits on another element will cover the bottom element. The least I could do before posting this question was to check that.

I cannot find any occurrence of "text-decoration: none" attached to hover parameters. All hover CSS has the underline text-decoration.

The links are underlined everywhere when hovering, except in the Categories widget. I spent hours trying to understand why !

What could be wrong ?
  #4  
Old Oct 6, 2011, 07:46 PM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
add the following to CSS Inserts
HTML Code:
div.widget a:hover {
	text-decoration: underline; 
	}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Oct 7, 2011, 06:54 AM
JulesG
 
47 posts · Sep 2011
Many thanks for your help.

As I wrote in my first post, I have already tried your suggestion: the only difference being that I added !important. Unfortunately it doesn't work, with or without !important.

I'm beginning to think something is wrong with my installation. File or line missing, or maybe a curse...

I care to have all links underlined when hovering because it is important for color blind persons.

Any thoughts ?

Thanks for your help
Jules
  #6  
Old Oct 7, 2011, 07:08 AM
juggledad's Avatar
juggledad
 
23,729 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you put it at the end of your CSS Inserts?
I don't see it in the page source.

You have a LOT of additional CSS that looks like it was lifted from somewhere else and it could cause the issue.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Oct 7, 2011 at 07:11 AM.
  #7  
Old Oct 7, 2011, 11:12 AM
JulesG
 
47 posts · Sep 2011
Oh ! I removed it because it didn't work.

The extra CSS code after /* +++ TTG +++ */ is used by my header, menu and footer which are imported from my Web site. All 3 work well.

I guess you found the problem. Putting the underline/hover code before this extra CSS code doesn't work. Putting it at the very end doesn't work either but adding !important makes it work.

I did check this extra CSS code before posting for help and it doesn't relate to "widget". Also, the only "text-decoration" references are set to "underline". Tricky isn't !

It was then easy to find where the problem is by moving the underline/hover code up until it stops working.

I still can't believe that the line that causes the problem is this one:

Code:
/* ++++++++++++++++++++ TTG ++++++++++++++++++++++ */
Even worse, removing this comment line doesn't fix the problem...

This works:
Code:
/* ++++++++++++++++++++ TTG ++++++++++++++++++++++ */

div.widget a:hover {
	text-decoration: underline !important; 
	}
And this doesn't work:
Code:
div.widget a:hover {
	text-decoration: underline !important; 
	}

/* ++++++++++++++++++++ TTG ++++++++++++++++++++++ */
And this doesn't work either:

Code:
div.widget a:hover {
	text-decoration: underline !important; 
	}
And, changing the comment line to this one /* */ doesn't change anything.

Well, at least it works now ! Many many thanks for your help.
Jules

Problem solved

Last edited by JulesG; Oct 7, 2011 at 06:30 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] trying to get links in my widgets to underline when hovered... derekwbeck Sidebars & Widgets 3 Nov 27, 2010 01:26 AM
Hovering over links in sidebar - I want WHOLE background to change, not just text. in10 Sidebars & Widgets 10 Sep 1, 2010 03:30 PM
[SOLVED] How do you change links on pages to have dotted underline heimir Forum How-To 4 Apr 2, 2010 05:45 PM
Underline Links hollow Sidebars & Widgets 0 Feb 19, 2010 02:19 AM
[SOLVED] How to underline links on hover in widgets? Whitelisted Sidebars & Widgets 3 Oct 10, 2009 02:24 PM


All times are GMT -6. The time now is 08:12 AM.


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