How to modify the bullet style?

  • Author
    Posts
  • #1038903

    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 nishitak.com.

    #1038984

    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

    #1039051

    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

    #1039084

    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;
    }
    #1039085

    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;
    }
    #1039091

    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.