CSS Tuesday: Images as List Bullets

There are plenty of ways to spruce up the boring bullets used in HTML lists.

The best way and most browser compatible way I have found to do this is using the following code:

ul li {background: url('images/dot.gif') no-repeat 0 3px; list-style:none;margin:0 0 2px 0;padding:0 0 0 10px;}

You can see that here:

  • Example of fancy bullet
  • Another bullet point

Vs. The plain list:

  • Example of fancy bullet
  • Another bullet point

Something like this may seem simple, but it is often overlooked and can really dress up a site.

CSS Tuesdays: Keeping it Simple

I just released my fist two commercial WordPress themes: Lucidity and Lucidity Catalog with a focus on simplicity.

After creating over one hundred custom WordPress themes – I decided to take my most requested features, coupled with a slick admin interface, and some really simple XHTML and CSS and put it together to create a really easy to use and customize theme.

If you looking for something really easy and clean – take a look at the CSS used. You can see that a little goes a long way!

Just remember – keep it simple. When you overcomplicate – you will end up with sloppy code, hacks, and problems with old/new browsers alike.

CSS Tuesdays: Fun With User Agents

If you are going to do any serious CSS development and/or troubleshooting – you need to be able to see the site on as many browsers as possible. Generally – we have several browsers on several operating systems going at once so we can make sure our bases are covered.

Last week I built a mobile theme for a client and after a few refreshes on my iPhone – I decided I needed something easier and more developer friendly (I needed to view source). I use the “Develop” menu in Safari (Preference > Show Develop menu in menu bar) – and with that, I was able to choose my user agent (iPhone) – and then view how it would look using Safari which was much faster then using my iPhone – and I could easily view the source. If you need to do any development that depends on the user agent – don’t forget about this little trick!

Choose Your User Agent

Choose Your User Agent

CSS Tuesdays: Cool Breadcrumbs

There are plenty of times when you need to have a clear navigation path back to home or to a main section on a particular page, and most web developers use “breadcrumbs” to do this. Over the years, I have implemented breadcrumbs a number of ways, but I really like what I saw on Verlee’s blog.

If you are looking to add some style to your breadcrumbs and want to take it to the next step – check out how she used some CSS and clean XHTML to accomplish something like this:

CSS Tuesday: Overide Inline Style

How many times have you worked with either someone else’s code or some crazy dynamically generated code that uses inline styles for everything which you need to change or override but cannot for some reason or another? I have seen this a lot with custom applications written by programmers who think they are doing designers some sort of favor.

Something that I recently found that will allow you to override inline styles:

<p style="margin:20px">The inline style (style=) will give the paragraph a 20px margin.</p>

Let’s override that because I think 20px is overkill and I only have access to the stylesheet:

p[style] {margin:10px !important;}

Of course that will override any paragraph tag that has an inline style – but you can see where this is going.

Reference: http://css-tricks.com/override-inline-styles-with-css/