WordPress.com

1. nishikk
   Member
   Oct 11, 2012, 12:07 PM

   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.

2. zandyring
   Happiness Engineer
   Oct 11, 2012, 12:20 PM

   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

3. nishikk
   Member
   Oct 12, 2012, 12:37 PM

   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

4. designsimply
   Staff
   Oct 13, 2012, 10:58 PM

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

5. designsimply
   Staff
   Oct 13, 2012, 11:04 PM

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

6. nishikk
   Member
   Oct 14, 2012, 10:16 AM

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

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

Topic Closed

This topic has been closed to new replies.