Sounds silly, I know, but here’s a nice quote on “Great products are triumphs of taste” by 37signals:

Want to build a great iPhone app? Go listen to Billie Holliday. Trying to design a piece of hardware? Visit a Frank Lloyd Wright house. Aiming to write great marketing copy? Read Aldous Huxley. Need a color scheme? Go to the museum and check out some Mark Rothko paintings.

So. Super Mario Bros.

Read more →

I’ve talked about this on WPTavern before, but Leland’s tweet made me feel that we should talk about this more.

Remember when LogoMaid ripped of Dan Cederholm’s logo? Everybody pretty much agreed that that was illegal. And so imagine my surprise knowing that there are WordPress themes that are direct copies of Twitter, of Facebook, of Basecamp, and what have you. Heck, we even have a theme describing itself as “The exact Facebook clone theme for WordPress” in the official Theme Directory. This I believe is a case worse than the LogoMaid issue.

Please stop this. The freedom in GPL does not mean the freedom to steal copyrighted design. Stop making clones of popular websites and turning them into WordPress themes. It doesn’t matter if you release it only for personal use, or under GPL, if you code the CSS yourself, if you painstakingly recreate the graphic elements in Photoshop. It’s still, as Ryan Hellyer puts it, “illegal, immoral, and unethical.”

Instead of doing that, go and read this article by Cameron Moll, “Good Designers Copy, Great Designers Steal“, and learn how to “steal” a design in a much better (and ethical) way. Learn what makes them work, and improve it:

This article wouldn’t be complete without a warning to be careful when copying well-known sources. If I were to summarize this warning in one sentence, this would be my golden verbiage: copy the inspiration, not the outcome.

Or teach us. Write an article on how you do that AJAX load more posts wizardry. Or how to make that rounded corner work on every browser. Show us how to recreate your favorite website’s cool feature in WordPress.

Now that will be awesome.

Update: Another discussion is up at Theme Lab, WordPress Clone Themes – Your Take?

Last weekend I was looking for an excuse to play around with JQuery, CSS3 and designing in general. After looking around for a bit I decided to make a more interactive version of the Theme Development Codex on WordPress Codex.

My version formats that list for better readability, adds checkboxes and counters so you can track your progress, editable labels, and so on.

You can also download a copy for your own use. Click on the image above (or here: WordPress Theme Development Checklist Tool) to check it out.

Any ideas, comments, bug reports, let me know in the comments area.

A question: how do you guys keep track of sites that use your theme?

I find that Google’s Webmaster Tools show links to my site, including those from the link on the footer area of my themes, but its update can be quite slow and incomplete.

What about you guys?

Just did some small CSS tweaks to this site. Added more breathing space and removed some unnecessary elements. Went wider (990px) over the old one (960px).

This is more a “here’s when I played around with Firebug and ended up making the site look different from the local one” personal reminder post, not a “come over and take a look” one, but if you do find something breaks somewhere, kindly let me know.

With wp_list_categories(), you can exclude categories in some ways:

• You can hide any category with the exclude parameter, use comma separated list for multiple categories.
• You can show only the children of a certain category with the child_of parameter.

However, there seem to be no way with to make that function completely hide the entire children of a category. Sure, you can use exclude, but if you have a gazillion of child categories and/or adding them frequently, thing can get cumbersome.

Wait. Why does this matter?

Well, a funny edge case with Pico is that when there are a ton of child category in a dropdown menu, it will create a long, empty white space even after the footer ends. It turns out that Suckerfish dropdown works by hiding those submenus from view, but they’re still there affecting margins. If you have a lot of them, the page will get longer.

So a quick solution would be to hide all children from that category. I looked around and didn’t seem to find an answer. I was hoping for the exclude_tree parameter to do the job, but based on my (admittedly limited) experiment, it won’t do whatever it is supposed to do (the trac ticket is for wp_list_pages(), but I suppose they’re the same).

CSS to the rescue

There’s probably a solution that involves writing a plugin and mucking around with PHP, but being lazy I then realized that wp_list_categories() outputs a class with the category’s ID inside each <li>. In that case, a simple display:none should do:

.cat-item-15 ul { display: none; }

The code example above will hide all children of the category ID 15. Simple, easy, with the added benefit that the children category links still show up on the HTML and therefore readable by search engine crawlers and page readers. Downside is that it only works specifically for that case; can’t really use it for a catch-all solution.

Wait. Why does a CSS article show up on a WordPress development blog?

Well first of all I stumbled upon this trick accidentally while developing this one theme I’m working on. And also I promise it will be short and simple enough. So do read on.

For the theme I want to display a Table of Content-style home page that will look like this (click the image to view full-size):

That is a centered ordered list with list content below its number. The HTML structure I have is:

  <ol id="toc" class="clearfloat">       
    <li><h2><a href="#">I Learned that Adding an Egg to Ramen Soup is Awesome</a></h2></li> 
    <li><h2><a href="#">Why I believe printers are the spawn of Hell</a></h2></li> 
    <li><h2><a href="#">I nominate the most dangerous enemy ever created.</a></h2></li> 
  </ol>

…and so, the CSS.

This gets me curious because as we all know, list numbers normally show up to the left of the text. After a bunch of crazy experiments, some of which kept me puzzled about what really happened, I got this solution (leaving out the various text-formatting codes):

body {
  counter-reset: toc 0;  
  } 
 
#toc li:before {
  content: counter(toc, lower-roman) ".";
  counter-increment: toc;
  }  
 
#toc li {
  list-style-type: none; /* hide the numbers, show them via the toc li:before above */
  text-align: center;
  }

Here’s the main idea. I found out that if I use list-style-type:none and use generated content to display the numbers, the number will show up on top of the text. Great. Next we add text-align: center; and bam, everything is centered nicely as expected.

This is the first time I learned about counter-reset and counter-increment. They basically allow you to set the starting number on a list. I use 0 in my CSS so mine starts from 1, but that number can be anything. Here are some articles I found about this topic:

• Automatic counters and numbering
• Automatic numbering with CSS Counters
• CSS Content, Counter-Increment & Counter-Reset
• counter-increment (CSS property)

Results and Demo

Here’s a demo page for this CSS experiment. I’ve tested it and it works on Firefox 3.5, Opera 10, Chrome 3 and Safari 4. IE 8 doesn’t seem to support content, so it won’t show the generated number. I can live with that.

And that’s it. Hope it can be useful! I’ll release the theme pretty soon, so subscribe to the feed if you want to be updated.