How to show category and post date like this?

Tagged: post listing

This topic has 10 replies, 2 voices, and was last updated 2 years, 11 months ago by Sara.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
September 6, 2020 at 6:52 am #19052

Sara
Participant

Hello,

I would like to show category and postdate on post listings with wpshowposts to show as on this website: ** so it shows:

Feature Image
Category / Post Date
Title

And showing Category as on same style as is showing on hero slider with ping background and white font color and post date make it black font color.

How I can achieve this?

Thanks!,

Sara

September 7, 2020 at 2:48 pm #19089
Tom
Keymaster
Hi there,

I would set it up like this:

Images: Above title
Meta: Date turned on, below title. Author turned on, below title.
Content: No content
More Settings: Give your list a custom class: my-styled-list

Then add this CSS:
```
.my-styled-list .wp-show-posts-entry-header {
    display: flex;
    flex-direction: column-reverse;
}

.my-styled-list .wp-show-posts-posted-on {
    text-transform: uppercase;
    font-weight: bold;
}

.my-styled-list .wp-show-posts-separator {
    font-size: 0;
}

.my-styled-list .wp-show-posts-separator:after {
    content: "/";
    font-size: 15px;
}
```
September 15, 2020 at 5:42 am #19367

Sara
Participant

Hello Tom,

I just tried to follow your steps but, on last step on “More Settings” I dont have textbox to place class on top like it shows in documentation: https://docs.wpshowposts.com/article/more-settings-overview/ My more setttings page starts with Author ID text box, how I can enable class textbox?

Thanks,

Sara

September 15, 2020 at 2:13 pm #19384

Tom
Keymaster

Can you try updating to the latest beta pro version?: https://wpshowposts.com/wpsp-pro-1-0/

September 24, 2020 at 12:47 pm #19917

Sara
Participant

Hello Tom,

With update it seems to show textbox to add css class on more settings but, problem still remains it shows nothing on listing on Cabello as you can see on homepage on first section I am listing just after hero slider.

I had click on “inspect element” on browser and I commented on this css property that I show bellow the “display:flex” and it seems to show, could be this the problem?

`”.wp-show-posts-columns:not(.wp-show-posts-masonry) {
display: flex;

Please let me know so, I can finish website.

Thanks again Tom

September 25, 2020 at 1:59 pm #20034
Tom
Keymaster
I think it’s this:
```
h4.mvp-widget-home-title {
    float: left;
    margin-bottom: 20px;
    position: relative;
    text-align: center;
    width: 100%;
}
```
Try removing the float: left;
September 28, 2020 at 12:57 pm #20252

Sara
Participant

Hello Tom,

It seems you are correct, thanks! Just one last thing is it possible to add on the sides the pink line I got showing on other categories listing so it shows the separation line?

Thanks!

Sara

September 29, 2020 at 4:02 pm #20357
Tom
Keymaster
I’m not sure how to do it with your current styling + the spaces on either side. But this is possible:
```
h4.mvp-widget-home-title:before {
    content: "" !important;
    background: #FF5481;
    height: 4px;
    bottom: calc(50% - 4px);
}
```
October 18, 2020 at 11:17 am #21308

Sara
Participant

Thanks Tom Worked like a charm!!! 🙂

Please remove url link from my first post!

Thanks again!

October 19, 2020 at 12:07 pm #21377

Tom
Keymaster

Done 🙂

October 19, 2020 at 12:45 pm #21385

Sara
Participant

Thanks Tom 🙂
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

[Resolved] How to show category and post date like this?