Support » Themes and Templates » Remove bullets from text widget

  • Resolved CharlieLivingston

    (@charlielivingston)


    So in Chrome, not Firefox, there’s a bullet appearing before the ‘Best Hosting’ title in a text widget in my sidebar, and I can’t work out why. Possibly there’s something wrong with the HTML in the list before? But I’m not sure what…

    Help appreciated.

    My site can be found here.

Viewing 5 replies - 1 through 5 (of 5 total)
  • CrouchingBruin

    (@crouchingbruin)

    When I examine the widget using Firebug in Chrome, it looks like it uses the “user agent stylesheet” to style the widget, which is an LI (list item) element. Meaning it uses whatever the default style is in Chrome for LI, and that style is:

    li {
    display: list-item;
    text-align: -webkit-match-parent;
    }

    Which is why you’re seeing a bullet (it tries to display the widget as a list item, since it is, in fact, a list item).

    See if you can add this CSS somewhere:

    .sidebar li {
    display : inline;
    }

    CharlieLivingston

    (@charlielivingston)

    So adding that CSS has removed the bullet, which is great, but it has messed up the spacing of the sidebar a bit. Everything’s closer together.

    CrouchingBruin

    (@crouchingbruin)

    Then add a margin-top to your widget LI DIV elements:

    .sidebar li {
    display : inline;
    }
    
    .sidebar li div {
    margin-top: 20px;
    }
    CharlieLivingston

    (@charlielivingston)

    Using this code and everything’s dandy:

    .sidebar li {
    list-style-type:none;
    }

    Thanks again for the help. 🙂

    CrouchingBruin

    (@crouchingbruin)

    Ah, great, congrats!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove bullets from text widget’ is closed to new replies.