WordPress.org

Forums

Mini Loops
[resolved] CSS Styling (7 posts)

  1. ChrisStoneman
    Member
    Posted 3 years ago #

    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/

  2. Kailey (trepmal)
    Volunteer Mod & Reviewer
    Plugin Author

    Posted 3 years ago #

    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.

  3. ChrisStoneman
    Member
    Posted 3 years ago #

    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?

  4. Kailey (trepmal)
    Volunteer Mod & Reviewer
    Plugin Author

    Posted 3 years ago #

    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.

  5. ChrisStoneman
    Member
    Posted 3 years ago #

    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?

  6. Kailey (trepmal)
    Volunteer Mod & Reviewer
    Plugin Author

    Posted 3 years ago #

    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.

  7. ChrisStoneman
    Member
    Posted 3 years ago #

    Worked perfectly. Thanks so much.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Mini Loops
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic