Add a Category and Page Specific Class to the Body Tag in WordPress
July 23rd, 2009 — 6 Comments
WordPress is a powerful CMS, especially for blogging but what if you want to style something on a single page and not affect anything on other pages? There isn’t built-in way to do this so we need to use the platform that WordPress runs on by writing some custom PHP.
Read more...Change the Browser Default Selection Appearance
July 9th, 2009 — 6 Comments
A quick and easy CSS3 technique to change the appearance of selected text which can bring a bit of extra personality and improve readability. It can also contribute to making your site more memorable. I first noticed this technique over at CSS-Tricks and it instantly became something I associated with the site.
View Photoshop Files in Safari
June 30th, 2009 — 3 Comments
A quick and little known tip is that you can view Photoshop files (.psd) in Safari. This is great for previewing a design in a browser without having to constantly save out to a jpg. As you can see in the image below is a .psd of a mock up of Inspect Element’s 404 page loaded into Safari. Now you can easily and quickly save your work in Photoshop and switch to Safari to see your work, how want to see it, in a browser.
Unfortunately this is a Mac OS X only feature. I had hoped that Safari 4 on Windows would support it but no luck. A quick search reveals that there doesn’t seem to be a plugin that can replicate this functionality in Firefox which is a shame. Hopefully someone out there is developing one, or planning to!
Read more...Rounded Corners on Input Fields in (almost) all Modern Browsers
June 11th, 2009 — 7 Comments
Rounded corners in web design is a popular, modern technique. In general, it can give a site a smoother look and feel to the design but the only way to get it working in all browsers is through the use of images. If you apply the method of progressive enhancement then you can use CSS3 techniques to add rounded corners to web elements without the need for images.
It is common knowledge that this can be done on divs but many designers and developers probably don’t think of using it on input fields. Well, you can! By using the code below you can let the browser do the work while cutting down on the amount of data that the user downloads and also reducing the number of HTTP requests which improves performance.
Read more...Enable Safari's Awesome Built-in Development Tools
June 9th, 2009 — 11 Comments
Almost all web developers know about Firebug, a plugin for Firefox that makes web development so much easier, at least for developing in Firefox. Not everyone knows that Safari has its own development tools built right in.
Available on both the Windows and Mac versions of Safari (preferences > advanced) is a tick box ‘Show Develop menu in menu bar’ which enables the development tools. Â By default it is unticked but enabling it allows you to right-click on any element on a web page and select Inspect Element and bring up the Web Inspector much like you can do with the Firebug plugin for Firefox.
