Services and Facts - Image or icon link to webpage

Hello,

I use your amazing Astrid template on my web www.mjre.cz and I have a question - can I add an a href link to the image or icon? For example, if I click on “Partneři” on my web, I have there a picture RallyService and if I click it, it will redirect to “www.rallyservice.cz”. Please, if it is possible, can you help me?

Thank you very much and have a great day!

Sorry for my english, I’m from Czech Republic, but I think you can understand me. If not, tell me, what I need to explain more.

Hello Pajke,

You can try to do this with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your DashboardSettingsInsert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.page-id-343 .atframework_services_widget .service img').wrap( "<a href='http://www.rallyservice.cz'></a>" );
    });
</script>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you very much, it works!

Now, can you help me with section “Kotakty”? I need Facebook to redirect to our facebook page.

And if I will add some next partners in “Partneři” section, how can I do it? Is it possible too?

Thanks.

Hello Pajke,

  1. You are using Astrid FP: Facts widget on Kontakt page. That widget is not designed to display links.

  2. You can use :nth-child() pseudo-class to target specific service. Please check this topic for more detailed explanation:
    https://athemes.com/forums/topic/change-link-for-projects-employees/

Kind Regards, Roman.

Hello,

I’ve made some changes on my web with :nth-child() pseudo class, as you show me in previous post. It works great, but I have some other questions.

  1. Is it possible to make an a href to image too or is it supposed to be only on title? Here is page in english: http://mjre.cz/en/partners/ and here is, what I have in header:
<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.atframework_services_widget .service:nth-child(1) .service-title a').attr('href', 'https://www.facebook.com/CestiRallyoviSrdcari/');
        jQuery('.atframework_services_widget .service:nth-child(2) .service-title a').attr('href', 'http://www.rallyservice.cz/');
    });
</script>
  1. On PC, when I place my mouse to title, the title fade from grey color to red color. Is it possible to make only title to different color, for example it will fade from white color to red color? The grey color is very dark for my webpage. When I change it directly in Widget menu, it changes description too and the nice “fade” effect stops working.

Can you help me, please? thank you very much!

Best Regards, Pajke.

Hello Pajke,

  1. Please try to use this code instead:
<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.atframework_services_widget .service:nth-child(1) img').wrap( "<a href='https://www.facebook.com/CestiRallyoviSrdcari/'></a>" );
        jQuery('.atframework_services_widget .service:nth-child(2) img').wrap( "<a href='http://www.rallyservice.cz'></a>" );
    });
</script>
  1. Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

div.service h3.service-title > a {
    color: white;
}

div.service h3.service-title > a:hover {
    color: #F30009;
}

Kind Regards, Roman.

Thank you very much!!! That support is incredible, I really love you guys, I can now finnaly say that my web is complete! Thank you very much once again.

You are always welcome Pajke!

By the way, it would be nice if you leave your feedback for Astrid theme on WordPress.org, here is a quick link :slight_smile:

Kind Regards, Roman.