[JoonaParticipant]

Hi there,

I’ve managed to overlay the blog title and meta on top of the featured image on a single blog post, like the image below shows:

Now I’d like to achieve the same thing on the blog page which lists all the recent articles. What should I add to the Custom CSS in order to get that working?

[John EzraMember]

Hi there,

Thanks for writing in! We’re not able to see your attachment for some reason. Do you have link to the image directly? Also, please provide us with login credentials so we can take a closer look. To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[JoonaParticipant]

This reply has been marked as private.

[RupokMember]

Hi Joona,

Thanks for writing back. You can use this CSS :

.blog .entry-wrap .entry-header {
  background: #fff none repeat scroll 0 0;
  left: 0;
  padding: 20px;
  position: absolute;
  top: 11%;
}

Hope fully you will be able to adjust the color, background like the other one I believe.

Hope this helps.

Cheers!

[JoonaParticipant]

Hi,

That does the trick, but it places all the titles on top of the first image, not the image of the right post. See it here: https://www.evernote.com/shard/s92/sh/6688d0b7-9b2e-4527-9dee-c6790e29d2d6/989b06e847090c23

And yes, editing the color etc is not a problem, just struggling with the right selectors here.

Cheers!

[Rue NelModerator]

Hello There,

To resolve your blog and archive pages, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.blog .hentry, .archive .hentry').each(function(index, element){
    $(this).find('.entry-header').insertAfter( $(this).find('.entry-featured a') );
  });
})(jQuery);

And then you also need to add the following css code in the customizer, Appearance > Customize > Custom > CSS

.blog .entry-featured .entry-header,
.archive .entry-featured .entry-header {
    background-color: rgba(42, 57, 65, 0.95);
    padding: 20px;

    position: absolute;
    top: 38%;
    width: 100%;
    text-align: center;
}

.blog .entry-featured .entry-header,
.blog .entry-featured .entry-header a,
.archive .entry-featured .entry-header,
.archive .entry-featured .entry-header a {
    color: #fff !important;
}

http://prntscr.com/as383h

Please let us know if this works out for you.

[JoonaParticipant]

That did the trick, thanks!

I needed to work a bit on media queries to make it look good on mobile as well, but now everything is as it should be. Thanks a lot for your help 🙂

[ThaiModerator]

You’re very welcome 🙂

If you need anything else please let us know.

[Author]

Posts