Docs

[leehart09]

Hello,

I’m hoping you might be able to help me make a few changes to the what happens on the featured image of blog posts. I know this is something I had found answers to before in relation to portfolio items on another site, but not sure how exactly I achieved it. There are 3 things I’d like to do:

1. Remove the dark background that appears when you hover over the image

2. Change the icon from links to a heart icon

3. Remove the wording “permalink to : “…” ” when you hover over the image.

Is this something that you could help me with?

Many thanks.

[leehart09]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the login url! Regretfully there is something wrong with your site. We are seeing this:

Please ask assistance from your hosting provider. They surely know what is going on at the moment.

Please let us know how it goes.

[leehart09]

I’m not sure what was happening – I’ll contact the hosting provider to check. It seems to be working on my end – are you able to access it now?

[Rupok]

Hi there,

It seems opening on my end. Let’s me try to answer for you.

#1. You can add this under Child Theme’s CSS : Custom > CSS in the Customizer.

.blog .entry-thumb {
  background-color: transparent;
}

a.entry-thumb:hover img {
  opacity: 1;
}

#2. If you want to do this, you need to place the below code within Child Theme’s CSS. It won’t work within Customizer :

.blog a.entry-thumb:hover::before {
  content: "\f004";
}

#3. You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($){
  $('.blog a.entry-thumb').attr('title','');
});

Hope this helps.

[leehart09]

Everything worked perfectly! Thank you – you’ve been such a help! 🙂

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[leehart09]

Hi again Rupok!

I’ve just looked through the other pages on my site, and I realised that the changes we made only affect the appearance of the Blog page itself. Is it possible to extend this effect (i.e. removal of permalink wording, dark background on hover, and change icon to heart) to the ‘Recent Posts’ I have on my homepage, and also the Category and Sub-Category pages for the blog posts.

Thanks,

Catherine

[Paul R]

Hi Catherine,

Yes it’s possible.

You can add this in your child theme’s style.css

body .x-recent-posts .format-standard .x-recent-posts-img:before {
    background-color: hsl(323,88%,40%);
    content: "\f004";
    border-radius: 50%;
}

body .x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    background-color: #fff;
    opacity: 0.6;
}

body .entry-thumb:before {
    content: "\f004";
}

body .entry-thumb {
    background-color: #fff;
}

Hope that helps.

[leehart09]

Thank you! It seems to have changed the appearance site-wide!:) However, I’m still getting the “permalink to” text appear on hover.

Can we remove this site-wide?

[Paul R]

Hi,

You can add this under Custom > Edit Global Javascript in the Customizer.

jQuery(document).ready(function($){
  $('.x-recent-posts a').attr('title','');
  $('body .entry-thumb').attr('title','');
});

Hope that helps

[leehart09]

That did it! Thank you! 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts