[Resolved] HTML Sidebar Widget Question

Home Forums Support [Resolved] HTML Sidebar Widget Question

Home Forums Support HTML Sidebar Widget Question

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1482615
    Adam

    I’m using the WordPress recent post widget to display recent posts, but I’m trying to create a replica of this using an HTML widget to display popular posts. (which I’ll be manually updating based on google analytics stats)

    I use some CSS code supplied by you that adds a bullet point and aligns the text when it drops down a line, and this works fine for the recent post widget, but I would like it to also change the HTML widget I’ve added so that the line spacing, etc are the same. So both the recent and popular widget have the same spacing, alignment and bulletpoints.

    Is this possible?

    The CSS used is:

    /* Latest post widget margin */
    .widget_recent_entries ul {
    margin-left: 1em;
    }

    /* Latest post bulletpoints */
    .widget_recent_entries ul li {
    list-style-type: disc;
    margin-bottom: 5px;

    #1482719
    Leo
    Staff
    Customer Support

    Hi there,

    If you give the Popular Posts HTML widget a custom class like widget_popular_posts then CSS should just be this:

    .widget_popular_posts ul {
        margin-left: 1em;
    }
    
    /* Latest post bulletpoints */
    .widget_popular_posts ul li {
        list-style-type: disc;
        margin-bottom: 5px;
    }
    #1483045
    Adam

    Can’t seem to get it working. I’m using the code in private info section.

    #1483412
    Leo
    Staff
    Customer Support

    I’m no longer seeing the popular posts HTML widget?

    #1491301
    Adam

    Added it back in. Line spacing, bullet points and alignment still not functioning

    #1491311
    Elvin
    Staff
    Customer Support

    Hi,

    You can try changing the markup of your Custom HTML widget into this:

    <ul class="widget_popular_posts">
    <li><a href="https://chasingronin.com/travel-photography-gear/">Travel Photography Gear: What’s In Our Camera Bag?</a></li>
    <li><a href="https://chasingronin.com/lock-laces-elastic-shoelaces/">Lock Laces: Elastic No Tie Shoelaces</a></li>
    </ul>

    Leo’s CSS code should work well w/ this.

    #1491349
    Adam

    Still not working

    #1491563
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    ul.widget_popular_posts {
        margin-left: 1em;
    }
    
    /* Latest post bulletpoints */
    ul.widget_popular_posts li {
        list-style-type: disc;
        margin-bottom: 5px;
    }
    #1491595
    Adam

    Nailed it. Thanks David.

    #1491659
    David
    Staff
    Customer Support

    You’re welcome

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.