Wordpress Plugin CSS question

[Gurn]

Hi, I am seeking some wordpress help with a plugin that i am using.

Hoping someone can point me in the right direction.

My blog and the blog below use the same WP plugin.

I want my blogs plugin page to look exactly like the one on geakz dot com.

Here is my plugin page:
http://energybloggers.com/free-business-listing/

Here is geakz plugin page:
http://www.geakz.com/directory-of-love/

Any idea as to how I can get this exact mouseover functionality on my plugin page would be greatly appreciated.

If not, no worries.

Take care,

Gurn

 

[anamolousalgori]

hey, I found the code you need from the geakz.com stylesheet. the stylesheeturl is :http://www.geakz.com/wp-content/themes/atahualpa3/style.css.php

the code you need is:

*-------------------- POST KICKER ------------------------*/    div.post-kicker {  	margin: 0 0 5px 0;  	}    div.post-kicker a:link,   div.post-kicker a:visited,   div.post-kicker a:active {  	color: #000000;  text-decoration: none;  text-transform: uppercase;	}    div.post-kicker a:hover {  	color: #cc0000;	}    	  /*-------------------- POST HEADLINE ----------------------*/

I looked hard to make sure this was the right code, and im very sure it is given its the only :hover i found

Im pretty sure this will work if not, pm me and ill take some time out and give you a hand i know wordpress really well.

 

[gaucho1976]

I think you'll have a an extremely hard time to achieve that (which is extremely simple). Problem is your page theme is badly programmed/designed, you have double CSS definitions, you have divs inside tables inside divs which share the same IDs, your 2 posts share the same ID and so on. I'm sincerely amazed that it works at all! Check out the validation for your site:

http://validator.w3.org/check?verbose=1&uri=http://energybloggers.com/free-business-listing/
172 errors and 127 warnings!

your CSS validation throws 27 errors in 3 different pages, including several non-closed elements.

If I was you, I'd apply a "ready to go" theme to make sure everything works as expected (they're free) and then (and only then) apply the hover change you want. The code for it is as simple as this:

.yourclass:hover{background:#333333;}

(you can be more specific and define .yourclass li:hover or .yourclass p:hover, or whatever)

this being said, your example page is modifying the posts via CSS and PHP, so the post container is automatically modified from tr.alt to tr.alt over on mouseover. I'm not sure, but I'd say this is impossible to achieve the way your page is right now.