WordPress: My First Custom.CSS - Displaying Bullets

Even though I have been blogging for some time on my own domain, I still am just a newbie, and I know even less about CSS, PHP and all the other code that is used with WordPress. So I figured I would try and document some of my experiences with learning how to do things.

 

A friend has a bird rescue and sanctuary and lost all of their posts and data when their old web site got trashed. So after a long time without a web site they got a new domain. When I heard that I volunteered to help set up the system. As luck would have it they had acquired the new domain from the same host I use. So I was a small step ahead as I was familiar (but not close to being an expert) with that host’s system.

After a half dozen tries of blogging software and themes, they finally settled on WordPress 2.5.1 and the K2 rc6 theme for their blog. Installation went reasonably easy and they happily began posting. After a while I noticed that whenever they posted an unordered list, the bullets were missing from the post.

I  looked at the raw edit for the post and the bullets were there. I can read and even modify a little CSS and PHP, but I am not much of a coder. My first thought was that the problem was a WordPress problem so I went to the WordPress, searched the documentation and the forum for keywords “bullets” and then “lists”. I read all I could, but found nothing that helped. I was even more confused.

So I went to K2 forum and searched there also. There was a little info but it was from a long time ago and K2 had recently undergone a big change. What I read confused me so I wrote a post to the forum complaining about the missing bullets.

I got an explanation from a forum member explaining that the problem was in the core.css.php file. I looked at that file and sure enough there at the beginning of the file was an entire routine for resetting the styles of not only unordered and ordered lists, but a host of other elements also. Here is a link to the originator of this routine. I had seen all this in the file when I was searching for answers and had simply passed over it not understanding what I was looking at.

Now I knew what was wrong, but what to do about it. I continued searching the K2 Forum and found posts with similar issues and the solution given was to create a custom.CSS file. But reading the documentation only confused me more. The issue for me is that most of the people posting are far ahead of me in knowledge and so their solutions are very broad brush and I am still at the point where I need specifics. So again I posted a question to one of the moderators on the forum and he was able to give me enough details to allow me to finally get bullets to show.

So if you also are a newbie and reading this post for specifics, I hope I can now provide them. Here is what to do:

  • Locate the folder where you have the K2 files
  • In that, find the folder styles/sample
  • Copy that folder and rename it to custom
  • Now rename the contents of that new folder styles/custom (one file named sample.css) to custom.css
  • Edit the file custom.css and in the top comments area insert your name, your domain and most importantly provide the style name custom
  • below the comment area insert the following code:
  • ul {
        list-style: disc;
    }

  • Save the revised custom.css file
  • Now go to the dashboard of your site and select Design and then K2 Options
  • Look down that page and find the section titled Style and select the pull down list associated with it
  • Highlight in the list the style name custom (this is the name your provided in the comments area of your .css file
  • Click the Save Changes button on that page

Note: The name custom is not an absolute requirement - you can give it any name. I don’t know the rules here, but the name probably should be 10 characters or under.

You now should see bullets in your published post.

If you are having similar problems with the other elements listed in the reset procedure, you need to provide a similar solution for those elements also.

1 Response to “WordPress: My First Custom.CSS - Displaying Bullets”


  1. 1 Jitendra

    Hey, thanks heaps for that explanation - I’ve been struggling with this bullet point issue in K2 for a while now, but it’s sorted now!

    Cheers

Leave a Reply