[Plugin: Network Latest Posts] Layout question

Hello Ronald,

You just have to play a little bit with the classes, you can create a new css file and save it inside your main theme folder, then add some css classes there to style the output the way you want it, for example I created a file called test.css (inside my active theme folder) then I used the styling below:

.nlposts-ulist-container .nlposts-ulist-thumbnail-litem a > img {
display: block;
padding: 4px;
line-height: 1;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
max-width: 100%;
float:right; /* put the thumbnail on the right */
top:3% !important;
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
opacity: 0.7;
}
.nlposts-ulist-container .nlposts-ulist-thumbnail-litem h3 {
float:left !important;
margin-top: -90px !important;
width:80% !important;
}
.nlposts-ulist-container .nlposts-ulist-thumbnail-litem ul {
float: left !important;
margin-left: 0 !important;
margin-top: -50px !important;
width:80% !important;
}
.nlposts-ulist-container .nlposts-ulist-thumbnail-litem .nlposts-ulist-meta {
float:left !important;
margin-top:-65px !important;
font-size:12px !important;
}

Then I used this shortcode: [nlposts title_only=false thumbnail=true css_style=test excerpt_length=22 full_meta=true sort_by_date=true], you can see the results here: CSS Test.

Of course those margins will depend on your thumbnail sizes and the text length, however you have something to get started, and remember when you use a custom css file it will affect all NLPosts instances within the same page.

Cheers.

WOW !!!
That test looks great!!
I’ll experiment with this the coming week and report back to you.
Thanks a lot for now !!

OK, seems the css has some more consequences in combination with my theme, see https://www.inaandacht.nl.
But first this: do you have an email and PayPal account so I can donate?

Cheers,
Ronald

Hello Ronaldus,

You can visit my website L’Elite where you can find my email & the PayPal button for donations.

I’ve checked out your website, it looks good, what consequences have you noticed?

Cheers.

I’m trying to customize some of the CSS as you describe here, but when I add a css_style attribute to my nlposts shortcode, the post doesn’t appear to load my style sheet.

I’m using this shortcode:
[nlposts css_style=nlposts_style_mods instance=recent-posts number_posts=5 time_frame=7 title_only=false blog_id=2 category="share-with-bardo-project" display_content=true excerpt_length=100 auto_excerpt=true sort_by_date=true full_meta=true sorting_order=newer]

My custom stylesheet is called nlposts_style_mods.css and is in the root directory of my theme folder.

When I reload my post with this shortcode (even after deleting my site’s cache) and check the source, there is no mention of nlposts_style_mods.css anywhere – not a <link rel=’stylesheet’…> reference or anything.

What am I doing wrong? Thanks for your help.

Hello mcmikemn,

Is your server or your site using some sort of cache system? if that’s the case, try to flush your cache and try again. Your shortcode seems to be right. Can you share the URL of your site? If you don’t want to share it publicly, you can send an email to [email protected].