[Plugin: Mini Loops] CSS Styling

You should be able to adjust the css selectors like this

.miniloops ul { list-style:none; line-height:1.35em; margin:0;}
.miniloops ul li { clear:both;width:100%;margin: 0 0 15px;}
.miniloops ul a { font-weight:normal; }
.miniloops ul img { float:left; margin:0 10px 0 0; padding:2px;border:none; }

If that doesn’t work, your theme may be interfering.

Alternatively, you can add the ‘advanced-recent-posts’ class to the mini loops output.

If the Before Item field still has the default <ul> you can change that to <ul class="advanced-recent-posts"> That should make your original styles work without modification.

I’ve tried both these methods but neither work. How can I make it override my theme? Is there anything in the theme’s files I should look out for?

You might have more success looking at the source code, or using a tool like Firebug or the Developer Tools built into the webkit browsers to get the actual classes/ids surrounding the Mini Loops output.

Since there is so much variation in themes, it’s hard say what change is needed to make the CSS work correctly. There could be other styles with more specific selectors that take priority over the above styles.

If you can provide a link to the site in question, I can take a look.

I’ve fixed most of it using this approach. You can see my site at https://www.wordsaboutmusic.co.uk Two questions….

– when the title of a post if long, it creates a gap in the mini-loops list. How is this corrected?

– I have called mini-loops twice, once for recent and once for random posts. The code is identical, yet the second has bullet points. I’ve tried adding this

.miniloops ul {list-style-type: none;}

to my CSS but no use. How do I remove the bullet points?

It looks like you’re using a bunch of ‘
‘ tags to prevent the images from staggering – I think this is why you having bigger gaps following longer titles.
Try removing the <br /> tags and adding this to your CSS:

.randomposts ul li,
.recentposts ul li {
    overflow:hidden;
}

There appears to be a broken div tag surrounding the random posts (missing “>”)

<div class="randomposts"

Fixing that should fix the bullet point issue.

Worked perfectly. Thanks so much.