I messed around a bit and figured out how to add a link the service thumbs as well since I might use this section to link to my portfolio pages. I took the instructions from the Sydney theme and modified them for Astrid. The “if” statement from Step 4 of the Sydney instructions didn’t work for me here, but I found a way to make the links work without it.
I’m posting my solution in case anyone else wants to give it a try, but I’m a hack at this stuff and really don’t know what I’m doing. So if there’s a better way please let me know.
-
create a child theme
-
duplicate “/inc/framework/widgets/front-services.php” from parent theme to the child theme
-
open front-services.php in your child theme
-
change this line:
<?php the_post_thumbnail('astrid-small-thumb'); ?>
to:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('astrid-small-thumb'); ?></a>
-
Activate your child theme
-
open functions.php in your child theme and add this line:
if ( function_exists('siteorigin_panels_activate') ) {
require_once get_template_directory() . "-child/inc/framework/widgets/front-services.php"; }
- open functions.php in your parent theme and change this line:
require get_template_directory() . "/inc/framework/widgets/front-services.php";
to:
// require get_template_directory() . "/inc/framework/widgets/front-services.php";
Please make sure you edit the file from the FTP not from wp editor.
The only problem with this method is if the parent theme is upgraded, you will need to edit the functions file again.
I also added this css to the child theme to add some simple hover effects to the thumbs:
/*set hover styles for images in Services section of Astrid homepage */
.service-thumb img {
/*image border /
border: 1px solid transparent;
padding: 1px;
transition: border-color .3s linear;
-moz-transition: border-color .3s linear; / FF3.7+ /
-o-transition: border-color .3s linear; / Opera 10.5 /
-webkit-transition: border-color .3s linear; / Saf3.2+, Chrome */
/*image opacity */
opacity: .8;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.service-thumb img:hover {
/*image border */
padding: 1px;
border-color: #fcd088;
/*image opacity on hover */
opacity: 1.0;
}