Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Autofocus Pro Hover & GD Star Rating WordPress


I use Autofocus Pro 2.0.6.

<em>Edit: solved without help:
- Integration of GD-Star
- Transparency

still need help with: custom Color</em>

When I hover a picture on the frontpage i get an overlay in the color I defined as color for links.
<strong>I want to change the color and the transparency of the hover effect.</strong>

Since I am already on it, I want to integrate the GD-Star rating system (review only)
I managed to show it on the single post side where I want to have it using
<?php wp_gdsr_render_review(0, 46, 'plain', 12)?>

Somehow I also managed to get it on the frontpage to show on hover on the sticky posts (I have no clue how i did this)

<strong>I also want it to show up if I hover one of the other pictures on the frontpage.</strong>

<em>Since the theme will be upgraded, I need to know where to do it myself, just having someone do it is not an option, because I will have the same problem the next time I upgrade the theme... </em>

Answers (3)


Duncan O'Neill answers:

The css for the background is auto-generated using your link colour.

To over-write those styles you need to add more specific styles to your style.css in your theme's folder. Add the rule(s) you want to the bottom of that file.

For example, this code should make the first thumbsil image ( for 'Doubt' ) on your homepage red on hover. It will also affect any other thumbnails whose posts belong in this category.

#main #content .post.category-drama-filme {background:red;}

This should work in older IEs as well, according to code I used on another project.

You can go ahead and colour-code other categories like so; ( 2nd image )

#main #content .post.category-musik {background:yellow;}

To affect all gridded thumbnails, this will work;

#main #content .post {background:red;}

or only on the homepage;

.home #main #content .post { background:red;}

I'm sure you get the idea. Please let me know if you need further help.


P.S. style.css is at

Fridolin Weiner comments:

Not only did it work but I also understand why!
Thats the kind of answer I needed!
You're the best!!


Arnav Joy answers:

so can you tell what color you want ?

Arnav Joy comments:

i have done something similar for changing color here

Fridolin Weiner comments:

I have not decided yet, just want to know the place where to change it the future... I would like a greytone with very high transparency for now...

I just can't find the place where I would change it...


Gabriel Reguly answers:


Sorry, I just rushed an answer without even reading the question :P


Fridolin Weiner comments:

This image gets rendered by gd-star-rating using <?php wp_gdsr_render_review(0, 46, 'plain', 12)?>
I want the rendered image (just like on my blog pages on the right site beneath the date) to show up on the front page as well.

You can see, I already managed to do this on the big pictures on the top, but i also need it on the small pictures on my front page.

Additionally I'd like to know where I can change the color and transparency of the hover effect on the frontpage.
(the one which is blue right now) see Arnavs link, he managed to change the color on his webpage.

I guess I basically need to know where to look in the stylesheet, but I am not sure where and afraid that I damage my whole design ^^

Fridolin Weiner comments:

404 Template
Archive Page Template Page Template
Attachment Template
Author Template
Blog Template Page Template
Full Width Page Template Page Template
Main Index Template
Page Template
Search Results
Single Post
Theme Functions

RTL Stylesheet
Visual Editor RTL Stylesheet
Visual Editor Stylesheet

Gabriel Reguly comments:


Search for this CSS entry,

.sf-menu ul a:hover, .home #content .post, .search .af-layout #content .post, .archive .af-layout #content .post, .archive .post-image-container, .archive .post-video-container, .entry-gallery-container #nav a:hover, .entry-gallery-container #nav a.activeSlide, .page-link a:link, .page-link a:visited {
background-color: #4B81AB;

Add this below it

.entry-gallery-container #nav a:hover, .entry-gallery-container #nav a.activeSlide {
background-color: #FF0000;

Now you should see red instead of blue.


Fridolin Weiner comments:

in the style.css?

I searched the document.
.sf does not exist in any .css nor .php-file

/* =Blog Template
-------------------------------------------------------------- */
.af-blog-template #content article {clear: both; display: table; margin-bottom: 66px;}
.af-blog-template #content .page-title {margin-top: 22px; margin-bottom: 66px}
.af-blog-template #content article header {clear: none;float: none;margin:0;padding: 0;display: table;}
.af-blog-template #content header .entry-title {padding: 11px 8px; float:left; width:595px; border-right: 1px dotted #CCC; display: table-cell; vertical-align: middle}
.af-blog-template #content header .entry-date {margin-left:612px; display: table-cell; vertical-align: middle; padding: 11px 16px; font-size:16px; font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif; }
.af-blog-template #content article .entry-content {float: left}
.af-blog-template #content footer {padding-top: 0;float: right; clear: right; width: 172px; margin-left: -612px; padding: 0 0 22px 16px}


/* =AutoFocus Layout Image Display
-------------------------------------------------------------- */
/* Default / Staggered Layout */
.af-default #container {width:800px; overflow: hidden;}
.af-default #content {width:804px;}
.af-default #content .hentry {height:300px;margin:0 4px 4px 0; padding:0 16px;}
.af-default #content .hentry.p1,
.af-default #content .hentry.p11,
.af-default #content .hentry.p21 {width:570px;}
.af-default #content .hentry.p2,
.af-default #content .hentry.p12,
.af-default #content .hentry.p22 {width:162px;}
.af-default #content .hentry.p3,
.af-default #content .hentry.p13,
.af-default #content .hentry.p23 {width:264px;}
.af-default #content .hentry.p4,
.af-default #content .hentry.p14,
.af-default #content .hentry.p24 {width:468px;}
.af-default #content .hentry.p5,
.af-default #content .hentry.p15,
.af-default #content .hentry.p25 {width:366px;}
.af-default #content .hentry.p6,
.af-default #content .hentry.p16,
.af-default #content .hentry.p26 {width:366px;}
.af-default #content .hentry.p7,
.af-default #content .hentry.p17,
.af-default #content .hentry.p27 {width:162px;}
.af-default #content .hentry.p8,
.af-default #content .hentry.p18,
.af-default #content .hentry.p28 {width:570px;}
.af-default #content .hentry.p9,
.af-default #content .hentry.p19,
.af-default #content .hentry.p29 {width:468px;}
.af-default #content .hentry.p10,
.af-default #content .hentry.p20,
.af-default #content .hentry.p30 {width:264px;}
.af-default #content .hentry header {padding: 22px 0 0}
.af-default #content .entry-title,
.af-default #content .entry-date {font-size:22px}

/* Portfolio / Grid Layout */
.af-grid #content {margin-top:0px;padding:0;}
.af-grid #content .hentry {width:188px;height:188px;margin:0 16px 16px 0;padding:0;}
.af-grid #content .hentry.p4,
.af-grid #content .hentry.p8,
.af-grid #content .hentry.p12,
.af-grid #content .hentry.p16,
.af-grid #content .hentry.p20,
.af-grid #content .hentry.p24,
.af-grid #content .hentry.p28,
.af-grid #content .hentry.p32 {margin-right:0;}
.af-grid #content .hentry header {padding:16px 16px 0}
.af-grid #content .entry-title,
.af-grid #content .entry-date {font-size:18px}

/* AF Layout Styles */
.af-layout #content .hentry {display: block; float:left;clear:none;position:relative;clear:none;overflow:hidden}
.af-layout #content .hentry header {position: relative; z-index: 3; }
.af-layout #content .entry-image {position: absolute; top:0; left:0; z-index:1;display: none; padding:0;}
.af-layout #content .entry-title {line-height: 22px;margin-bottom: 11px; padding: 0}
.af-layout #content .entry-date {font-weight:normal; line-height: 22px; margin-bottom: 11px;}
.af-layout #content .entry-title,
.af-layout #content .entry-date {font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;}
.af-layout #content .entry-title,
.af-layout #content .entry-date,
.af-layout #content .entry-content {position: relative; z-index: 3; width: inherit; max-width: 478px}
.af-layout #content .entry-content p {padding: 0;line-height: 16.5px;}
.af-layout #content .entry-content a {font-weight: 800}
.af-layout #content .entry-utility {position: absolute; top:0; right:0; z-index: 5; margin: 0; display: inline-block; width: 45px; border-width: 0;}
.af-layout #content .edit-link {text-align: center; font-size: 9px; text-transform: uppercase}
.af-layout #content .edit-link a {display: block; line-height: 18px; float: none;}
.af-layout #content .edit-link {background: red; color: white;}
.af-layout #content .edit-link {background: green; color: white;}
.af-layout #content .edit-link a.reset-position {background: dimgrey; color: white;}
.af-layout #content .edit-link {content:"\270E";font-size:13px;line-height:6px;margin-left:3px;}
.af-layout #content .edit-link {content:"\2714";font-size:10px;line-height:6px;margin-left:3px;}
.af-layout #content .edit-link a.reset-position:after {content:"\21A9";font-size:13px;line-height:6px;margin-left:3px;}

Gabriel Reguly comments:


I am glad to hear that you solved the other issues.

Try searching for

<style type="text/css">
/* <![CDATA[ */

.sf-menu ul a:hover,

Seems to me that it is generated code, so it could be in any php file of the theme.

Good luck,