Blogroll HTML Not Like that of other Widgets

• 

  teotwawkidiary · Member · Jun 30, 2009 at 2:54 pm

  • Copy link
  • Add topic to favorites

  Most widgets (I’m using Pages and Categories) use something like this:

  
<h3>Title</h3>

  • Item...

  The Blogroll widgets uses the same approach, but wraps the whole thing within an <li> tag. This makes styling it rather difficult. Who do we have to bribe to modify this HTML code?

  The blog I need help with is: (visible only to logged in users)

• 

  teotwawkidiary · Member · Jun 30, 2009 at 2:56 pm

  • Copy link

  OK, that didn’t turn out very well. What I meant to say regarding the code for most widgets: <h3>Title</h3><ul><li>Item...</li></ul>

• 

  thesacredpath · Member · Jun 30, 2009 at 3:06 pm

  • Copy link

  We need a link to the blog please.

• 

  teotwawkidiary · Member · Jun 30, 2009 at 3:41 pm

  • Copy link

  http://teotwawkidiary.wordpress.com/

  You’ll notice the funky roll over effects in the Blogroll. The nested nature of the LI tags is hard to compensate for.

• 

  thesacredpath · Member · Jun 30, 2009 at 3:48 pm

  • Copy link

  I only see one entry in the blog roll, and it behaves exactly as the links in the categories and pages widgets: the text background goes black and the text becomes underlined.

  What exactly is “funky?”

  What browser are you using?

• 

  teotwawkidiary · Member · Jun 30, 2009 at 5:46 pm

  • Copy link

  I’ve added another link to more clearly demonstrate the issue.

  If you mouseover the “Blogroll” header or any of the links, all other links will change foreground color in a manner that I do not wish to occur. This is because there is an LI tag that wraps around the entire Blogroll section, so it reads the style definition for LI within sidebar. Each link, then, is an LI within an LI, making it a tad difficult to style for events such as hover.

  I could re-write the CSS code for the sidebar DIV to solve this problem. Ideally, though, I’d like to see the HTML that the system spits out changed to be consistent with how the other widgets are implemented.

• 

  teotwawkidiary · Member · Jun 30, 2009 at 5:48 pm

  • Copy link

  BTW, this occurs on FireFox and Safari on the Mac, but not on IE for Windows.

• 

  thesacredpath · Member · Jun 30, 2009 at 5:55 pm

  • Copy link

  OK, I see what you mean. This behavior does not happen with an unmodified version of the ChaoticSoul theme. It is something that you have done in the CSS.

• 

  teotwawkidiary · Member · Jun 30, 2009 at 6:01 pm

  • Copy link

  I do have a tendency to make life hard on myself. :D

  Thanks for loaning me your eyeballs.

• 

  thesacredpath · Member · Jun 30, 2009 at 6:07 pm

  • Copy link

  Not a problem. I’ve been looking at things but as of yet haven’t figured out what is doing it.

• 

  teotwawkidiary · Member · Jul 6, 2009 at 3:11 pm

  • Copy link

  OK, I’ve figured this out. My original CSS code was:

  #sidebar LI:hover {
  background:#220000;
  }

  All I needed to do was adjust the selector, thus:

  #sidebar UL LI:hover {
  background:#220000;
  }

  Since the LI which wraps around the Blogroll is not contained within a UL, it will not pick up this style.

• 

  thesacredpath · Member · Jul 6, 2009 at 3:28 pm

  • Copy link

  Glad you got it figured out.

• 

  teotwawkidiary · Member · Jul 22, 2009 at 11:24 am

  • Copy link

  I finally through in the towel with the whole LI:hover because I couldn’t get it two work when I had nested categories. Also, when you think about it, it’s not a very usable approach since, in a user’s mind, when the highlight occurs, you should be able to click the link. However, with the LI:hover approach, it is possible to trigger a hover without the mouse being over the link.

  Anyways, I switched to just an A:hover definition. Might not look quite as tight, but it works now matter how nested things get and will always active the link when the mouse is over it.