WordPress.com Forums » Topic: How to modify the bullet style? http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style WordPress.com Forums » Topic: How to modify the bullet style? en Wed, 22 May 2013 12:01:02 +0000 http://bbpress.org/?v=1.1-alpha-2539 nishikk on "How to modify the bullet style?" http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style#post-1039884 Sun, 14 Oct 2012 10:16:43 +0000 nishikk 1039884@http://en.forums.wordpress.com/ Thanks designsimply. That worked like a charm. You rock!

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

]]> designsimply on "How to modify the bullet style?" http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style#post-1039678 Sat, 13 Oct 2012 23:04:46 +0000 designsimply 1039678@http://en.forums.wordpress.com/ 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;
}
]]> designsimply on "How to modify the bullet style?" http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style#post-1039665 Sat, 13 Oct 2012 22:58:47 +0000 designsimply 1039665@http://en.forums.wordpress.com/ 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;
}
]]> nishikk on "How to modify the bullet style?" http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style#post-1038176 Fri, 12 Oct 2012 12:37:01 +0000 nishikk 1038176@http://en.forums.wordpress.com/ 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

]]> zandyring on "How to modify the bullet style?" http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style#post-1037370 Thu, 11 Oct 2012 12:20:50 +0000 zandyring 1037370@http://en.forums.wordpress.com/ 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 on "How to modify the bullet style?" http://en.forums.wordpress.com/topic/how-to-modify-the-bullet-style#post-1037363 Thu, 11 Oct 2012 12:07:19 +0000 nishikk 1037363@http://en.forums.wordpress.com/ 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?

]]>