Spring Sale! Save $10 on The Tao of WordPress and book bundles with Digging Into WP and .htaccess made easy – Coupon code: Spring2014

Better WordPress Archives via Dynamic Triple Column Layout

Here at Perishable Press, the number of posts listed in my archives is rapidly approaching the 700 mark. While this is good news in general, displaying such a large number of posts in an effective, user-friendly fashion continues to prove challenging. Unfortunately, my current strategy of simply dumping all posts into an unordered list just isn’t working. I think it’s fair to say that archive lists containing more than like 50 or 100 post titles are effectively useless and nothing more than a usability nightmare. With growing numbers of blogs building up massive collections of posts, finding better ways to […] Read more »

Cross-Browser Transparency via CSS

Shortest post ever! You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet: selector { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } Check the code comments to see what’s doing what, and feel free to adjust the level of transparency by editing the various property values. Also, remember to replace “selector” with the target element of your choice. By the way, I’ve got a metric tonne of juicy CSS posts scheduled […] Read more »

Better Image Caching with CSS

I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions. Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img /> element) or indirectly (e.g., via the parent <div></div> element) using either display:none; or visibility:hidden;. Further problematic is the potential […] Read more »

Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines

I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence. Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only method thrown in for good measure) for removing unwanted focus outlines. Read more »

Perishable Press Featured at Divine CSS!

Yay! Perishable Press is now featured at one of my favorite CSS-design showcase sites, Divine CSS! Divine CSS features a mouth-watering collection of CSS and Flash-based website designs, and is always a great source of inspiration and ideas for new projects. Seeing my current theme (Quintessential) showcased at Divine CSS is very inspiring, and a nice way to celebrate the (relatively) new design. Many thanks to the fine folks at Divine CSS for sharing my site with their audience — it is greatly appreciated! :) So what are you waiting for! Go check it out (while it’s still on the front […] Read more »

Perfect Rounded Corners with CSS

A great way to enhance the visual appearance of various block-level elements is to use a “rounded-corner” effect. For example, throughout the current design for this site, I am using rounded corners on several different types of elements, including image borders, content panels, and even pre-formatted code blocks. Some of these rounded-corner effects are accomplished via multiple <div></div>s and a few background images, while others are created strictly with CSS. Of these two different methods, extra images and markup are used whenever I need the rounded corners to appear in all browsers, or in other words, whenever the effect is […] Read more »

The Ultimate Guide to swfIR Image Replacement

In this ultimate guide to swfIR, you will learn how to use swfIR to replace your ordinary images with richer, stylized graphics. swfIR enables efficient, practical and scalable application of drop-shadows, rounded corners, and even image rotation to any number of specified images throughout your site. From concept and application to examples and recipes, this guide covers everything you need for successful swfIR implementation. The Challenge.. There are many ways to enhance the visual presentation of your images. Popular visual effects include rounded corners, drop shadows, and image rotation. To achieve these effects, designers often use either CSS, direct image […] Read more »

CSS Implementations of the Rich and Famous

A great way to improve your CSS skills is to check out the stylesheets used by other websites. Digging behind the scenes and exploring some applied CSS provides new ideas and insights about everything from specificity and formatting to hacks and shortcuts. Learning CSS by reading about ideal cases and theoretical applications is certainly important, but actually seeing how the language is applied in “real-world” scenarios provides first-hand knowledge and insight. While there are millions of standards-based, CSS-designed websites to explore, studying a few of the Web’s elite players and CSS experts helps to put things into perspective by providing […] Read more »

IE6 Support Spectrum

I know, I know, not another post about IE6! I actually typed this up a couple of weeks ago while immersed in my site redesign project. I had recently decided that I would no longer support that terrible browser, and this tangential post just kind of “fell out.” I wasn’t sure whether or not to post it, but I recently decided to purge my draft stash by posting everything for your reading pleasure. Thus, you may see a few turds in the next few weeks, but hopefully this isn’t one of them. In any case, here is my final post […] Read more »

How to Deal with IE 6 after Dropping Support

As announced at IE Death march*, I recently dropped support for Internet Explorer 6. As newer versions of Firefox, Opera, and Safari (and others) continue to improve consistency and provide better support for standards-based techniques, having to carry IE 6 along for the ride — for any reason — is painful. Thanks to the techniques described in this article, I am free to completely ignore (figuratively and literally) IE 6 when developing and designing websites. Now that I have dropped support for IE 6, I feel liberated, free of the constraints that once enslaved my time, energy, and resources. Working […] Read more »

Beware of Margins or Padding when Using the min-width Hack for IE

While we all watch as Internet Explorer 6 dies a slow, painful death, many unfortunate designers and developers continue to find themselves dealing with IE6’s lack of support for simple things like minimum and maximum widths. Fortunately, there are solutions to this problem, primarily in the form of CSS expressions such as this: /* set the minimum width for IE 6 */ #target_element { width: expression((document.body.clientWidth < 335)? “333px” : “auto”); /* min-width for IE6 */ min-width: 333px; /* min-width for all standards-compliant browsers */ } Although ugly, invalid, and resource-intensive, this technique works well at setting min-width properties for […] Read more »

Series Summary: Obsessive CSS Code Formatting

My favorite series of articles here at Perishable Press, the “Obsessive CSS Code Formatting” articles explore the esoteric minutia involved with producing clean, well-formatted CSS code. From indention and spacing to opening and closing brackets, the obsessive CSS code series explores techniques and tricks used to transform ordinary stylesheets into streamlined masterpieces of inspiring beauty. Creating poetic CSS integrates the high art of employing consistent coding patterns and formatting methods with the practical functionality of proper syntax, logical structure, and concise delivery. These posts are extremely subjective, opening dialogue concerning the obsessive-compulsive behavior many of us embrace while implementing the […] Read more »

Perishable Press CSS Hackz Series Summary

The “CSS Hackz Series” focuses on useful hacks, tricks, and workarounds for specific presentational and styling issues on various browsers. Although a majority of these articles provide solutions for Internet Explorer, other browsers are covered as well, either specifically or in general. The articles in the “Hackz” series are written to be as clear and concise as possible, focusing on application rather than theory. Thus, these posts cut right to the chase, presenting comprehensive methods and techniques aimed at those already familiar with the basic principles of Standards-based Web design. So, without further ado, here is a periodically updated list […] Read more »

Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS

Recently, I have been getting a lot of requests for multiple-loop configurations in WordPress. It seems that multiple-column, multiple-loop configurations are in high demand these days, especially ones that display posts like this: First column, first loop: display posts #1-5 Second column, second loop: display posts #6-10 Third column, third loop: display posts #11-15 Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase.. Read more »

Latest Tweets Plug-n-play snippet to backup and restore theme options: digwp.com/2014/04/backup-resto… #wordpress