CSS Archives

If you’re at all familiar with Shopify, you know that the one of it’s most inescapable flaws is that lack of ability to customize the check out pages. The lively discussion on the Shopify forum illustrates a lot of the opinions, and Shopify creator Tobias Lutke explains in a forum posting why the decision was made to limit the designers’ control of the checkout pages:

As the shopify veterans will be able to tell you we work on the checkout procedure constantly. Recently we eliminated an entire step from the process and added discount codes. We will move the checkout system into the themeable domain but not just yet. Once it is released as editable though we will not be able to change the checkout in any meaningful way.

Tobi later posted a compromising solution to allow Shopify designers to style the check out with CSS while not giving up control over structure or content. By allowing users to upload a customized checkout.css to the Shopify assets folder, designers now have complete control over the look and feel. Point Clinic, one of Bust Out Solutions’s first Shopify customers, got the checkout style treatment.

Before

After

If the title of this blog posting makes you cringe (as should anything with the words IE 5.5+, at least when it comes to web design), then check the TwinHelix solution. It exploits the non-standard implementation of CSS “behaviors” developed by Microsoft for the Internet Explorer browser. The fix is a simple, non-JavaScript solution for a nasty, annoying problem.

One of the most common web design techniques is to add small icons next to hypertext links to give the user some visual indication of what the link does. A common example is to put an envelope next to an email address. There are a few ways of doing this, and with a bit of attention to detail, you can achieve a very nice effect. Let’s look at the most basic way of doing this first:

   
   you@yourdomain.com

The result, without any style:

you@yourdomain.com

Clearly the text needs coloring. A slight tweak in the css give us a color palette that is a bit more pleasing and a simple rollover effect:

a:link, a:visited {
   color:#399DCF;
   text-decoration:underline;
}

a:hover, a:active {
   color:#333;
}

you@yourdomain.com

As you can see, the image and the text aren’t quite lined up vertically, and and in non-IE browsers it looks a bit sloppy with the underline extending underneath the icon. In order to correct these problems, let’s change the markup to remove the image tag and add a class to the anchor tag:

   you@yourdomain.com

The rest is handled by CSS. We give a little left padding to the link and fill that space with a background image that is vertically aligned in the center of the line.

a.email-link:link, a.email-link:visited {
   padding-left:18px;
   background:url(/images/email.gif) center left no-repeat;
   color:#399DCF;
   text-decoration:underline;
}

a.email-link:hover, a.email-link:active {
   color:#333;
}

We now have a clean rollover underline effect and a link with a clickable icon that is aligned properly.