Space between featured image and blog title in archive, removing featured image in posts

Support
#1

Hi there,

I have a site at


I’m trying to do two things:

  1. On the Blog archive page, I’d like to add a space between the featured image and the title.
    https://www.waihekecustomwinetours.co.nz/blog/

  2. I’d like to remove the featured image from the post eg
    https://www.waihekecustomwinetours.co.nz/hawkes-bay-martinborough-01/

Thanks in advance for your help!

#2

Hi There,

To achieve that, please add this custom CSS under Theme Options > CSS:

h2.entry-title {
    margin-top: 15px;
}

.single-post .entry-featured {
    display: none;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#3

Hi,

Thanks for the links, I will check them out for sure.

The CSS you provided is great - just one thing I can’t work out. How can I remove the Link icon when hovering over the Blog featured image on the archive page. Or how to add a custom icon?

#4

Hi,

To remove it you can add the code below in Theme Options > CSS

.entry-thumb:before {
     display:none;
}

If you would like to change it, you can add this code

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

Change \f0c1 with the unicode of the icon that you like

https://fontawesome.com/cheatsheet

You can also change it with an image.

eg.

.entry-thumb:before {
    content: url("image.jpg");
}

Change image.jpg with the url of your image

Hope this helps

#5

Great!

With the icons, should they work without adding anything anywhere else?

I have tried using f4e3 but am just getting a square.

Thanks!

#6

Hi There,

The solid icons is in FontAwesome Pro version only.

Please try with the Regular Icons instead:

Hope it helps :slight_smile:

#7

Thanks - that’s great.

Last 2 things:

  1. How to change opacity and/or color of the overlay on-hover?

  2. How to remove the “Permalink: etc etc” title on-hover?

Thanks so much!

#8

Hi There,

Please also add this custom CSS:

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

Please add this custom JS under Theme Options > JS:

(function($) {
  $(document).ready(function() {
    $('a.entry-thumb').removeAttr( "title" );
  });
})(jQuery);

Hope it helps :slight_smile:

#9

Thank you so much!!

Perfect…

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.