What the options are

TrueType/OpenType – I’m not going to go into the difference between TrueType and OpenType in this post.  The two things exist and they are more or less the same and are typically the most common font types.  The important thing about these formats is copyright; what’s linked when you use either OpenType or TrueType fonts in your stylesheet or code is the original, unmodified font (or a variation of it) which gets downloaded as an element of the web page (just like any other element of the page like graphics or Flash).  Therefore, if you’re using TTF or OTF fonts in your code you need to be sure that the font you are using has an open license that allows for public usage.  If you don’t, you are potentially violating the font creator’s copyright and could get in a lot of trouble.

EOT – The Embedded OpenType format was developed by Microsoft in 1997 with the release of Internet Explorer 4.  What makes EOTs geared for the web is that they can only be viewed in a web browser (and, being a proprietary format developed by Microsoft, only one web browser is able to support them, that being IE).  It shouldn’t be a surprise, then, to know that Internet Explorer only supports EOTs for web fonts (thus far).

WOFF – Web Open Font Format was developed by Jonathan Kew from Mozilla, Tal Leming from Type Supply and Erik van Blokland at LettError and was first supported by Mozilla Firefox.  Like EOTs, WOFF fonts are only viewable in a browser and have the added benefit of additional compression (capable of decreasing the size of the font by up to 40%) and is able to contain additional metadata, such as the font creator.  WOFF is a favored format by the W3C as the standardized web font format and is planned for support in Internet Explorer 9 and a forthcoming version of Google Chrome.

Cufón – Cufón was designed to be an alternative to sIFR.  While not a font, per se, it shares a lot of similarities with standard web font embedding and may also violate existing copyrights on proprietary typefaces.  Cufón is a javascript-based method that converts the font into VML (for Internet Explorer) or SVG (for everything else) to render the characters as vector graphics.  Like standard web font embedding, an external file is required (in this case a generated font file read by the javascript) which is downloaded as an element on the page.  One substantial benefit of Cufón is that the rendered fonts are often much smoother than can be achieved by embedding the actual font itself.

Where to get the fonts

You may be looking at the list of different font types and wondering how you convert your fonts into one of those than can be embedded into a page.  Don’t worry, it looks much harder than it is…

For standard TTF and OTF fonts, there are numerous places to download free fonts.  However, not all fonts that are “free” to use are actually “free” to embed on your website.  DaFont does a good job of distinguishing free, free for personal use and commercial, as does FontSquirrel.  There are also open font movements like the League of Movable Type and the Open Font Library which have repositories of free fonts that are safe to use on your site.

EOTs used to require an antiquated Microsoft-developed tool for converting fonts to EOT format, but the renewed interest in the format has led to the development of a couple of alternate methods.  For people comfortable working from a commandline, there’s TTF2EOT.  This simple Windows/*nix-based tool adds a simple commandline interface to convert a selected font to EOT.  For the less geeky, there’s EOTFast, however, as of this writing, it is still under development.

Similarly, WOFFs have a commandline tool called sfnt2woff which converts TTF or OTF font files to WOFF.

For Cufón, you pretty much have to use the web-based generator on Cufón’s home page.  While it gives almost complete control over the end result, the plethora of options can be a little overwhelming.

Luckily, the best and easiest place to get the fonts or have them converted is from the @font-face Generator at FontSquirrel.  FontSquirrel’s @font-face Generator comes in an Easy and Expert mode, so you can choose whether to let the generator pick the best options for you or to have more full control over the options.  Better still, it is able to generate TTF, OTF, EOT, WOFF as well as Cufón files, in addition to the actual CSS and markup needed to call the font (excluding Cufón which — presumably because it’s so much different from standard @font-face embeds in terms of how to integrate it into your site — you’re on your own for the code).  After you accept the agreement that the fonts you are using should be free to use, you just upload your source TTF or OTF and get a zip file containing everything you need to embed your font.

How to use them

If you used FontSquirrel’s Generator,  you can pretty much use what it spits out verbatim.  Even so, it helps to know what you’re doing and why, and there’s a few tricks that might help along the way…

First off, the code.  This is Paul Irish’s Bulletproof: Smiley variation of the @font-face declaration, and is edging to be the standard.  You can read his post about why it’s the best option.  For my part, I defer to the experts who have spent much more time than I have researching all the variables.  If you downloaded your kit from FontSquirrel, you’ll already be using the smiley declaration.

Simply replace the filename above with the path to the font and set the font-family name to what you’ll call it later.  It should be noted that Firefox has problems with paths that aren’t relative (e.g. full url paths) — this is a security precaution to prevent people from injecting malicious code into their site from off-site.  In most cases, this isn’t an issue, but it can pose a challenge if, for example, you were trying to use @font-face on a site with no local storage (like a BlogSpot blog) and were using some kind of off-site dump to host your files.

So that declares what that font is.  When you actually want to use it, you just add the family name to your font-family the way you would normally, so something like this:

You’ll also, of course, need to have uploaded the font to the server and make sure your source url points to the right place, but other than that, it’s pretty simple.  So what of these special considerations and tricks I mentioned?  Well, as usual, the first problem involves Internet Explorer.

If you’ve played with @font-face declarations at all, you may have noticed that your font looks great in Firefox, spectacular in Chrome and Safari, and like absolute crap in IE.  Ironically, this is because of ClearType — you know, that service that was introduced in WindowsXP that was designed to introduce font smoothing.  In IE7 and higher, ClearType is running within the browser, which in most cases is fine except when it comes to custom fonts.  In that case, it’s evidently trying to do a task that’s not required of it, and ends up hacking away at the edges which is what gives you the horrible jaggy appearance.  (This is one case in which, actually, IE6 is less broken then its successors.  Too bad it will be nigh impossible to find a machine that uses IE6 anymore.)  The fix, then, is to turn off ClearType, which, conveniently, you can do using Microsoft’s browser filters.  In the above h1, you would change it to look like this:

I won’t go into detail about the what’s and why’s of this.  It’s a hack (as per usual) that exploits the fact that IE’s filters don’t use ClearType functionality to prevent possible other problems.  You can read more about the hack and download the source files at AllCreatives.net (including the 1×1 px hIEfix.png required for this to work).

The second problem has been dubbed FOUT (Flash Of Unstyled Text).  In WebKit (Safari & Chrome), text that is styled in custom fonts doesn’t actually load until the font loads.  Other browsers, most notably Firefox and Opera, load the fallback or a default font first, then the custom font when it downloads.  This is FOUT, and can be jarring to the user.  There’s a couple of best practices here and then some ideas on how to fight the FOUT.

FOUT best practices:

• Keep your fonts small.  Just like images, the smaller the font file size is, the faster it will load, and the less time the browser will take downloading it.  Tools like FontSquirrel’s font generator can actually reduce the size of the font, and if WOFFs become standardized, that will help out as well since they’re compressed.
• Load your fonts first.  Most browsers work on a first come-first served basis for all elements, so putting your fonts right up at the top will help get them loaded first.  If you’ve got your font declarations in your normal css file, load that first.  If they are in a separate css file (which isn’t a bad idea), load that.  A rule of thumb is to load your font right underneath the according to a presentation given by the guys at Unmatched Style, it decreases the load time for the font.
• Subset fonts.  Fonts often come with hundreds of different characters, including special characters, which you may or may not be using.  Off the top of my head, I can think of several fonts that have the same characters for upper- or lower case letters.  If you don’t need the extra characters, you can just not include them in your font and this will make the font size smaller.  This is another thing you can do with the FontSquirrel generator.

If all else fails and you still need some help with the FOUT issue, there’s a couple of hacks you can try.  Like the “smiley” @font-face declaration, these come from Mr. Paul Irish who writes about fighting FOUT.

The first thing you can do is preload your fonts.  This is similar to the method of preloading images that display on a hover event where you use a display: none; or a visibility: hidden; or push it all the way off the screen somewhere in, like, left: -999em;.  Let’s say you’ve got two fonts you’re using on your site:

We’ll create some CSS styles to call those like this:

Now, in the actual body of the page, we’ll preload those fonts:

Personally, I think the .allfonts class is overkill if you’re calling both of them individually anyway, especially given that that’s targeting WebKit and WebKit isn’t our problem.  IE will download the fonts when they are declared, so this doesn’t affect IE at all.  Also, one thing you should be aware of if you decide to use this method is that it won’t validate, if that matters to you.

The other option is to target Firefox directly with this javascript which asks Firefox to act like WebKit, e.g. don’t load the text until the font has loaded.  For really slow-loading pages, there’s a 3-second fallback so people aren’t waiting forever for pages that take a really long time to load.  To do that, you will put this in your <head>:

This isn’t going to absolutely fix the problem either.  All of these are just ways to try to avoid the FOUT issue and none of them are foolproof, but they can help.

Alternate methods

There are some other methods for calling custom fonts.  One that I mentioned at the beginning is Cufón.  With Cufón, you must have, or link to, the source javascript, so the first part is to either their generator (or FontSquirrel’s generator).  When you have both files, you’ll call them in  your like this:

As you can probably guess, Cufón works by substituting its font in a given class (h1 in the above example).  If you want to use multiple fonts, you can do that with this:

It’s a little clumsy compared to @font-face and some of the other alternate methods, but if you’ve used sIFR (and by used, I mean embedded by hand, not just used a WordPress plugin), it’s probably pretty familiar.

Typekit has a bit of a roundabout method mostly to maintain control over commercial fonts and to make sure that only the font that was selected from the site and registered to you for use on the site you’ve registered with Typekit will display.  For the most part, though, it’s just two lines of javascript and a CSS class you set on the site; so, similar to what we’ve been doing already.  There are a few other companies, like Extensis with WebINK, that are jumping into the webfont market that handle it similarly.  In any case where you’re using a service, you’ll more than likely be using a javascript to contact the service and retrieve the font.

As of May 19, 2010, Google has launched their own webfont service and, for what it’s worth, it seems really promising so far.  They are using open and Creative Commons-licensed fonts and have an easy to use font directory (with only a handful of fonts right now — hopefully this will grow as time goes on).  When you find the font you want to use, you just need to click “Get the code” and voila there’s your source, which, in this case, is an externally hosted stylesheet like this:

Then you just need to call the font normally in your CSS.

The Google Webfont API also includes a webfont loader.  I haven’t played with this yet, but it appears to be similar to the preloader I mentioned earlier.  One interesting point to the webfont loader is that it’s written to allow fonts that are being loaded from other sources, not just Google.  It was co-written with Typekit, so of course Typekit can be called with the loader as well, like this:

Confused by all the options?  Here’s a comparison of FontSquirrel-generated fonts vs. Typekit vs. Google Webfonts.  This gives you a bit of an idea of how each font is rendered, and it’s all HTML/CSS so you can check this page in multiple browsers to compare browser compatibility.

And that’s pretty much it.  Before going, I should mention that FontSquirrel also has premade kits for a variety of different @font-face embeddable fonts, so it’s a good idea to see if the font you’re looking for already has a kit.  Also, some browsers don’t automatically bold or italicize some custom fonts so, like in print design, you need to declare the bold or italic variation separately.  There’s more discussion on that, if you’re interested, at the end of the Unmatched Style @font-face presentation.  Thanks for reading this far — I tried to make this as comprehensive a post as I could so if you know of any tips, tricks, hacks or other sources, let me know in the comments!

Chris Reynolds is one half of Arcane Palette. He has a personal blog, jazzsequence, where he writes about music, technology and social media and shares links, videos, and posts various personal music and writing projects.

When I got access to the WordPress backend and found that, rather than building a new theme, the previous designers just added styles to the WordPress Default theme, I figured just how right I was to just take what they did and make it better.  They also controlled the layout via tables and built no custom page templates, all of which told me that they didn’t understand the possibilities and/or were not very skilled WordPress designers or they were just really lazy.

One of the first things I noticed on the site was that there was a lot of graphics that were mostly text.  Search engines can’t read images, so this text – much of it was the sort of keywords that would be valuable for search engines to crawl – was useless (at least from a search engine standpoint).  In addition, said text was, in many cases, jaggy and ugly.  My question: why bother making text into an image if it doesn’t look smooth and clean?  Either use a unique font you can’t get with available web fonts and make it look nice, or just use regular text.  So the first step was taking several graphics like this and removing all the text, and then adding the text to the code and styling it with CSS.  To get a more unique and attractive look (i.e. to make it look more visual and like the graphic it was replacing) I added subtle text-shadows and styled the font using @font-face.

There was also one of those Flash slideshows as a major feature of the home page.  You know, the Flash slideshows with an image and some text.  None of it is interactive; you can’t click on anything to link to a page or anything, and those images, too, had text buried in them that would be relevant for search engines, using the sorts of phrases that I would expect users to actually use in search queries.   My next question: why use a Flash slideshow when you could have the exact same effect, and make the text searchable, by using available javascript-based technologies like AJAX?  The next task, then, was to find some jQuery slideshow script similar to Dynamic Content Gallery or Featured Content Gallery.  In fact, since it was WordPress, I considered building one of those into the theme and using a redirect to point them all to the same page, but ultimately, this would be a bit of a lame hack and I found a better solution.

First, I found a simple jQuery image slide show that I could customize the code for (demo here).  Like Featured/Dynamic Content Gallery and a multitude of other slideshows like them, there was a caption that would rise up from the bottom and then slide back down when the image transitioned.  But up and down didn’t really work for the layout I was using.  I really needed it to either be there all the time (like it would be if it were a static image in a Flash slideshow) or come in from the right side.  Here’s the relevant javascript code:

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

And…

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300,() {

//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

The above lines of code control the captions displaying/hiding, the height of said caption area, opacity, etc.  In both cases, I replaced “bottom” with “right” just to see what happened.  What happened was the text didn’t slide at all – it just stayed there until the next slide – precisely what I really wanted to do anyway.  Some styling with @font-face for the captions and, voila, a working alternative to the Flash slideshow.

See the final product here: The Art of Eyebrows

Chris Reynolds is one half of Arcane Palette. He has a personal blog, jazzsequence, where he writes about music, technology and social media and shares links, videos, and posts various personal music and writing projects.

If you haven’t upgraded your WordPress blog to 2.9 (actually 2.9.1 as of the time of this writing), you should.  With the 2.9 update, the people at WP have implemented a feature that I’ve been pining for for some time.  The only problem is it’s not where you’d think it might be.

If you do regularly keep up on your WP updates whenever you get an alert that there’s a new version, you probably saw the option to upgrade your plugins when you upgraded to 2.9.1.  But I know a lot of people (myself included) often let updates slide, and while I did run out and upgrade to 2.9, I hunted for the upgrade-all-the-plugins-at-once button and didn’t find it.  If you’re like me, this post is for you, and here’s what you do.

First off, upgrade if you haven’t already.  WordPress has made it easy to do an automatic upgrade since the 2.7 release, so all you need to do (in most cases) is click a button and WordPress does the work for you.  But what if you are at 2.9+ and you have a little red icon next to your plugins menu on the sidebar, and you want to take care of all of those at once?  It’s not in the Plugins page — which is where I assumed it would be — despite the fact that you can filter your plugins by those needing to be updated.  Instead, you’ll need to head to the Upgrade page in the Tools menu, a place that normally you wouldn’t go for anything other than upgrading WordPress.

Once you’re on the Upgrade screen, everything should make sense.  If you need to upgrade your WordPress version, you’ll have an option to do that, and if you need to upgrade any of your plugins, they will be listed underneath with checkboxes next to each one, and an option to select all. After you click on the Upgrade Plugins button, it’ll go through each one, and tell you at every point what’s going on.

…and that’s it.  WordPress will tell you when it’s done, and the whole process should be pretty quick.

Fixing problems

What it’s doing is temporarily dropping your site into maintenance mode while it does the work.  This takes down your site for a few minutes and displays a message that says “Briefly unavailable for scheduled maintenance. Check back in a minute” (it looks like this).  It should really only take a few minutes and as soon as it’s done it will come back up.  However, if there’s a problem on your server and the script stops, it means your site is locked in maintenance mode, and even you can’t get in.

Luckily, this is relatively easy to fix.  When WordPress goes into maintenance mode, it creates a temporary file in your site’s “root” folder (the folder on the server that your WordPress installation is located that contains the wp-admin, wp-content, and wp-includes folders) called .maintenance.  All you need to do if your site gets stuck in maintenance mode is to delete the .maintenance file.  This may require connecting via FTP or going to your webhost and accessing a File Browser-like GUI that displays a list of files in your installation.  Once you’re looking at the files in your WordPress install, it should be easy to spot the .maintenance file and delete it.  Once that’s done, you’re back in business (although you may want to try upgrading that plugin individually from the Manage Plugins page, or manually by uploading a newer version to your server).

Saves time

Being someone who maintains multiple WordPress sites and has to periodically upgrade all of them when there’s an update available, this feature is invaluable to me.  It’s so much faster and easier to go to one screen on each site I need to update, and upgrade both the version of WordPress and all the plugins more or less at the same time, and then move on to the next site.  Even if you only have one blog, this takes a lot of the hassle out of having to do periodic plugin updates.  It’s something that a lot of us have been asking for since Automattic added in the automatic upgrade feature, and I’m glad they finally added it in.

Questions?  Comments?  We’d love to hear from you!  Let us know if this post helped you out!

a few months ago, smashing magazine posted an article called Quality-Price-Ratio in Web Design (Pricing Design Work).  i’m not going to recap the article, you can go over there and read it yourself if you’re interested — it’s a good read both, i think, for designers as well as people trying to shop for good designers.  there were two main points of the article: 1) price and quality do not necessarily go hand-in-hand, and 2) generally speaking, you get what you pay for.

the article posed a solution for designers for pricing their work, a formula.  yes, there are lots of pricing  your work formulas out there, but this one has a lot of room for variation depending on how much you value  your own work.  the formula goes like this:

price = creativity coefficient x cost of doing business

cost of doing business is obvious — it’s what most of these calculators are for.  but what, you ask, is the creativity coefficient?  it’s the amount by which you determine the value of your services.  anyone can come up with an estimate based roughly on the cost of doing business — the variation comes when you’re trying to figure out how much to add to that so that you can actually make money doing design.  if you’re just making ends meet to pay the bills, you’re probably in the wrong industry.  the so-called creativity coefficient includes difficulty of the project, your company’s brand strength, and your style or individuality.  there is no 1-10 scale, it’s all left open-ended and depending on  how you value your own services, a project could be valued at $100 or $10,000, it all depends on the numbers you plug in.

so i made a spreadsheet with formulas to come up with a couple different quotes based on different sets of variables as a way to get an idea how to price each project.  the reason i like a range is because another factor is the audience — who you’re proposing this quote for and what they’re expectations are.  certainly you could give them a high bid and if they walk away, well, that’s their loss, but we don’t typically work that way.  and anyway, we’re just getting started and don’t have heavy brand strength or traffic yet.

because i’ve used this a few times, i thought it would be useful for other designers, or for people shopping for design to get an idea of how our pricing systems may work.  so i’m offering up my version of the designer’s cost calculator.

how it works

the first thing you do is plug in your expenses.  for designers this is your cost of doing business, and if you work from home, you can include things like a percentage of your mortgage or rent for the space you use as your office, internet service, software and hardware upgrades, etc.  basically, all that stuff that you should be itemizing on your taxes that help you run your business.  that creates your operating cost.  i then break down the operating cost to cost-per-day, which divides your monthly expenses by 25 (for 25 business days in a month).  then my formula branches out — i have a set of numbers based on 8-hour days, and a set of numbers that divides your daily operating cost by 24 (for instance, if you’re including things like electricity bills or other expenses that are an always-on sort of thing).  i also have a place to enter your hourly rate for comparison.

that’s all the setup.  so you have a project, what do you do?  first, figure out approximately how long it will take.  i break this down in days and hours.  then you plug in the difficulty, brand strength, and individuality variables of the creativity coefficient. and that’s it.  now you have a range of quotes based on different variables.  i have a quote based solely on number of hours x hourly rate (and does not take into account the creativity coefficient), one that is based on the 8 hour operating cost, one that is based on the 24 hour operating cost, and one that is based on the daily operating cost.  then i take a median of all four and offer that up as well.

it’s a bit of overkill, but it can be tweaked and customized, and i like having options.  and that’s why i’m offering it up.  you can take it and do whatever you want with it, change the formula, hard code your creativity coefficient, whatever.  it’s yours.

the zip file contains 3 versions for different formats; xlsx for office 2007, xls for all other versions of office, and ods for OpenOffice.org and other open office projects.

download designer cost calculator 27.3 kB
downloaded 283 times

First, a little setting: this will work in any <input> box — that is a box that you type into.  So a search box, email submission form, whatever.  Also, you will need to edit code.  I am going to use WordPress as an example, and I am going to use the search box, but this can be applied to any input box once you know the basics.  Ready?  Here we go:

Find the default search form (searchform.php).  If your theme doesn’t have one, you can make one by copying searchform.php from the WordPress Default theme (or, really, any WP theme).  The searchform.php just handles the actual search box itself, so you’re not likely to mess anything up.  Once you have it, open searchform.php in your favorite text editor, HTML editor, or the Theme Editor in the WordPress admin.  You’ll probably see something like this:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

That’s your search form.  To make text display in the input box (which is where you type stuff), replace this line:

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />

with this:

<input type="text" value="Search this website..." name="s" id="s" onfocus="if (this.value == 'Search this website...')
{this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

If you want, you can change the “Search this website…” to be whatever text you want, but make sure you change it everywhere.  What it’s doing is a simple if statement that is triggered when you click inside the box (onfocus) or somewhere else (onblur): if the text in the box says “Search this website…” change the text to ” ” (i.e. nothing).  if the text in the box is ” ” (i.e. nothing), change it to “Search this website…”  Easy.  And now you can get rid of this part entirely:

<label for="s"><?php _e('Search for:'); ?></label>

thereby saving space.  Handy, and also visually interesting.  Also, as I said, no external javascript files to upload, and can be applied just about anywhere, once you get the hang of it.

If you liked this post, feel free to share with one of the links below, or follow our RSS feed.  Also, we’re on Twitter, and you can follow us there.  Thanks!

Kitchen Sink, you say? Surely you jest

Nope, it’s legit, and it’s not my wording, either (I wish it was, because, after you know what it refers to, it’s brilliant).

The Kitchen Sink is a second row of  buttons from the Post/Page Editor in WordPress that adds additional formatting and style functions that you may not use everyday (but once you know they’re there, maybe you will!) or perform specific and unique tasks that the normal bar doesn’t.  I’m going to take a minute to go through each one, and by the end of this, if you were previously unaware of the Kitchen Sink you will be thanking me profusely.  Trust me.

So here’s the standard WordPress toolbar that you see when you’re writing a post.  You may have some other stuff in there, for example, if you use the cforms Contact Form, there will be a cforms button at the end.  The last button on the right (assuming you don’t have some other plugin that adds buttons to your standard toolbar) is the Show/Hide Kitchen Sink button.  It’s the one that kind of looks like a color palette.  What it’s actually trying to represent is the actual toolbar with all the different buttons and the 2 row toolbar with the Kitchen Sink turned on.  Click that button and you get this:

Ta-daa! It’s so-named because this turns on “everything but the kitchen sink.”  (Actually, that’s a tad misleading.  WordPress uses a modified version of the TinyMCE WYSIWYG — that’s What-You-See-Is-What-You-Get — editor, and TinyMCE has a lot more options than those two rows offer.  If you wanted to enable all of them, you may be interested in the Advanced TinyMCE Editor which adds more buttons than the Kitchen Sink does.)

Everything but the kitchen sink…

So what does all this stuff do?

Style
Starting at the left, the first button is really a drop-down menu which allows for different types of content.  Each one specifically references a particular HTML tag — not that you necessarily need to know that, but if you do know some HTML, it helps keep things in perspective. Paragraph is normal type like what this is right now (in HTML written like <p>some text goes here</p>).

Address is something that, in all my years designing, I’ve never, ever used.  Presumably it’s in italics and, um, used for addresses.  Seriously, if you have a clue when/why I would use <address>, please let me know…

Preformatted is good when you want to paste some code into your post, or, otherwise, want to use something without any kind of styling or formatting.  Preformatted uses a generic, monospace font, and does not wrap at the end of lines, so if it’s a really long block of code, you may want to insert some line breaks (<br /> for the code monkeys) so you don’t have type going off the page.

The next several items are the different types of headings.  These refer to H1, H2, H3, etc, in HTML.  Anyone who’s done research about SEO knows that you should always have at least one H1 on your page, but more than that may hurt rather than help things.  Also, your theme probably has specific styles for at least H1-H3 (and maybe beyond), and in general, Heading 1 is probably going to be too large to be useful.  The others, however, are very useful.  For instance, post titles are often H2′s or H3′s, so if you wanted headings in your post that were consistent with the look of the site, you could use those.

Underline
This button underlines your text.  Since most people use bold or italic to emphasize things on web pages, and since underlines often imply links, you don’t see much underlining on the web, so this button gets relegated to the Kitchen Sink.

Justify
This button justifies text.

I imagine this might be useful if you had a large block of text in a quote or that was otherwise offset from the rest of the content.  This particular block of text is justified and contained within a quote (the ” button).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque nisi, imperdiet nec cursus ut, feugiat volutpat est. Praesent eleifend, orci consequat iaculis sollicitudin, dolor mauris placerat lacus, et congue turpis odio at neque. Mauris nec blandit lacus. Suspendisse cursus augue id enim suscipit scelerisque. Proin at imperdiet nulla. Vestibulum congue auctor eros, vitae lobortis mi auctor fermentum. Etiam varius aliquam bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at libero erat. Praesent sed sapien neque, at molestie orci. In dolor tortor, tincidunt at elementum quis, tristique et metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec ligula mauris, hendrerit a vestibulum a, suscipit ac nunc. Maecenas placerat gravida purus, at placerat augue iaculis sit amet.

(note: this is going to be hard to really see on our site since we justify all our text anyway…)

Font Color
The next button is another dropdown menu which expands to let you choose font colors.  This is helpful if you want to highlight particular bits of text, or otherwise spend hours making your posts resemble a circus tent.  There’s also the More Colors buttons which gives you even more choices for color.

You can choose colors from the full range of possibilities.

You can choose colors from different color palettes.

Or you can choose from a set of unique color names that correspond to specific web colors.

Paste from…
The next two buttons are quite possibly the most handy.  A lot of people compose their posts in Microsoft Word or some other word processing program and paste it into their blog.  Or, possibly even just Notepad or some other plain text editor.  In either case, you get weird things happening if you just copy and paste with spacing and line breaks, and, sometimes, entire blocks of text will disappear or be formatted in a completely bizarre and totally un-correctable ways (without flipping to the HTML view and knowing how to chop the code up and what code to chop up).  These buttons are the solution and if you learn nothing else from this post, at least use the Kitchen Sink for these.

The reason why the code gets all weird (especially from Word) is because other applications add their own “markup” or code to their documents which control things like font, text size, color, line spacing, etc.  When you copy text from Word, you also copy the hidden markup, so when you paste, you paste it with those properties.  TinyMCE, as well as most WYSIWYG editors, also adds its’ own markup, although my experience has been that it’s kept fairly minimal in TinyMCE/WordPress.  However, when the two things combine they can often cause unwanted and undesirable effects.  That’s where these buttons come in.  The one with the clipboard and the T on top is for pasting text that was composed in Microsoft Notepad or another plain text editor.  The one with the W on top is for pasting from Word.  Pasting into the window that these guys bring up rips out all the useless markup that you don’t care about, but keeps the stuff that you do (like bullets and lists, bold, italics, and underlines, and indents or blockquotes).  Thus giving you a safe place to paste your copy without fear of making something (or everything) go horribly awry.

Remove Formatting
I’ll be honest, I’ve never used this one.  However, after hovering over it to find out what it does (“Remove formatting”), I might start.  This button pulls out any weird formatting stuff that you may get because either TinyMCE didn’t close its’ tags when it should have or you accidentally pasted from Word instead of using the “Paste from Word” button.  If you’ve ever had some weird formatting thing you set linger past where you wanted it to go and couldn’t get rid of it, you’ll know how useful this button could be.

Insert Embedded Media
This button lets you embed objects; so like Flash/Shockwave stuff, or Quicktime/Windows Media/Real Media videos.  Not the sort of thing that you’d copy the embed code from YouTube and paste it into your post, rather, the sort of thing where, if you knew were someone’s Quicktime .mov file was (or you had your own) and you wanted to share, you could paste the URL to the movie into this box and easily embed it without having to deal with messy embed codes that may or may not work (if you’ve ever tried to embed stuff on your own, especially in WordPress, you know what I’m talking about).

Insert Custom Character
If you saw my post last week about bullet points and wondered how I got the • and » it was from this handy tool.  Most fonts have special characters above and beyond the alphanumeric characters you see on the keyboard.  In word processing applications you can get to these by memorizing any number of crazy keyboard combinations like CTRL + SHIFT + 1 + \ or you can use (on Windows) the Character Map application, usually buried somewhere in Accessories or Accessibility (and I know there’s a Mac equivalent, I just don’t know what).  On the web we use crazy alphanumeric codes for those characters.  something like &copy; is easy to remember for a © but if there was ever an occasion that I’d want to use, say ◊, I’d have to know that that is called a “lozenge” and can be called by &loz;.  Oh, and I’d need to flip to HTML view to do it anyway.  This tool gives you a handy little window that you can see all the different characters you have at your disposal.

Indent
This button will indent a block of text, what we in the web design biz call a <blockquote>.  To end your indented text/blockquote, you just need to click the one on the left with the ← arrow.

This is some indented text.

I like indents so much, I’ll use them some more.

Look, I’m like e.e. cummings!

Okay, maybe I’m not.

Undo/Redo
So everyone knows that you can use CTRL+Z to undo something in WordPress, right?  What, you don’t?  Well this button is here for you.  Personally, I always prefer keyboard shortcuts to buttons, but not everyone knows that CTRL+Z = undo, CTRL+Y = redo, CTRL+C = copy, CTRL+X = cut, CTRL+V = paste, etc, etc.  But then again, I just told you, so now you do.

Help
In case this post isn’t informative enough, you can click on the Help button.  It doesn’t specifically get into each button, but it does have a whole lot of other information about how to use the “rich text editor” and what some of the hotkeys are.

So there you go.  Now that you know what everything does, you can start to use WordPress in a whole new way, right?

You’re welcome.

The problem

To understand the problem, first you need to have a brief lesson in WordPress (and probably HTML in general) structure.  What we commonly refer to as bullet points when talking about a PowerPoint presentation, or an outline, or a Word document, is known as a “list-item” (<li>) in geekspeak.  List items come in two flavors: unordered lists (bullet points, <ul>), and ordered lists (numbered lists, <ol>).

In web design, lists have far-reaching usefulness, above and beyond just a list of stuff that you’d put in your slideshow or report.  <ul>’s are used for sidebars, drop-down menus, links, pretty much any instance in which there is a series of several of the same kind of thing.  The problem, then, is that a lot of those things (say, sidebars, for instance) aren’t the type of thing that you would want to slap a • in front of.  This is resolved by putting this into the stylesheet:

li {
list-style-type: none;
}

Now you can have a sidebar and not have a bullet in front of every box in the sidebar, and every item within each box.

So what happens if you want bullets or numbered lists?  Because, as a side effect of declaring that all lists have “none” for their “list-style-type” you’re applying that declaration for list items that may want the bullets, like in a post.

The thing that I’ve noticed is that this is especially (and somewhat unnecessarily) prevalent in WordPress themes.  It doesn’t have to be this way.  You could just say something like:

.sidebar li {
list-style-type: none;
}

and not have it affect all the lists known to man (or at least known to your site).  But a lot of WordPress themes are based, to one degree or other, on one theme: the Kubrick theme that is the WordPress default theme.  Among other things, Kubrick has this in the style.css:

html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

What Kubrick does is replace the standard bullet points with » which is written in CSS as:

.entry ul li:before, #sidebar ul ul li:before {
content: "\00BB \0020"
}

What I’ve noticed, though, is that a lot of theme designers will take this out, not wanting the » in front of all bulleted lists, and either leave it out completely or replace it with “content: none;”.

How to fix it

Well the easy solution to fix it is to search for “.entry ul” (CTRL + F to find specific phrases is your friend), and see if you can find the “list-style: none” or “list-style-type: none” in there.  If it is, then you can just delete that line, or, if you’re afraid of breaking things you can’t fix later, comment it out like this:

/* list-style: none;*/

If you can’t find it anywhere, or don’t want to modify the original code, you can use this method which will recreate the standard bullets down to three levels (you can smack this at the very bottom of your stylesheet, not touch any other code, and everything will still be hunky dory):

html>body .entry li {
list-style-type: disc; /* this starts with the standard bullet point for all <li>'s */
}
html>body .entry ol li {
list-style-type: decimal; /* for ordered lists, use a number */
}
html>body .entry ol ol li {
list-style-type: upper-roman; /* for the second level of ordered lists, use uppercase roman numerals */
}
html>body .entry ol ol ol li { /* for the third level of ol's, use lowercase roman numerals */
list-style-type: lower-roman;
}
html>body .entry ol ul li {
list-style-type: disc; /* for an unordered list inside an ordered list, use a bullet */
padding-left: 10px; /* and give it a bit more room than the others */
}
html>body .entry ul {
margin-left: 0px;
padding: 0 0 0 30px;
list-style-type: disc; /* for regular unordered lists, we use bullets */
padding-left: 10px;

}
html>body .entry ul ul li {
list-style-type: circle; /* for the second level, we use an open circle */
}
html>body .entry ul ul ul li {
list-style-type: square; /* for the third level, we use a square */
}

This also makes it so that anything beyond 3 levels (that’s not an ordered list) will default to a regular bullet point.

Isn’t this overkill?

Well, yes, since as I established, if you can find the line that is taking the bullet points out of post entries, it’s a whole lot of code vs. one line.  HOWEVER, if, say, you wanted your default bullets to be something other than a disc, say a square, you can use this code and swap around the options.  W3CSchools.com has an excellent document that talks about all the options you can use for the “list-style-type” property.

Alternately, you can use an image that you define, rather than the default circle, square, roman numeral, decimal, etc.  Using this:

list-style-image: url('path.to.your/image.gif')

instead of this:

list-style-type: square;

There’s also a W3Schools article on that, too.

so i thought that i would share with you how to add social linking to your website or blog.  please note that some of the code here will be wordpress-specific — which is great for wordpress users, but won’t be so helpful for those of you who don’t use wordpress.  i will point out the areas where the code is wordpress only — there are plenty of resources out there for alternatives for your platform of choice.

the icons

first thing’s first — let’s get some icons.  obviously the ones we are using have been customized.  i actually sort of cheated a bit and modified the grunged-up icons i used for the social sidebar i have on jazzsequence.com, because i thought the style would fit.  and also, i’m doing the same thing over there, so i figured i’d just use the same icons to make my life a bit easier.  so you can’t use mine, but there’s some really nice stuff out there — i used a pack i found on iconspedia, but there’s always some good stuff on smashing magaine among other sources.  do some creative googling and you can find some awesome packs with the sites you want to share.

the template files

next, is tweaking the template files.  if you’ve never even looked at your theme’s php files, this can be daunting at first.  and if you don’t have at least some brief experience in html, this may not be for you (but it might, you never know until you give it a try and break something horribly! keep backups of everything!).  in that case, i’d recommend the sociable plugin, which actually allows you to take the icons you just downloaded and put them somewhere on your server and then just enter the path to the folder that you uploaded them to.  you get less customizability in how and where your social linking bookmarks go on the page, but you make up for that in choice and convenience (there’s something like 99 different sharing methods to choose from that sociable offers).

if you’re still with me, decide what pages you want your links to show up on.  for the arcane palette site, i chose to just put them on the single post page, but you can put them on all your pages, blog, and single posts, as well as any custom templates you may be using.  there are two ways of editing the code.  in either case, it’s best to save a backup copy of all the files you’re going to be changing in case something breaks or you want to put it back.  the first method is to do it directly from the wordpress backend.  this is a little bit more sketchy for newbies just because you are making changes live on the site.  however, if you saved a copy of the file before making any changes to it, then you should be fine.

so to get to the internal text editor, (assuming you have wordpress 2.7 or higher) you go to Appearance and then Editor (for older versions it’s in Design and then Editor, or possibly Theme Editor — it’s been a while since I’ve dug around in the older back end).  on the right side, you will see a long list of files.  these are all the various page templates on your site.  the ones you want to concern yourself with are index.php (Main Index Template), page.php (Page Template), and single.php (Single Post).  if you’re using a Revolution/StudioPress theme, or one that is built similar, you may have a home.php which is your Home Page Template.

some of this, if you aren’t familiar with how your theme is structured, is going to be a bit of trial and error, but pretty much I look for one of two things in the template: either the Edit This Post link (which will look something like this:

<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

or the metatag portion of the post, generally classed as postmeta or something similar, which would be something like this:

<p>
<small><?php the_category(', ') ?> | <?php the_tags() ?></small>
</p>

you may also see something like this if your theme is either the default (kubrick) theme, or based somewhat on it:

This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime);
echo ' ago'; */ ?>
on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?>
feed.

for our site, i put it under the post meta (categories/tags) but above the related posts.  interesting side note: if you’re using this method of displaying related posts without a plugin, i was having issues with the tweet this link posting the url of the last related post in the tweet, rather than the post you are looking at if you put this sharing block underneath the related posts.  seemed to be a bug with the related posts not closing off, but i’m not a programmer, i’m just a hacker, so i just threw this block above those links and solved the problem.

the code

here’s the block of code i used:

<span class="linktous">
<a href="javascript:var notes='';if(window.getSelection)notes=window.getSelection();else
if(document.getSelection)notes=document.getSelection();else if(document.selection)notes=
document.selection.createRange().text;if(notes.length>350)notes=notes.substring(0,349);
location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent(location.href)+
'&title='+encodeURIComponent(document.title)+'&bodytext='+encodeURIComponent(notes)"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" alt="Digg
This" />&nbsp;Digg This Post</a>&nbsp;|&nbsp;<a href="javascript:(function(){location.
href='http://delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title=
'+encodeURIComponent(document.title)+'&v=5&jump=yes'})()" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/delicious.png" alt="Save to del.icio.us" />&nbsp;Save
to del.icio.us</a>&nbsp;|&nbsp;<a href="javascript:var d=document,f='http://www.facebook.
com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1239647138&u='+e(l.href)+
'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);
share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer',
'toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test
(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/facebook.png" alt="Share on Facebook" />&nbsp;Share
on Facebook</a>&nbsp;|&nbsp;<a href="http://twitter.com/home?status=Check this out: <?php
the_title(); ?> <?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>" target="_blank"><img
src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Send this page to Twitter"
/>&nbsp;Tweet This</a>&nbsp;|&nbsp;<a href="<?php bloginfo('rss_url'); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" />&nbsp;
Subscribe by RSS</a>
</span>

that’s a big mess of code in several different languages, so i’ll break it down so you can see what each thing is doing.  also, this assumes that you’ve uploaded your images to the /images folder in your theme and that you are using the same links i am, namely: digg, delicious, facebook, twitter, and for kicks, rss.  i’ll post the code for stumbleupon as well at the end.

span

<span class="linktous">

<a href="javascript:var notes='';if(window.getSelection)notes=window.getSelection();else
if(document.getSelection)notes=document.getSelection();else if(document.selection)notes=
document.selection.createRange().text;if(notes.length>350)notes=notes.substring(0,349);
location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent(location.href)+
'&title='+encodeURIComponent(document.title)+'&bodytext='+encodeURIComponent(notes)"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" alt="Digg
This" />&nbsp;Digg This Post</a>&nbsp;

|&nbsp;<a href="javascript:(function(){location.
href='http://delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title=
'+encodeURIComponent(document.title)+'&v=5&jump=yes'})()" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/delicious.png" alt="Save to del.icio.us" />&nbsp;Save
to del.icio.us</a>&nbsp;

|&nbsp;<a href="javascript:var d=document,f='http://www.facebook.
com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1239647138&u='+e(l.href)+
'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);
share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer',
'toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test
(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/facebook.png" alt="Share on Facebook" />&nbsp;Share
on Facebook</a>&nbsp;

|&nbsp;<a href="http://twitter.com/home?status=Check this out: <?php
the_title(); ?> <?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>" target="_blank"><img
src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Send this page to Twitter"
/>&nbsp;Tweet This</a>&nbsp;

http://yourblog.com/?p=123

http://iboughtamac.com/s/1352

<?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>

http://www.arcanepalette.com/?p=455

|&nbsp;<a href="<?php bloginfo('rss_url'); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" />&nbsp;
Subscribe by RSS</a>
</span>

.linktous img{margin-bottom: -3px;}

http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

|&nbsp;<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/stumbleupon.png" alt="Stumble This" />
&nbsp;Stumble This</a>

<span style="margin-left: -.2em">&nbsp;</span>

now you can put that snippet where the space would go in the myemail @ mydomain . com example.  what it does is substitute your space with &nbsp; (which is ascii code for a space character), and then hides what it did with the margin-left: -.2em.  the final result would be this:

myemail<span style="margin-left: -.2em">&nbsp;</span>@<span style="margin-left: -.2em">&nbsp;
</span>mydomain<span style="margin-left: -.2em">&nbsp;</span>.<span style="margin-left: -.2em">
&nbsp;</span>com

and this is what it looks like:

myemail @ mydomain . com