Styling Shortcode-created div tags

arlowrey · Member · Mar 30, 2017 at 5:11 pm
Copy link

Add topic to favorites
Hi, all.
I’ve been trying for a while now to get just the entries in my web serial to show up on my home page, and I think I’ve finally got the content I want – but the display-posts shortcode leaves it looking really crammed together. I’d like to style the div so that it imitates the standard blog display (i.e., h3–>line break–>excerpt & read more), but that may be overly ambitious.
Failing that, how could I use CSS to style the div to at least leave paragraph breaks between the entries?
The shortcode I’ve inserted:
[display-posts category="einarr-stigandersen,jotunhall" include_excerpt="true" posts_per_page="20" wrapper="div"]
Thanks,
Allene

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 31, 2017 at 2:51 am
Copy link
Hi Allene, I see web serial is linked to the web serial category page, and don’t see any shortcode there: https://allenelowrey.com/category/web-serial/. Is this working for you configured as you have it?
arlowrey · Member · Mar 31, 2017 at 1:58 pm
Copy link
That was a previous workaround, but it’s not possible to set a category page as your landing page.
Basically, I need to have two “streams” – one for my web serial, and one that’s a normal blog for announcements and such. The web serial is my traffic-driver, and so I want that “stream” as my landing page. I just don’t know how to style the div tag in the display-posts shortcode on my current landing page to make it look as much like the category page as possible – or at least less crowded. (Yes, I did preview it as a bulleted list. No, that doesn’t help.)
arlowrey · Member · Mar 31, 2017 at 2:18 pm
Copy link
Adding the image at large size broke things up a bit, at least. I’d still be interested to know if there’s a way to make the title look like it’s the title, though.
thesacredpath · Member · Mar 31, 2017 at 8:33 pm
Copy link
Hi, and many thanks for the additional information. Let’s start with the following custom CSS. I have not moved the title above the featured image, but left it below at this time. I can put the title above the image, but the preferred code to do that on responsive designed themes, such as Cerauno isn’t supported by older browsers, and in the case if Internet Explorer/Edge, not until version 11, so anyone on an older browser, or on IE 10 or earlier would not see the change. What I have below has been supported by all browsers and versions for a long time, so it is solid.
```
.display-posts-listing .title {
	font-size: 38px;
	width: 100%;
	display: block;
	color: #fff
}
.display-posts-listing .excerpt-dash {
	display: none;
}
.display-posts-listing .listing-item {
	margin-bottom: 3.8em
}
```
arlowrey · Member · Mar 31, 2017 at 8:54 pm
Copy link
Thank you! This is exactly what I was looking for.
thesacredpath · Member · Apr 1, 2017 at 5:10 pm
Copy link
Hooray and you are welcome!

No items found.