Getting wpsp-align to Look Like Dispatch

Hi there,

the Dispatch site uses a couple of Hook Elements to add a wrapper around the post content ( title, excerpt, read more etc. ).

Instead of creating some Hooks, you can add this PHP Snippet to the site:

add_action('wpsp_before_header', function(){
    echo '<div class="wpsp-content-wrap"><!-- Openeing wrapper -->';
},15);
add_action('wpsp_after_content', function(){
    echo '<!-- Close WPSP Wrapper --></div>';
},15);

Adding PHP: https://docs.generatepress.com/article/adding-php/

Halfway there! I added the PHP and the excerpt is now to the right of the image but the title is still above the image and excerpt. Is there another bit of code for that? Thank you!

Edit your WPSP List and on the Images tab set the Image Location to Above Title.

Oh that was easy, thank you! a couple more questions, if I could...I have my in-content links set to be blue and underlined. Could you tell me how to make the title links in this wpsp list to be just black and then maybe another color on hover? Is this the correct identifier: wp-show-posts-entry-title?

Also, I have a 3 post horizontal wpsp list above this one and I need just a wee bit more spacing between that horizontal list and this vertical list. Could you tell me the bit of code which would change that spacing?

And lastly the image size in this vertical wpsp list is set to 500 wide by 300 high but only one of the 4 feature images listed is that size the other three are a bit less wide. They were all the same original size. Could you tell me how to correct that?

Thank you very much for all your help!

Can you share a link to the page where i can see this ?

Hi David - thanks for the reply on the weekend, appreciate that. It took me a bit because the page hadn't been published yet. It is published now and I've set it as the Front page. Link is below. It looks rough at the moment but hoping to get it sorted. Also, I had followed your instructions in another post to make a header like in Dispatch and it looked great and showed on the blog page, but once I made a static home page, I can't get the header to appear. The display rule is set to Front Page so I'm not sure why it's not showing.

Hi Lori,

Oh that was easy, thank you! a couple more questions, if I could…I have my in-content links set to be blue and underlined. Could you tell me how to make the title links in this wpsp list to be just black and then maybe another color on hover? Is this the correct identifier: wp-show-posts-entry-title?

For the title: Yes, that selector is halfway there.

You can try this CSS:

.wp-show-posts-entry-title a{ color: black; }

.wp-show-posts-entry-title a:hover{ color: red; }

Change the colors to your preference.

Also, I have a 3 post horizontal wpsp list above this one and I need just a wee bit more spacing between that horizontal list and this vertical list. Could you tell me the bit of code which would change that spacing?

Can you specify which part do you want the space to be applied? Do you want it after the horizontal list? Something like this? https://share.getcloudapp.com/bLuk1LZP

If so, we can specifically add a margin-bottom value to the horizontal list to add the space.

Example CSS:

section#wpsp-3385 {
    margin-bottom: 60px;
}

#wpsp-3385 is the element ID of the horizontal WPSP list. We simply added margin-bottom to it.

And lastly the image size in this vertical wpsp list is set to 500 wide by 300 high but only one of the 4 feature images listed is that size the other three are a bit less wide. They were all the same original size. Could you tell me how to correct that?

We can try adding CSS to control this.

Try this one:

.wp-show-posts-image {
    height: 300px;
    overflow: hidden;
    max-width: 500px;
}

.wp-show-posts-image img{
    object-fit: cover;
    width:100%;
    height: auto;
}

but once I made a static home page, I can’t get the header to appear. The display rule is set to Front Page so I’m not sure why it’s not showing.

Not exactly sure what you mean. Can you show us what's supposed to show?

Note: You can't have 2 Header Elements that overlap display rule location. only the older one will show up.

Example scenario:

Say, you have 2 Header Elements. The older Header Element has a display rule location of "Entire site" while the newer one has a display rule of "Front page".

Since the older Header Element's "Entire Site" overlaps display rule with the newer one ("Entire site" includes "front page"), only the older one will appear.

Thank you Elvin!

Regarding the entry title link color and hover color - the bit of code did the trick. However, I'm trying to get it to not be underlined and I added text-decoration: none to both link and hover and that didn't seem to work. Any suggestions?

Regarding adding a margin to the end of the wpsp lists - yes! What you showed is exactly what I wanted, and that code worked. Good to know for other areas where I need space between the wpsp blocks.

Regarding the image size issue - your code worked perfectly!

Now regarding my header not appearing on front page issue - I made a header element like the one in Dispatch and set it to appear on Front Page. I wanted to make a static home page and have it appear there. It shows on my home page if I set my home page to be recent posts (I set it back to that so you can see it in the link below). But when I changed my home page to be a static one, the header element does not appear. Does that make sense? I don't have any other headers other than page heroes to appear on posts only. Nothing for pages.

Also, I noticed that my titles are now black in the header element but I would like them to remain white in the header element and just be black everywhere else on the page - is that doable?

However, I’m trying to get it to not be underlined and I added text-decoration: none to both link and hover and that didn’t seem to work. Any suggestions?

Have you sorted this out? I've checked your site but I don't see the underline anymore. Let us know if you need further help on this.

Tip: Make sure you clear your browser cache every time you make any CSS changes. :)

But when I changed my home page to be a static one, the header element does not appear. Does that make sense? I don’t have any other headers other than page heroes to appear on posts only. Nothing for pages.

That makes sense if the display rule of the element is set to "Blog" and not the actual Front Page. If the front page was a Blog index page prior to the static page change then the "Blog" display rule location applies. But since you changed the the front page into a static page, it's not a "Blog" page anymore but a "Front page". :)

Also, I noticed that my titles are now black in the header element but I would like them to remain white in the header element and just be black everywhere else on the page – is that doable?

add this css -

.wpsp-card, .wpsp-card a, .wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited {
    color: #fff;
}

Do you want to copy Dispatch's hero WPSP list styling? I can extract/export ALL the CSS that comes with it for you if you want. :)

Hello Elvin!

I set my Homepage to the blog option so that you could see what the header element looked like. I didn't know how else you could see it since it wouldn't show up on my static homepage/Front Page. Now that you've seen it, I've set my homepage back to a static page because that's how I want it to be permanently. The display rule for the header element was and is set to Front Page, but the header element does not show there still (I cleared my cache, I promise!). There must be another setting or something I'm missing.

Thank you for offering to import the Dispatch styling - I believe I did that already as there are 300 something lines of code in my Additional CSS - but I didn't import the content because I already had content and didn't want to mess up what I had.

So now if you check my home page again, you'll see the header element isn't there and the entry titles are still showing underlined, although on the blog page they were not underlined.

Hope that all makes sense - thank you again!

Hi Lori,

In order to have the same look as the site template, you'll have to import the content as well, since the elements are in the content file.

Once you imported the site, you just need to delete the pages or posts that are not from you.

Hi Ying,

I really just need the header element I created to show up on my static Front Page. The display rule for the element is set to Front Page and my front page is set to a page called Home. But the header is not displaying there. Any suggestions for how I can fix just that? Thank you - appreciate any help.

Hooray! I figured it out and of course it was something super simple. I had page heroes set to "all singular" thinking that meant single posts only. But now I realize that means single posts AND pages. Once I fixed that to 'posts" and "all posts", the separate front page header showed up on the front page. Ying, Elvin and David - Thank you for your patience!

Hooray! I figured it out and of course it was something super simple. I had page heroes set to “all singular” thinking that meant single posts only. But now I realize that means single posts AND pages. Once I fixed that to ‘posts” and “all posts”, the separate front page header showed up on the front page. Ying, Elvin and David – Thank you for your patience!

Ah yes, that must've been conflicting with the other header element's display rule location as mentioned previously.

No problem. Glad you got it sorted. Thank you for letting us know. :D