Firstly, you can now find everything at its own project page: Smarter Custom Post Types. Updating the original post every time I edited something wasn’t awesome.
In 1.3 I tweaked the label UI handling to work properly with recent updates to label handling for custom post types, and cleaned up the code a bit. Go to the project page to download 1.3.
A couple of weeks ago I posted Realistic Looking CSS3 Buttons, in which I tried to make awesome-looking CSS3 buttons that required no extra markup. For people who like more code and less talk, the end of the post has the link to the demo.
As awesome as they were, they required an explicit width. This meant that they didn’t adapt gracefully to different labels—you had to explicitly set a width on the buttons that might not fit the actual label properly. This had been necessary to get the nice inner white border, which I’m now using two instances of inset box-shadow to replicate (many CSS3 declarations allow for multiples, such as background-image and box-shadow). I would have preferred to do it with only one declaration, but box-shadow: 0 0 1px #fff inset; produced too dim of an inner border for my liking.
I also wanted a better-looking button depressed state. I emulated the inner shadow typical of OS X Leopard-era buttons with a third inset box-shadow on the :active state, as you can see below. Pressing the buttons feels really awesome if your browser supports CSS Transitions.
States: Normal, Hover, Active (left to right)
Speaking of CSS transitions, they’re now used consistently on the :hover state, by changing the background-color on hover instead of changing the gradient (gradients don’t currently animate in a transition). I also did a bit more work to make it cross-browser friendly: I used backup colors wherever rgba() notation was used, as well as a gradient.png fallback for browsers incapable of CSS gradients.
Here’s a few things I found along the way:
box-shadow yet in Safari 4 or Mobile Safari. So, they get left behind for now. But WebKit nightly and Chrome have landed support for inset box-shadow.box-shadow starts on the outside and then snaps to the inside at the end of the transition.:after pseudo-element placed on a button element. I did some hacky things to work around that at the default size using @-moz-document. Not awesome or recommended.Without further ado (and I use the phrase only to plead with the people of the world who say “without further adieu” to STOP DOING IT WRONG), check out the Realistic CSS3 Buttons Redux demo.
The Erudite 2.6 has been released. It’s not yet available in the themes repo as I write this, but you can download it from the project page.
2.6 includes support for WP 3.0’s new nav menus, which puts you in full control of your header. If you have only one nav menu, it’ll use it. If you want to user more than one nav menu, be sure to call the one you want in the header “Header”. If you don’t have any nav menus, it’ll fall back to 2.5’s pages or category behaviour.
Some other things that were included:
Also, The Erudite is now on github! I’m probably going to move all feature requests/bug reports over there, as the comments section on the project page has gotten pretty unwieldy.
FontFriend got a little shoutout in this month’s issue of Print magazine. Thanks to Bev for letting me know!
Print, April 2010, p.80. Click image for full size.
Print doesn’t seem to put much of their magazine’s content on their website, so I took the photo above. If you don’t feel like reading the grainy iPhone photo (no, I wasn’t about to spend $20 just to stroke my ego), here’s the full text:
Occasionally during a web project’s construction phase, the designer will decide that the type doesn’t look quite right. This is often due to slight but still noticeable differences between Photoshop’s text rendering and that of the multiple browsers a site has to support. In response, the designer sometimes has to do multiple rounds of slight tweaks to size and spacing.
To help with this, Soma Design’s Matt Wiebe offers the FontFriend bookmarklet. Just drag it to your browser toolbar, activate it on the page you want to edit, and a panel is exposed that can be used to edit a selection of the most common browser text settings. A few simple presets are offered for text that is affected, but the power of the jQuery Javascript library’s selector engine is available for more specific selections. (An explanatory link is provided from the panel, but it’s anything you could do with basic CSS syntax, and more.)
Ideally, the task of using FontFriend would be handed off tot the designer directly, who could send final modifications straight to production.
For more progressive web designs using the new @font-face possibilities, the bookmarklet can take care of a new feature in Firefox 3.6 that allows you to drag a font file directly onto the panel to select the family of your choice.
This is a two-fold small update to FontFriend, the typographically obsessed web designer’s best friend. A request came in over Twitter for inline styles in the Font Family section. Good idea, and it’s now in there.
Non-present fonts show up as monospace
It’s also a small update because FontFriend is even smaller - I’m now minifying it (using YUI Compressor), which brings the total size from 12.5K to 10K. Not a huge savings, but every bit helps, and I made my first build script in the process.
Because it pulls directly from Google Code, there’s nothing to do other than see the new version show up. (Clear your cache if you keep seeing 2.1.)