Web Design
Category Archive

Accessibility Notes Plus

Just a few useful accessibility notes.. Add accesskey attributes to important list items, content areas, and any other key areas of the document. Use alphanumeric characters as accesskey values, as in this example: <ul> <li><a id=”home” accesskey=”h” href=”http://domain.com/home.html”><span class=”accesskey”>h</span>home</a></li> <li><a id=”menu” accesskey=”m” href=”http://domain.com/menu.html”><span class=”accesskey”>m</span>menu</a></li> <li><a id=”search” accesskey=”s” href=”http://domain.com/search.html”><span class=”accesskey”>s</span>search</a></li> </ul> When an accesskey attribute is present within a link tag, pressing alt+letter on the keyboard is equivalent to double-clicking that link. Generally speaking, the presence of an accesskey attribute within an element brings focus to that element. Thus, radio and check boxes are toggled, links are clicked, and form elements […] Read more »

Spamless Email Address via JavaScript

Let’s face it, spam sucks. Give spammers the figurative finger by using this nifty bit of JavaScript to hide your email address from the harvesters. Here is an easy “copy-&-paste” snippet for including a spam-proof email address in your web pages. Although there are a million ways of doing this, I am posting this for the record (and because I just can’t stand deleting usable code). This technique uses JavaScript, and therefore is not 100% ideal for all users. My advice would be to include a <noscript> element that contains an image of your email address. That way, users without […] Read more »

Crazy CSS Underline Effects

Check out these crazy CSS underline effects: u.double { /* — double underline — */ border-bottom: 1px solid; } .altdouble { /* alternate double */ border-bottom: 3px double; line-height: 1.7em; } u.triple { /* — triple threat — */ border-bottom: 3px double; line-height: 1.9em; } Double Underline Effects! (via u.double class) Alternate Double Underline! (via .altdouble class) Triple Underline Effects! (via u.triple class) Note: if these examples do not display correctly with the current theme, click here to see them in action! Read more »

CSS Hack Dumpster

Consider this page a virtual dumpster of wonderful CSS hacks.. Commented Backslash Hack V2 This hack effectively hides anything after the “\*/” from MacIE5: /* commented backslash hack v2 \*/ div#something { boder: thin solid red; } /* end hack */ May also be used for CSS import directives: <style type=”text/css”> /* commented backslash hack v2 \*/ @import url(http://www.site.com/stylesheet.css); /* end hack */ </style> Fix Division Widths in IE Fix IE’s crazy box rendering. The first line limits to only IE. The second line * html div#somediv { /* limits to all IE */ width: 300px; /* width for WinIE5.x […] Read more »

Conditionally Load WordPress Pages

Need to load a WordPress page conditionally? For example, perhaps you need a “special” page to appear for search results? Yes? This simple PHP/JavaScript solution may be just what the doctor ordered! Simply replace “condition” with the required condition (or delete the if (condition) {} qualifier entirely), and then change the path and file names to suit your specific needs: <?php if (condition) { echo (” <script type=\”text/javascript\”> <!–//–><![CDATA[//><!– parent.location=\”http://www.domain.com/path/to/file.html\” //–><!]]> </script> “); } else { echo (” <script type=\”text/javascript\”> <!–//–><![CDATA[//><!– parent.location=\”http://www.domain.com/path/to/other-file.html\” //–><!]]> </script> “); } ?> Specifically, I employ the following trickery in my Killer WordPress theme: <?php endwhile; […] Read more »

Execute External WordPress Functions

To execute WordPress functions in an external directory (i.e., outside of the WordPress install directory), it is necessary to include a call to “wp-blog-header.php” at the top of the external file. For example, if your WordPress-powered blog is located in a subdirectory called “blog” and the external file is in the domain root (e.g., the external file is located directly in http://domain.com/), add the following code to the top of the external file: <?php require_once(“./blog/wp-blog-header.php”); ?> This may be generalized by writing: <?php require($_SERVER[‘DOCUMENT_ROOT’].’/blog/wp-blog-header.php’); ?> Read more »

sIFR Notes Plus

Here are a few sIFR Notes for Perishable Press. Just what are we looking at here? Well, first it is important to understand the sIFR variables and the order in which they should appear: (sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode) The variable, sFlashVars consists of the following sub-variables (these should be seperated with an & sign: # Align Flash text block textalign=center # Moves text any number of pixels to the right offsetLeft=3 # Moves text any number of pixels down offsetTop=3 # Adds underline links when hovered underline=true Then, inducing from the […] Read more »

Stupid htaccess Tricks Redux

One of our most popular posts, Stupid htaccess Tricks, has been completely rewritten and now includes almost twice as many stupid htaccess tricks. Plus, we have added a library of regex character definitions, more information for many of the directives, and several handy references. But wait, there’s more — we even threw in a “quick-jump” Table of Contents and a complete set of “up” [ ^ ] links for easy navigation. Utterly amazing! Read more »

A Complete CSS Template File

To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values. Tags that […] Read more »

WordPress Search Function Notes

Code to call an external WordPress search form: <?php include (TEMPLATEPATH . “/searchform.php”); ?> Code for a standard, inline WordPress search form: <form id=”searchform” method=”get” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”> <p><input name=”s” type=”text” id=”s” size=”33″ maxlength=”99″ /> <input type=”submit” class=”submit” value=”Search &raquo;” /></p> </form> Code to search through multiple categories when using customized, individual category pages: <form id=”searchform” method=”get” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”> <p><input name=”s” type=”text” id=”s” size=”33″ maxlength=”99″ /> <input type=”hidden” name=”cat” value=”1,2,3,4,5,6″ /> <input type=”submit” class=”submit” value=”Search &raquo;” /></p> </form> Code to try if the search function fails and your blog is located in a directory other than root: […] Read more »

Backup that Database with phpMyAdmin

DB Export Settings Backing up your database as often as possible is essential. For WordPress, as well as for other applications, plugins and other scripts that help automate the task are easily obtainable. However, for several reasons, it is a good idea to understand the process of manually creating a backup copy of your database. This brief tutorial1 should help cement the process into a solid reference. We are assuming that you have an SQL database and have access via phpMyAdmin. Before reading through the gory details written below, check out the screenshot to the left (click on the image). […] Read more »

Lightbox + FancyTooltips Bug Fix

For those of us enjoying the stylish functionality of Lightbox or any of its many incarnations, images "magically" overlay the window and unfold, revealing navigational buttons, image count, and of course the image titles. For those of us enjoying the stylish functionality of FancyTooltips (original link now 404 @ http://victr.lm85.com/projects/fancytooltips/) or any of its many incarnations, title and alt attributes manifest as stylish displays of CSS brilliance. However, for those of us employing both features, there is a potential JavaScript conflict. This conflict makes it impossible for Lightbox to display the contents of title attributes associated with images. Thus, if […] Read more »

Website Attack Recovery

Recently, every website on our primary server was simultaneously attacked. The offending party indiscriminately replaced the contents of every index file, regardless of its extension or location, with a few vulgar lines of code, which indicated intention, identity, and influence. Apparently, the attack occurred via Germany, through a server at the University of Hamburg (uni-hamburg.de). This relatively minor attack resulted in several hours of valuable online education. In this article, it is our intention to share experience with website attack recovery. This article is aimed at website developers, designers, and administrators. Read more »

The htaccess Rules for all WordPress Permalinks

Updated June 30th, 2016: All code current with WordPress 4+. The permalink rules in this article should work with all versions of WordPress. I recently performed a series of tests on a fresh installation of WordPress to determine the exact .htaccess rewrite rules that WordPress writes to its .htaccess file for various permalink configurations. In the WordPress General > Permalinks settings, WordPress lists six options for permalink structure: Read more »

Passing Quotation Marks via wp_link_pages

According to the WordPress Codex 1, it is possible to pass quotation marks via the parameters of the function, wp_link_pages(). This would enable users to assign a particular css class or id to the function output, thereby providing greater design and behavioral control over that particular object. But alas, as reported several times in the WordPress Codex 2, wp_link_pages() is unable to pass quotes without causing errors. To fix this, we open template-functions-post.php and find wp_link_pages(), which is located around line #121 (for WP 2.0.2). The fix is easy, simply edit the <p> in the following lines: $r[‘before’] = ‘<p>’ […] Read more »

Reversing WordPress Page Navigation Order

This article explains how to reverse the order of WordPress page navigation links. To reverse the default (backward) order of page navigation in WordPress, open the file template-functions-links.php (in WP 2.0) or link-template.php (in WP 2.1/2.2) and scroll down to the last function, posts_nav_link() 1. Next, find the last if statement and switch the order of the following two lines: previous_posts_link($prelabel); [ ignore this line ] next_posts_link($nxtlabel, $max_page); Next, within the first line of the same function (beginning with function posts_nav_link), switch the order of the variables $prelabel=’&laquo; Previous Page’ and $nxtlabel=’Next Page &raquo;’. Finally, within the loop, make sure […] Read more »

Latest Tweets New tuts! Learn how to whitelist good bots, block nuisance IPs, change file extensions, write clean comments & more… twitter.com/i/web/status/82001…