Your problem is most likely server permissions. If you have shell access to your own VPS/dedicated server, use the lines below. If you’re using a shared hosting setup, try option #4 below, or contact your administrator for help.

Option #1: chmod 777

Sure, you could CHMOD 777 your whole site. That would technically work, but it’s switching permissions whenever you need to update is inconvenient. And, leaving permissions this way leaves you open to a whole host of security issues.

chmod -R 777 <path-to-wordpress-dir> (Not Secure!)

Option #2: apache file permission

This gives apache full permissions. This works, but if you use FTP, users no longer have permissions to write files. No good! I want my FTP access intact.

chown -R apache:apache <path-to-wordpress-dir> (No FTP!)

Option #3: apache /w group permissions

I created a “wordpress” group and added my FTP users to it and gave the wp-content directory group write permissions. It’s a bit of a compromise, but it worked for me.

groupadd wordpress
useradd -G wordpress <your-username>
chmod -R 775 <path-to-wordpress-dir>/wp-content/
chown -R apache:wordpress <path-to-wordpress-dir>

Option #4: wp-config constants

Another option for those who are unable to change file permissions and/or have a relatively new version of WordPress, is to bypass entering FTP information by defining your FTP info in your wp-config.php file. More information can be found in the WordPress codex.

define('FS_METHOD', 'ftpext');
define('FTP_BASE', '/path/to/wordpress/');
define('FTP_CONTENT_DIR', '/path/to/wordpress/wp-content/');
define('FTP_PLUGIN_DIR ', '/path/to/wordpress/wp-content/plugins/');
define('FTP_USER', 'username'); 
define('FTP_PASS', 'password');
define('FTP_HOST', 'ftp.example.org');

The Zen theme is the natural first step when theming Drupal. It reduces Drupal down to the essentials, allowing for a solid foundation to build up from. The alternative? Copying files from the core themes is messy, and starting from scratch is time-consuming.

Download the Zen Theme. Included is the base zen theme and sub-theme template, STARTERKIT.

Copy everything into sites/all/themes/zen on your web server. Move the STARTERKIT folder up a level into sites/all/themes. Separating the base theme makes upgrading zen the simple matter of overwriting the zen folder with the newer version. Files within the zen folder will remain unaltered. All configuration is done within the STARTERKIT sub-theme.

Installing/enabling the sub-theme

Rename the folder “STARTERKIT” and “STARTERKIT.info.txt” file to match your new theme and remove “.txt” extension. For example, “yourtheme” and “yourtheme.info”. Open that info file and change the following lines:

name = yourtheme
description = A Zen sub-theme

Login to your drupal install, Admin>Appearance and enable yourtheme sub-theme and the zen base theme. Set your sub-theme as default.

Template files

Many of the page templates are included in the Zen package and can be found in sites/all/zen/templates folder. Copy all needed templates to your sub-theme folder (sites/all/yourtheme/templates) folder.

Important note

Remember to deselect “Rebuild theme registry on every page.” in Admin>Appearance>Settings(sub-theme)

Have you used Zen as a starter theme for Drupal 7? Please share your tips and/or experience with the Zen theme in the comments below.

MAMP is great. It’s an easy way to host your PHP/MySQL site locally for testing and development. But, if you want to take advantage of Snow Leopard’s built in web server capabilities, OS X makes it easy. Go into System Preferences > Sharing, and check the “Web Sharing” box.

That’s it. You can now setup an HTML-only website locally. Where do you put the files? The default folder is /Library/WebServer/Documents/. While we’re at it, let’s setup PHP and MySQL to work locally, as well.

Test it. http://localhost. No need for a port as it will use apache’s default port 80.

PHP and MySQL will now need to be setup for a full functioning local host.

Setting up PHP

Open up Terminal (Applications->Utilities->Terminal) and type:

sudo nano /etc/apache2/httpd.conf

Go to this line

#LoadModule php5_module        libexec/apache2/libphp5.so

and uncomment the line by removing the hash character

LoadModule php5_module        libexec/apache2/libphp5.so

After saving the file (Control+O) and exiting (Control+X). Restart Apache.

sudo apachectl restart

Configuring PHP

cd /etc
sudo cp php.ini.default php.ini
sudo chmod 666 php.ini
sudo nano php.ini

Find this line and remove the semi-colon

;date.timezone = 

and add your own timezone. A list of timezones can be found here (http://php.net/manual/en/timezones.php)

date.timezone = America/Halifax

You’re halfway there. PHP 5 is now running on your local server.

Setting up MySQL

Download the MySQL package for Mac OS X.5 (32 or 64 bits depending on your machine)
Install everything in the package in this order:

• mysql
• the startup item
• the preference pane.

Now, open /etc/php.ini, find these three lines

pdo_mysql.default_socket=/var/mysql/mysql.sock
mysql.default_socket = /var/mysql/mysql.sock
mysqli.default_socket = /var/mysql/mysql.sock

and replace /var/mysql/ with /tmp/

pdo_mysql.default_socket=/tmp/mysql.sock
mysql.default_socket = /tmp/mysql.sock
mysqli.default_socket = /tmp/mysql.sock

After installed, you can start MySQL in the system preferences. To access your database from the Terminal

/usr/local/mysql/bin/mysql -u root

Change your Home Directory

Want your local server’s files to be located somewhere other than the default /Library/WebServer/Documents/? Open /etc/apache2/httpd.conf, and change the next two lines to reflect your new home directory.

DocumentRoot "/Library/WebServer/Documents"
...
<Directory "/Library/WebServer/Documents">

Drupal Problems?

If you’re getting errors during Drupal installation try linking the MySQL sock file like below

cd /
sudo mkdir /var/mysql
sudo ln -s /tmp/mysql.sock /var/mysql/mysql.sock

Drupal’s Clean Urls

Having problems enabling Clean Urls? Find all instances of the following line in /etc/apache2/httpd.conf

AllowOverride None

and change None to All…

AllowOverride All

It’s a constant struggle to be noticed in this ever expanding internet landscape. The practice of SEO (Search Engine Optimization) provides the brightest beacon for our robot friends. In that effort, headings are crucial elements. No matter what advances may come, information hierarchy will remain.

Get the most out of your headlines.

H4-h6 are all but discarded as insignificant. Constrain your headings to the highest levels: h1,h2, and h3. Larger emphasis is placed inside these magical tags, so make these words count. Spice your headings with only the most relevant keywords. A word of caution: overuse at your own risk. Too much repetition and these tags will work against your ranking.

WordPress Users: Your blog title is your H1. The H2 is a post title, and H3 is a heading within a post. Tip: On single pages, turn post titles into H1.

The Context

The H1 tag. Quickly describe who you are and what you do. Use one H1 tag near the top of the page. Max 5–7 words. Mirror your title tag with prime keywords. Avoid overuse. It’ll only weaken the impact.

The Content

The H2 tag. Get more specific. If you sell widgets, what sort of widgets? It’s time to do some research and embed the words people use to find your site. Google analytics is a great place to start researching your most popular keywords.

The Callouts

The H3 tag. From all accounts, H3 tags do little to improve ranking, and are mainly used to divide sub sections, helping readers digest information quicker. Better reading reduces bounce rate, and encourages return visits.

Two years of blood, sweat, and bezier curves. That’s what it takes to make your average font family. Two years of painstaking work in an under-appreciated and underpaid industry. Too many years to watch your pockets picked by an internet culture of open source, free distribution. It’s no surprise that @font-face scares the bejesus out of type designers. As a result, progress has been slow and attitudes more cautious about embedded type.

What is @font-face?

@font-face is a CSS rule pointing to server side font files. Instead of relying on system fonts, designers use whatever font they choose.

To the web designer, it means getting the desired look while saving hours that would have been spent setting up hacks and workarounds. To a type designer, it’s like handing your keys to a perfect stranger and hoping they won’t rob you blind.

Where will @font-face work?

• Safari 3.1
• Firefox 3.5
• Opera 10

What about Internet Explorer?

Microsoft has supported web embedding fonts ever since IE 4. Like everything with Microsoft, it’s not that simple. The more secure EOT (Embedded OpenType) format was being developed, but never really took off. The added complexity of creating an EOT file required a special tool (WEFT). It was a valiant effort to obscure font data and add a level of security. Many are still unconvinced, and wait for a better non-proprietary format. Until that time, the traditional TTF (TrueType Font) format and the newer OTF (OpenType Font) formats will not work in Internet Explorer.

Internet Explorers (6,7,8) make up around 40% of users, which means an alternate set of fonts and @font-face declarations, or you’ll be falling back to the font stack like usual.

How do you use @font-face?

1. Copy font file to your server
2. Define @font-face in CSS
3. Declare font in CSS

@font-face {
  font-family: MyFont;
  src: url(MyFont.ttf);
}

body {
  font-family: MyFont, sans-serif;
}

What about legal issues?

All major font foundries now append their End User Licensing Agreements to restrict web embedding. Nearly all commercial-use licenses do NOT give you @font-face permissions. From listening to the TypeCon 2009 Web Fonts Panel there appears to be a growing consensus that embedded opentype will emerge as the future of type on the web.

Fonts were not designed to mix and match. Sure, we can consult the Font Matrix and find an available font. But, tailored web safe typography has always been seen as a luxury. With the proliferation of desktop publishing software, computers are now preloaded with more system fonts than ever before. With greater choice comes greater control.

Where are we now?

There have been some great articles written about CSS font stacks. Designer’s know Gill Sans, Myriad, Tahoma, and Frutiger are not “Arial-based”. But, we live with it. We think that’s the best we can get. After doing some research, I’ve found there’s more than enough system fonts to have font styling the way you want it, without compromise. Below you’ll find a list of font stacks organized by the most popular typeface classifications.

Headline Font Stacks

1   Display Serifs (Delicate details. Best seen at large sizes)

font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;

2   Geometric (Low readability. Best seen large in short lines)

CAUTION: At best, 90–95% coverage over all systems. Drop back to Arial to prevent generics.

font-family: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;

3   Modern (High contrast. Thins may disappear at smaller sizes)

WARNING: At best, 70–80% coverage over all systems. Drop back to Transitionals (Georgia, Times, Times New Roman) to prevent generics.

font-family: Didot,"Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;

You may ask, “Where’s the slab serif stack?”. Besides Rockwell (50% on windows), there’s very little coverage. If you’d like to use them one, try one of the many font replacement techniques.

All stacks below guarantee best possible coverage (99%). This is an attempt to retain the same font styling on the most systems.

Sans– Serif Paragraph Font Stacks

4   Neo-Grotesque  (The granddaddy of sans serif. Even strokes, well balanced)

font-family: Corbel, Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", sans-serif;

5   Humanist (Slightly more varied strokes. Some serif features)

font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;

6   Set Small (Crystal clear at x-small. Looks great less than 11 pts)

font-family: Corbel, "Lucida Sans Unicode", "Lucida Grade", "Bitstream Vera Sans", "Luxi Serif", Verdana, sans-serif;

Serif Paragraph Font Stacks

7   Old Style (Unique historic character, often overlooked)

font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;

8   Transitional (The workhorses of the serif. Easy on the eyes. )

font-family: Cambria, Georgia, "New Century Schoolbook", "Century Schoolbook L", "Times New Roman", serif;

Monospace Font Stacks

9    Clear Code (The best monospaced fonts. Easy on a developer’s weary eyes)

font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;

10   I ♥ typewriters (Need I say more?)

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;

In my last article, “The Past and Present of Web Typography”, I’ve discussed alternatives to browser core fonts. Since font replacement for paragraphs is unrealistic, for the time being we have to make do with core fonts. If we’re forced to use these system fonts what sort of control do we have over setting them?

Web Typesetting Now

• Font Size (%, pixels, ems, pts)
• Limited Tracking (± 1 pixel)
• Leading (line height)
• Word Spacing

Web Typesetting of the Future

• @font-face (non-system fonts)
• Full justify w/ flexible spacing
• Accurate Tracking (to the decimal point)
• Consistent Leading (Baseline Grids)
• Ligatures (ex. Th, fi. fl, ff, ft, fh)
• Hyphenation and special characters *
• Fractions, super/subscript *

Print is dead. Did typesetting die with it?

For those migrating from the print world, you demand more control over typography. Progress in the web world is glacier slow much like getting a billion people to march in the same direction. It takes some major cajoling when even the best of us resist change. You may be surprised what tools are already available to the web typographer.

Tracking is “letter-spacing”

Tracking adjusts overall letter spacing. Letter-spacing may not be necessary in paragraphs. It’s often used in justified columns to even out spacing. Single pixel adjustments are the only way for cross browser support.

p {
  letter-spacing: 1px;
}

Leading is “line-height”

Leading (space between the lines) in CSS is called “line-height”. Small increments (.05) are accepted. Of course, the math is easier with round numbers. Traditionally, line height is set in ems.

p {
  line-height: 1.35em
}

CSS Font Stacks Explained

Think of the font stack as building in a fallback plan. Lets say you want to use Garamond on your website, but you know Garamond is installed on very few computers. If it doesn’t exist on your system, the runner-up takes its place, and so on. If no fonts are found, the browser default (serif, sans-serif, monospace) is called. As shown below, Georgia will be used if neither Garamond or “Times New Roman” is found. Note that fonts with multiple word names need to be enclosed in quotes.

p {
  font-family: Garamond, Georgia, "Times New Roman", serif;
}

Full Paragraph Style in CSS

p {
  font-family: Garamond, Georgia, "Times New Roman", serif;
  font-size: 100%;
  line-height: 1.3em;
}

Full Paragraph Style in CSS (Shorthand)

p {
  font: 100%/1.3 Garamond, Georgia, "Times New Roman", serif;
}

*php-typography (Also available in a wordpress plugin) enables more advanced typesetting options. Some of which include automatic hyphenation, special characters (…), em dashes(—), en dashes(1900–2000), fractions (½), superscript (3²) and many more.

How do you get the most out of paragraph text? Have any tips/tricks? Comment below.

The core four: Georgia, Verdana, Arial, and Times. Familiar to most, as the web safe fonts. All solid choices for maximum compatibility. Nearly all of computers show them accurately (as shown below).

Update: Type designer Rod McDonald provided corrections to my sloppy wiki-research.

Times New Roman

Being in the spotlight for just short of a century, Times New Roman became ubiquitous. Designed for the British Times newspaper in the early 30’s. It’s popularity in book publishing and wide use paved its way into the digital age.

Rod says: Times New Roman was originally designed for The Times of London by the renowned typographic historian Stanley Morison who employed Victor Lardent to do the final drawings. The fonts were produced by the British Monotype company.

Georgia

Matthew Carter is one of this generation’s most prolific and best known type designers. His work has changed the face of the web. Subtle variations in x-height, weight, and size makes it better suited for screen presentation.

Rod says: According to Matthew Carter, Georgia owes much of its design to the old British Scotch Romans and to his own Miller typeface. Carter made the serifs considerably heavier to ensure they would ‘hold up’ at small sizes on screen.

Verdana

Another Matthew Carter creation. This time a sans serif. Much like Frutiger. It’s exceptionally easy to read at small sizes.

Rod says: Matthew Carter’s Verdana is similar in design to Walter Tracy’s 1959 Adsans which was originally designed for use at very small sizes in the classified section of newspapers. Another influence on the design was Carter’s 1977 Bell Centennial, designed for use in US telephone directories.

Arial

The result of Microsoft’s prevalence, and of the original and ever popular, Helvetica.

Rod says: Arial was developed by Monotype for IBM in 1982. The design was based on the old Monotype Grotesque range and was originally called Sonoran Sans. In 1993 Microsoft asked Monotype to provide them with a TrueType sans for their new Windows 3.1 OS. Monotype reworked Sonoran Sans and renamed it Arial. Shortly after its release false stories began to circulate that Arial was simply a ‘knock-off’ of Helvetica.

Want to use another font?

With pressure from designers for more choice, developers have taken up the cause. As a result, font replacement was born. After a web page loads, HTML tags (usually headings) are replaced with either vector outlines or images taking on the dimensions, overlapping, and replacing the original heading.

The following are essentially workarounds as browser technology is slow to adapt and font foundries are weary of internet distribution and piracy. Font replacement on a large scale (body text) is unwieldily by its resource hungry nature. But, for headings, they work splendidly to enhance the look of your site. Here are a few of the most well known…

sIFR 2.0 (or sIFR 3beta), The most popular font replacement. In part, because it’s the only way for the heading to remain selectable. You need flash installed in your browser to see anything, and it’s notoriously difficult to setup. (requires Javascript and Flash)

FLIR or Facelift Image Replacement ( Pronounced fleer ) transforms type into an image. Because the result contains none of the original curve information, it allows you to bypass most EULA web embedding restrictions. The only drawbacks I’ve encountered have been its lackluster support for special characters (typographer quotes, em dashes, etc.), and loads a bit slower than the others. (requires Javascript and PHP)

Cufón is a no flash solution, like FLIR, but loads incredibly fast. Fonts are embedded into a javascript file where the outlines are extracted. Because of the possibility for reverse engineering, this method goes against many EULA agreements. Check your font’s fine print before using. (requires Javascript)

Typeface.js, much like Cufón, extracts and merges fonts into a javascript file. The main difference is that typeface.js only supports TrueType fonts, and detects file permissions. So, good luck for any font that isn’t free. (Requires Javascript)

Looking for a simple solution? Typekit uses CSS’s @font-face, hosting the font files for you (for a small membership charge). Choice is limited, however, as only a select few foundries participate. Implementation is as simple as pasting in a single line of javascript code. Because the fonts are securely hosted by Typekit, font stealing cheapskates will have to look elsewhere.

It’s a Step Forward, but…

In 5 years time, let’s all hope either Microsoft will get its act together with its EOT font format or there’ll be a web Opentype format that everyone agrees upon. But, until that date there’s many a workaround to employ.

Anything I missed to mention? Something to add? Please share below.

Searching for icons is a little like a treasure hunt. That is, if the treasure was spread all over in the hardest to reach places. The problem is you end up liking one or two icons in a whole set and throwing out the rest. There’s a solution and it’s called Icon Finder. All the icons you could ever need with licensing information just a quick click away.

Icon Credits

I used Icon Finder heavily on my site and would like to credit some of the many wonderful icon designers who help us all look so good.

• Everaldo Coelho : Crystal Clear Icon Set
• Ikon : Round Icons
• Liam McKay : Function Icons
• Oxygen Team: Oxygen Set
• Gnome Project : Gnome Icons