Skip to main content
CSS is fun and cool and I like it.

Natural Sort Using Post meta_key

@@ -2033,6 +2033,7 @@

      if ( !empty($q['meta_key']) ) {
              $allowed_keys[] = $q['meta_key'];
              $allowed_keys[] = 'meta_value';
+             $allowed_keys[] = 'meta_value_num';
      $q['orderby'] = urldecode($q['orderby']);
      $q['orderby'] = addslashes_gpc($q['orderby']);

@@ -2056,6 +2057,9 @@

      case 'meta_value':
              $orderby = "$wpdb->postmeta.meta_value";
+     case 'meta_value_num':
+             $orderby = "$wpdb->postmeta.meta_value+0";
+             break;
              $orderby = "$wpdb->posts.post_" . $orderby;

This is a direct edit to a core file: /wp-includes/query.php Note the plus signs in the above code indicate new lines to add.

Author Notes:

A client … Read article “Natural Sort Using Post meta_key”


Different Stylesheet Pending the Time of Day

function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");


<noscript><link href="main.css" rel="stylesheet"></noscript>

Name your css … Read article “Different Stylesheet Pending the Time of Day”


Different Stylesheets for Different Days of the Week

<script type="text/javascript">
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
dayNumber = new Date().getDay();
document.writeln('<link rel="stylesheet" type="text/css" href="' + dayNames[dayNumber] + '.css">');

<link rel="stylesheet" type="text/css" href="default.css">

Name your css files accordingly: Saturday.css, Friday.css, Sunday.css, etc…

If JavaScript is disabled in the browser, it will revert back to the default.css file.… Read article “Different Stylesheets for Different Days of the Week”


CSS Sprites with Inline Images

CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times.

The “sprite” is the single, combined graphic. We can use this same theory, only instead of using background-image to show the graphic, we can use an image … Read article “CSS Sprites with Inline Images”


AnythingSlider jQuery Plugin

Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features.

Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider“, and “moving boxes“. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want … Read article “AnythingSlider jQuery Plugin”


#68: Think Geek Background Fade Technique

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.

Links from Video:

Read article “#68: Think Geek Background Fade Technique”

Video Screencasts

#40: How z-index Works
Running time: 18:37
Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it’s tied to positioning, some quirks, and some general advice.
#39: How to Use sIFR 3
Running time: 22:10
sIFR (Scalable Inman Flash Replacement) is a technology that allows you to use any font you wish on your web pages. Long story short, it uses JavaScript to target certain text page elements and replace them
Read article “Video Screencasts”