How to modify the bullet style?

  • nishikk · Member ·

    Hi,

    I have the custom CSS upgrade for my blog that uses the Luscious theme, and I want to customize the look of the bullets. Instead of the generic bullet, I want to use something like the stars that appear in the Vigilance theme (just an example). Is there a way to customize the look of the bullets using CSS?

    The blog I need help with is: (visible only to logged in users)

  • zandyring · Staff ·

    Well, one way to do this would be to upload an image of what you want the bullet to look like to your media gallery and grab that URL. Then, use CSS to call that image for the bullets.

    In the below example, I’m using a fake URL of http://www.yourimage.jpg – your URL will be longer and have more slashes.

    ul li {background-image: url(www.yourimage.jpg) no-repeat;}

    You may need to do more tweaking than shown here, but you can get started with this.

    Good luck!
    -Z

  • nishikk · Member ·

    Hi Zandyring,

    Thanks very much for the help. I uploaded the image to the media library and grabbed the url.

    I then added the code you suggested as follows:

    ul li {background-image: url(http://nishitak.files.wordpress.com/2012/10/bullet.jpg) no-repeat;}

    but I don’t see any change in the bullet.

    I then looked at the original Luscious css and see this section for ordered/unordered lists:

    /* Ordered / Unordered Lists
    ———————————————————— */

    .entry-content ol,
    .entry-content ul,
    #comments .comment-content ol,
    #comments .comment-content ul {
    margin: 0;
    padding: 0 0 15px;
    }

    .entry-content ol {
    margin: 0;
    }

    .archive-page ul li,
    .entry-content ul li,
    #comments .comment-content ul li {
    list-style-type: square;
    margin: 0 0 0 30px;
    padding: 0;
    }

    .entry-content ol li,
    #comments .comment-content ol li {
    margin: 0 0 0 35px;
    }

    .archive-page ul ul,
    .entry-content ol ol,
    .entry-content ul ul {
    padding: 0;
    }

    but I have no idea if I have to modify this as well. Can you help? I am quite new to CSS.

    Thanks

  • designsimply · Member ·

    What you have is very close! Also, really good work finding the existing rules in the CSS, that was very helpful.

    Try starting with this instead:

    .archive-page ul li,
.entry-content ul li {
	list-style-type: none;
	background: url('http://nishitak.files.wordpress.com/2012/10/bullet.jpg') no-repeat;
	padding: 0 0 0 25px;
	margin: 0;
}
  • designsimply · Member ·

    Your header might look a little nicer with some padding too. Try adding this:

    #header .wrap {
	padding: 0 2%;
	border: 1px solid red;
}

#header .widget-area {
	width: 420px;
}
  • nishikk · Member ·

    Thanks designsimply. That worked like a charm. You rock!

    And thanks also for the suggestion for the header. It makes a big difference :)

  • The topic ‘How to modify the bullet style?’ is closed to new replies.