Autofocus Pro Hover & GD Star Rating WordPress
- SOLVED
Homepage:
www.fridolinweiner.de
I use Autofocus Pro 2.0.6.
<em>Edit: solved without help:
- Integration of GD-Star
- Transparency
still need help with: custom Color</em>
1.
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>
2.
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.
best,
P.S. style.css is at
http://www.fridolinweiner.de/wp-content/themes/autofocuspro/style.css
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
http://acmee.org/drc/?lang=en
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:
Hi,
Sorry, I just rushed an answer without even reading the question :P
Regards,
Gabriel
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:
<strong>Templates</strong>
404 Template
(404.php)
Archive Page Template Page Template
(archive-page.php)
Archives
(archive.php)
Attachment Template
(attachment.php)
Author Template
(author.php)
Blog Template Page Template
(blog-page.php)
Comments
(comments.php)
Footer
(footer.php)
Full Width Page Template Page Template
(fullwidth-page.php)
Header
(header.php)
Main Index Template
(index.php)
Page Template
(page.php)
Search Results
(search.php)
Sidebar
(sidebar.php)
Single Post
(single.php)
Theme Functions
(functions.php)
autofocus-filters.php
(autofocus-filters.php)
autofocus-flickr.php
(autofocus-flickr.php)
autofocus-help.php
(autofocus-help.php)
autofocus-images.php
(autofocus-images.php)
autofocus-options.php
(autofocus-options.php)
autofocus-post-meta.php
(autofocus-post-meta.php)
autofocus-shortcodes.php
(autofocus-shortcodes.php)
content-autofocus.php
(content-autofocus.php)
content.php
(content.php)
js.options.php
(js.options.php)
phpFlickr.php
(phpFlickr.php)
sidebar-footer.php
(sidebar-footer.php)
style.options.php
(style.options.php)
<strong>Styles</strong>
RTL Stylesheet
(rtl.css)
Stylesheet
(style.css)
Visual Editor RTL Stylesheet
(editor-style-rtl.css)
Visual Editor Stylesheet
(editor-style.css)
Gabriel Reguly comments:
Hi,
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.
Regards,
Gabriel
Fridolin Weiner comments:
in the style.css?
I searched the document.
.sf does not exist in any .css nor .php-file
but:
/* =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}
and
/* =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 a.post-edit-link {background: red; color: white;}
.af-layout #content .edit-link a.save-position {background: green; color: white;}
.af-layout #content .edit-link a.reset-position {background: dimgrey; color: white;}
.af-layout #content .edit-link a.post-edit-link:after {content:"\270E";font-size:13px;line-height:6px;margin-left:3px;}
.af-layout #content .edit-link a.save-position:after {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:
Hi,
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,
Gabriel