With a knowledge of CSS you can pretty much make this plugin look anyway you’d like.
Give me an example of what you’d like it to look like and I’ll see if I can come up with some CSS to make it work for you.
John
Is it possible to achieve a image on left and the other items on the right like this example?
https://greenvillejournal.com/category/eat-drink/
Absolutely. You can even include the social sharing using the custom excerpt or acf plugin.
I gave it a shot but I can’t get the title and source to line up. The items are not in a div. Just a span tag. I can put the image and excerpt side by side. Do you have some styles I can use?
Give me a link to the page that you want me to work on and I’ll set it up.
What size do you want the images? About half the width or the same size as the link above?
Same size would be great!
Okay give me a couple of days please.
Okay first of all if you need further help if the following doesn’t work fill out the form he to grant me site access:
https://support.agaveplugins.com/contact/
First add this argument to the shortcode that I am altering. Not the one in the right sidebar.
shortcode_id='custom_page_id_2'
Now enter the following CSS in the customizer or anywhere else your site allows custom HTML.
#custom_page_id_2 .netsposts-block-wrapper {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;
row-gap: 2em;
}
#custom_page_id_2 .netsposts-content {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas:
"grid-img"
"grid-posttitle"
"grid-source"
"grid-excerpt";
}
#custom_page_id_2 .netsposts-content .netsposts-posttitle {
grid-area: grid-posttitle;
}
#custom_page_id_2 .netsposts-content .netsposts-source {
grid-area: grid-source;
}
#custom_page_id_2 .netsposts-content .link-img-wrapper {
grid-area: grid-img;
}
#custom_page_id_2 .netsposts-content .netsposts-excerpt {
grid-area: grid-excerpt;
}
@media screen and (min-width: 760px) {
#custom_page_id_2 .netsposts-content {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"grid-img grid-posttitle"
"grid-img grid-source"
"grid-img grid-excerpt";
column-gap: 1em;
}
#custom_page_id_2 .netsposts-content .netsposts-posttitle {
grid-area: grid-posttitle;
align-self: end;
}
#custom_page_id_2 .netsposts-content .netsposts-source {
grid-area: grid-source;
align-self: center;
}
#custom_page_id_2 .netsposts-content .link-img-wrapper {
grid-area: grid-img;
align-self: center;
}
#custom_page_id_2 .netsposts-content .netsposts-excerpt {
grid-area: grid-excerpt;
align-self: start;
}
}
You totally knocked this out of the park!!! It’s works perfectly!!
Thank you very much!
May I please have a link to make a donation to you.
If you follow this link there will ne a donation button in the right sidebar (computer or tablet) or on the bottom of the page (mobile).
https://ww.wp.xz.cn/plugins/network-posts-extended/#description
Thank You for the Donation!!! 🙂
John,
Is it possible to get all of the text items in the second column on desktop to stack close together vertically of each other instead of each item aligning center of the given height? I tried align-self:start in a few places.
Thanks,
Steve
The ones with less text are too spread out I assume. You would like to have them all align towards the top, correct?
