Adding a readable title to the Dispatch Magazine Grid

Hi there,

if you re-enable the title on the dispatch magazine Grid WPSP List i can take a look at what CSS you need.

Hey again David

That's done now

We are talking about the Grid right ?
As i cannot see the titles - any caches on the site? If so could you try flushing them ?

Alright, should be visible for you now

Hi Jonas,

Are we talking about the Guides section?

If so, try this CSS:

#wpsp-3410 h2.wp-show-posts-entry-title {
    position: absolute;
    top: 60%;
    background-color: transparent !important;
    padding-left: 20px;
    padding-right: 20px;
}
 #wpsp-3410 .wp-show-posts-inner {
    position: relative;
}
 #wpsp-3410 h2.wp-show-posts-entry-title a {
    color: white;
    text-shadow: 4px 1px 5px rgb(0 0 0 / 50%);
}

Hi Ying

No this is solely for the Magazine Grid on the front page. The WPSP is [wp_show_posts id="961"]

Replacing the IDs with 961 in the css you provided didn't do much apart from moving the text off image

You mean this part?
https://www.screencast.com/t/SKLrYH3xGk7M

The titles are already text and with text shadow, and they're positioned at the lower part of the image.

What else are you trying to achieve?

Perhaps I didn't make my aesthetic vision very clear in the beginning :)

I would like to put a darker shadow behind the text, similar to this https://gyazo.com/851d35c573a8f8c8ee396b31ed5d1fb6

So the title becomes more apparent in the foreground. I've tested some things like the shadow behind the font you mentioned and see currently, but I'd like to see more shadow in the bottom half of the image - this has been a challenge since it seems I need to do it by targeting each individual frame in the grid (because they have varying dimensions and gaps).

Haven't been able to find a solution for this unfortunately

Hi Jonas,

Here is something you may want to try adding in Appearance > Customize > Additional CSS:

.page-hero .wp-show-posts-single:nth-child(1) {
    padding: 1px 5px 8px 0;
}
.page-hero .wp-show-posts-single:nth-child(2) {
    padding: 1px 0 5px 5px;
}

.page-hero .wp-show-posts-single:nth-child(3) {
    padding: 1px 0 8px 5px;
}

.page-hero .wp-show-posts-single:nth-child(4) {
    padding: 1px 0 8px 10px;
}

.page-hero .wp-post-image{
    padding:0 !important;
}

.page-hero .wp-show-posts-image {
    position:relative;
}
.page-hero .wp-show-posts-image:before {
    content:"";
    border-radius:22px;
    width:100%;
    height:100%;
    background-image: linear-gradient(#0000001c, black);
    display:block;
    position:absolute;
    bottom:0;
    left:0;
}

This code would modify the look of the WPSP list on the page hero as such: https://share.getcloudapp.com/7KuQkLAg

Kindly tweak the values to your preference.

Hope this helps! Kindly let us know how it goes. :)

Thank you very much Fernando

This is exactly what I wanted :)

You’re welcome Jonas! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)