Home › Forums › Pro Support › Alignment of Meta data
Tagged: Alignment of meta date and tags
- This topic has 9 replies, 2 voices, and was last updated 1 year, 10 months ago by
elvin.
-
AuthorPosts
-
June 27, 2021 at 8:21 am #31496
Louis
ParticipantHello!
I’m grappling a little with the layout of meta data on https://www.sahpa.co.za (under General Notices)
I’d like each card to be arranged as follows (this is a rough edit):
https://www.sahpa.co.za/wp-content/uploads/2021/06/Screenshot-2021-06-27-at-17.00.08.png1. Image on top, with 5px border radius on top
2. Heading
3. Date (aligned left) Tag (aligned right)Then, I’d also like the Tag to not be a link, the code snippet I’ve found in one of the other threads doesn’t work. If you perhaps know of a solution for this?
Best, most appropriate example I’ve found so far is on https://frugalflyer.ca/ – I just can’t replicate this.
warm regards, and thank you!
Louis Stanford
Cape Town, South AfricaJune 27, 2021 at 8:34 am #31498Louis
ParticipantJust one more thing: I’d also like no margin between image and the card edge.
June 27, 2021 at 5:12 pm #31505elvin
ModeratorHi there
For #1: Try adding this CSS:
#wpsp-1234 .wp-show-posts-inner { border-radius: 20px 20px 0 0; overflow: hidden; }
Replace
1234
is the WPSP id you wish to apply this on.For #2: I’m not sure what you mean. Can you explain a bit more? Do you want to add more spacing to the bottom?
For #3:
Go to specific WPSP Meta Tab setting and make sure both of them is set to the same location/position. Either “below post” or “below title”.You then add this CSS:
#wpsp-1234 .wp-show-posts-entry-meta { display: flex; flex-direction: row; justify-content: space-between; }
Replace
1234
is the WPSP id you wish to apply this on.Just one more thing: I’d also like no margin between image and the card edge.
You have this CSS that adds space between the container’s edge and the image. It’s the padding.
.wp-show-posts-inner { padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; border-style: solid; border-width: 1px; border-color: #e6e6e6; border-radius: 5px; box-shadow: 2px 8px 20px 1px #e6e6e6; max-width: 720px; margin: auto; display: flex; flex-direction: column; }
remove the padding on this CSS and add this:
.wp-show-posts-inner > *:not(.wp-show-posts-image) { margin: 0 20px; }
June 27, 2021 at 5:55 pm #31507Louis
ParticipantThis is great, I’m making progress, thank you!
You wrote: “Go to specific WPSP Meta Tab setting and make sure both of them is set to the same location/position. Either “below post” or “below title”.” Tags are currently not included as an option in WPSP Meta, so the only one I can set is Date. No change to layout… any ideas?
Also, if I enable “Include Terms” then my website gets a critical error:
https://www.sahpa.co.za/wp-content/uploads/2021/06/Screenshot-2021-06-28-at-02.49.42.png(If you want to troubleshoot this particular bug, you have admin access – I’m going to bed now (it’s 3am), you’re welcome to test as no-one will be using the site for the next few hours.)
June 27, 2021 at 9:03 pm #31509elvin
ModeratorAlso, if I enable “Include Terms” then my website gets a critical error:
https://www.sahpa.co.za/wp-content/uploads/2021/06/Screenshot-2021-06-28-at-02.49.42.png(If you want to troubleshoot this particular bug, you have admin access – I’m going to bed now (it’s 3am), you’re welcome to test as no-one will be using the site for the next few hours.)
That’s not the default behavior.
Are you using any PHP snippets for the meta?
Can you try disabling all plugins except WPSP to check for any plugin conflict? Let us know.
June 27, 2021 at 9:46 pm #31511Louis
ParticipantI found the offending code! It was this code snippet (to remove links from tags) that I added yesterday:
add_filter( 'wpsp_terms_output', function( $output, $settings ) { return sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>', strip_tags( get_the_term_list( get_the_ID(), $settings[ 'taxonomy' ], '', apply_filters( 'wpsp_term_separator', ', ' ) ) ) ); } ,15 ,2);
June 27, 2021 at 9:51 pm #31513Louis
ParticipantNext step:
I see that the Category shows on the right side of the WPSP card. I’d like the Category hidden, and the Tag to display, and without a link. Do you perhaps have a suitable code snippet at hand?Warm regards
June 27, 2021 at 10:58 pm #31515elvin
ModeratorYou can still salvage that code while setting it to display tag instead of category.
Try this.
add_filter( 'wpsp_terms_output', function( $output ) { $output = sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>', get_the_term_list( get_the_ID(), 'post_tag', '', apply_filters( 'wpsp_term_separator', ', ' ) ) ); return strip_tags( $output ); } );
November 10, 2021 at 3:08 am #35369Louis
ParticipantI have one last request on this thread: the meta tags and date float depending on the length of the Post title. What is the flex approach to aligning to the bottom of the card?
November 10, 2021 at 5:46 pm #35397elvin
ModeratorTry this CSS:
header.wp-show-posts-entry-header { display: flex; flex-direction: column; flex: 1 1 auto; } .wp-show-posts-entry-meta.wp-show-posts-entry-meta-below-title { margin-top: auto; }
But since the cards are very narrow, you may get issues w/ entry metas word wrapping.
-
AuthorPosts
- You must be logged in to reply to this topic.