Customizing look of Display Posts Short Code

chriswilson667 · Member · Sep 6, 2018 at 8:03 pm
Copy link

Add topic to favorites
Can someone point me where to learn how to customize the CSS for the div wrapper used in Display Posts Short Code?

I’ve gone through en.support.wordpress.com/display-posts-shortcode/ but am trying to figure out how to have my headline and excerpt display in a more appealing/user-friendly way.

The blog I need help with is: (visible only to logged in users)
dkmyta · Staff · Sep 6, 2018 at 8:08 pm
Copy link
Hey there,

What pages are you looking to make changes on and what specifically are you looking to change?

You can target each element and make these styling changes using Custom CSS, however Custom CSS is a feature only available to Premium and Business plan holders.

If you do happen to have either of these plans, let us know the above detail and we would be happy to look into some potential solutions.

Cheers
chriswilson667 · Member · Sep 6, 2018 at 10:20 pm
Copy link
Sorry, yes, I do have the Business plan so can customize the CSS (already done a couple of other things).

I’m going to have multiple pages displaying various multiple categories, so I’m trying to figure out the best way to do this. I’m still working on the content of my posts, but this will give you an idea of what I’m trying to do:

https://visitcrawfordcounty.wordpress.com/things-to-do/play/

Thank you for any help that can be provided!
chriswilson667 · Member · Sep 6, 2018 at 10:23 pm
Copy link
Shoot, I guess it’d help if I explained what I’m trying to do:

I’m good with the thumbnail on the left, but I’d like to have the Title and Excerpt on separate lines and not wrap around the image if at all possible. I’d also like to make the Title a Headline of some kind, probably H3.
supernovia · Staff · Sep 14, 2018 at 11:28 pm
Copy link
Hi, you can’t switch the titles to H3 without editing some functions, but you can make them bigger. And you can make the image stop floating to the left, too:
```
.display-posts-listing a.image {
    float: none;
    border-bottom: none;
}

.display-posts-listing a.title {
    font-size: 1.3rem;
}
```
Let us know if that’s what you’re after. Cheers :)
supernovia · Staff · Sep 14, 2018 at 11:29 pm
Copy link
Also, thank you to whomever modlooked this thread.

No items found.