WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: Mini Loops] CSS Styling

[Resolved] [Plugin: Mini Loops] CSS Styling

  • ChrisStoneman
    Member

    @chrisstoneman

    I’d previously used your advanced-most-recent-posts-mod plugin, and you’d suggested to use the below styling. How can this be modified to suit the new mini-loops plugin?

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

    Thanks

    http://wordpress.org/extend/plugins/mini-loops/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Kailey (trepmal)
    Participant

    @trepmal

    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.

    ChrisStoneman
    Member

    @chrisstoneman

    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?

    Plugin Author Kailey (trepmal)
    Participant

    @trepmal

    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.

    ChrisStoneman
    Member

    @chrisstoneman

    I’ve fixed most of it using this approach. You can see my site at http://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?

    Plugin Author Kailey (trepmal)
    Participant

    @trepmal

    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.

    ChrisStoneman
    Member

    @chrisstoneman

    Worked perfectly. Thanks so much.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] [Plugin: Mini Loops] CSS Styling’ is closed to new replies.