WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Add bullet in front of widget block list (6 posts)

  1. Soprano
    Member
    Posted 4 years ago #

    I'm trying to add a bullet (list-style-type:disc) in front of every Recent Posts, Popular Posts, Random Post list item in the sidebar block of this theme:

    http://wordpress.org/extend/themes/cordobo-green-park-2

    The link to the style sheet is here:

    http://wp-themes.com/wp-content/themes/cordobo-green-park-2/style.css

    I tried adding:

    list-style-type:disc

    to:

    div#sidebar ul.group {
    float: left;
    margin: 0 0 0 10px;
    overflow: hidden;
    padding: 0;
    width: 148px;
    list-style-type:disc
    }

    and

    div#sidebar ul.sb-list {
    margin-left: 10px;
    }

    but it didnt work, I'm a css illiterate so I'm probably doing something wrong, any help would be GREATLY appreciated :).

    Thank you,

  2. Alex Mansfield
    Member
    Posted 4 years ago #

    Since there is no padding on the <ul> there is no where for the bullet to show. There are two different solutions that I think should work. Feel free to try them both and see which suits you. Either ad

    list-style-position: inside;

    or change

    padding:0; to padding:0 0 0 15px;

    in the ul.group styles. Hope that helps!

  3. Soprano
    Member
    Posted 4 years ago #

    Thanks for replying :),

    I tried adding: padding:0 0 0 15px; but the bullets came out of alignment with the title of each post, so I tried creating the LI its own class and using the style-position as you suggested and added this to the style sheet:

    div#sidebar ul.group li {
    list-style-position: inside;
    list-style-type:disc
    }

    the bullets now aligned but for some reason a bullet kept floating ontop of each widget titles block, this is a SS:

    http://f.imagehost.org/0250/bullets.jpg

    not sure what it could be :S, what whould happen if I wanted to add a small image with an arrow instead? maybe it might be easier...

  4. Rosa04
    Member
    Posted 4 years ago #

    ah!,i wanted to do that as well with the little > infront of every sidebar item but gave up cuz i couldnt figure out how to do it

  5. lelandf
    Member
    Posted 4 years ago #

    Soprano, try this instead to remove the dot next to the titles:

    div#sidebar ul.group li ul {
    list-style-position: inside;
    list-style-type:disc
    }

    Pretty sure that would work, but let us know if it doesn't.

  6. Alex Mansfield
    Member
    Posted 4 years ago #

    The bullet shows up above the <h2> tag because headings are always on their own line. Since you have "list-style-position" set to "inside" the heading moves down to it's own line. Try this:

    list-style-position:outside;

    However, now that the disc is on the outside we have to make room for it. Change: padding:0 0 0 15px; to margin:0 0 0 15px; and let us know how it goes.

Topic Closed

This topic has been closed to new replies.

About this Topic