Example:

.font_example {font-size:1.1em;}
@-moz-document url-prefix() {
     .font_example {font-size:1.075em;}
}

Safari, Chrome, IE, etc will use the first .font_example code while Firefox will use the code within @-moz-document url-prefix(){}.

While this is not recommended for everyday usage – when and if you hit a wall, this could be something that will save a lot of time and headaches!

I remember back in the day being excited about Alex King’s Theme Competition and wishing I had some spare time (I was working full time and doing consulting every other moment) to also participate. These early themes were generally simple and were something people would use on their simple blogs -using a hand full of WordPress functions. During this time, the functions.php was unheard of and there were not too many custom functions that were used (for most themes). The big difference between them were mostly in how the sites were laid out with HTML and CSS. Even though these themes were simple – they were great because it allowed you to easily modify the look and feel of your site by editing a few template files and modifying the CSS.

These themes were more about look and less about function.

If you think about themes then and themes now – the difference is often huge. Most themes now are packed with custom functions, have advanced admin options, and give the users greater control of their content, the site’s look and feel, and general options – all without having to modify any template files or know any CSS. Themes are more complex, are generally made up of more template files, and are much more flexible.

These themes are more about providing both users and other developers with a framework and tools to easily manage content.

Recently Alex King/Crowd Favorite released Carrington Build which is a perfect example of where themes are going. This theme offers an unbelievable amount of flexibility and customization and will make both users and developers eager to use this theme.

So as I wrap up development on Lucidity – I am trying to bridge the old (simple) with the new (framework/tools). I look forward to getting this out to the public so they can enjoy the ease of use, flexibility, and further control over their content.

All in all – WordPress themes have come a long way and will not only continue to improve user’s front end experience, but also improve the backend experience when using WordPress. Look for even greater things to come!

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.

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.

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/

Add this little bit of code to your CSS that controls the button or image and you will no longer see these ugly outlines:

outline:none;

Outlined

Not Outlined

From a design perspective, I decided to darken the colors quite a bit in order to remove some of the drabness of the old design. I also added a background pattern to give some depth, and also added in some new pictures in the header that represent changes/additions in my life over the last few years. I love working with greys – so I added more grey elements. I also simplified the layout and got rid of a number of image based elements to keep everything minimal.

From a UI perspective, I decided to focus on the content I have created over the past 4-5 years instead of a few static pages here and there. I moved all of the blog content into the main navigation so it is easier to find/navigate. I also used Jappler Menus in combination with the WordPress function to list all categories/sub-categories.

From a functional perspective, I started from scratch with this new version. I created a number of custom functions that make presenting content a lot easier. I dropped the YUI library and went with all jQuery based AJAX functionality. The code is leaner, faster, and easy to modify for any future needs. The comments are now using WordPress’s threaded comment functionality, and a number of other WordPress 2.7 additions. I also went through and got rid of almost 50% of my old plugins (replaced the functionality with custom functions, WordPress built in functionality – or completely removed unused plugins.

From an optimization perspective, this site uses far less javascript, CSS, and images and will load much faster than the previous site. I also increased the use of title tags, alt tags, and other easy tricks to help with search engine optimization.

All in all – this was something fun that I enjoyed and look forward to adding even more new design/functional elements in the future.

.alignright, .aligncenter, .alignleft {padding:4px;background:#ecece2;border:1px solid #c7c7bb;}
.alignright {float:right;margin-left:5px;}
.alignleft, .alignnone {float:left;margin-right:5px;}
.aligncenter {display: block;margin-left: auto;margin-right: auto;}

The difference? I used img.align.. which worked if you did not use captions, but if you use caption, there is an outer div class called align… The more generic CSS posted here takes care of both issues.