• Home
• Don't Hire Us
• Portfolio
• Services
• Blog
• About Us
• Contact

Tutorials Entries ~

CSS3 Buttons with Icons

Tuesday, August 03, 2010 ~ 10:31 am

During the process of coding a web app we've been working on for a client, I decided that was time to go CSS3 with their buttons. After using the accessible CSS button technique for a while, it still felt really complicated and maintaining all those images was a pain if you had different sized buttons throughout your site.

So I started coding them up and realized that all the examples I had run across didn't …

Keep Reading

Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine

Friday, February 12, 2010 ~ 4:49 pm

I still remember the day I found the ImageSizer plugin from Lumis. "Holy crap, I can upload any file and this thing will crop it and resize it on the fly in multiple places throughout my whole ExpressionEngine site?" To say I was psyched would be an understatement.

We often use ImageSizer in conjunction with the FF Matrix FieldFrame field type to let users add as many images as they want with captions. Then we pull at the first one and give a link to …

Keep Reading

Creating a Tell-a-friend Pop-up Form with jQuery and ExpressionEngine

Thursday, December 10, 2009 ~ 5:59 pm

I recently had a reader ask about the pop-up contact forms and lightbox scripts we've used on some of our client sites - were they built into ExpressionEngine and how did we get them to work? Well the answer to the first question is generally no. EE lets you setup whatever js effects with whatever libraries you want. So can choose exactly how you use it. It really is a different way of thinking about putting together dynamic websites, especially if you're used to most of the other CMS's …

Keep Reading

Repeating Footer Background Image Scrolling Issue

Thursday, May 14, 2009 ~ 11:02 pm

One of our astute readers discovered a flaw in our footer design implementations recently and I thought I'd share it with you. Turns out that we have a penchant for using a background image repeating on a 100% wide footer. Also turns out that when you squash your browser window down to anything smaller than the content and then scroll over to the right that background image stops repeating! See what I mean here:

It's not a huge deal, but if you …

Keep Reading

Styling Right-To-Left Text with CSS on a Multi-Lingual Site

Friday, March 06, 2009 ~ 10:45 am

We recently had the pleasure of working with CD Baby creator Derek Sivers on a new project called MusicThoughts. It's a great collection of quotes from musicians on everything from the music industry to life in general. In short, pretty kick-awesome! Go check it out already!

This was a challenging project from start to finish. First of all, we couldn't modify the HTML at all, only the CSS. And second was the support for multiple languages. 10 to be exact! This had several …

Keep Reading

IE7 Bottom Border Bug on Text Links

Friday, February 27, 2009 ~ 12:03 am

I just found a simple solution to a bug in IE7 and wanted to share it. I hadn't run into this problem before, but apparently IE7 doesn't usually show a bottom-border attribute on text links. No reason, it just doesn't feel like it. Insert rant about Internet Explorer here if you wish, but I'm just here to provide solutions, baby.

So the answer comes from Xaxio at Qrystal Illusions:

display: inline-block; vertical-align: bottom; 

And that's all there …

Keep Reading

sIFR 3 Hard Drop Shadows

Friday, January 16, 2009 ~ 2:13 pm

I love sIFR, but man, their documentation is really difficult to figure out. There's multiple synatxes you can use and all kinds of hidden variables they just expect you to know. I'm just saying for us who don't live and breath Javascript, it could be a little easier right?

So I've been working on a site where I want to use the drop shadow as an effect to make the text look inset. Just a 1px white highlight on the bottom right. Problem is, the drop …

Keep Reading

How We Use ExpressionEngine: Templates and Global Variables

Tuesday, December 23, 2008 ~ 11:58 am

Continuing in our series of how we use ExpressionEngine, I thought it would be cool to show you the power and flexibility of the templates in conjunction with global variables.

One of the main reasons we started using EE was it's flexibility. Other CMS's make you cram your design into their pre-defined templates and make you dig around in huge PHP files. Not so with EE! We code every site from scratch by hand, first creating a static version …

Keep Reading

Top 10 Tips for Kick Awesome Web Application User Interface Design

Thursday, November 06, 2008 ~ 11:40 am

We've done our fair share of web app designs here, but often don't get to share them for NDA reasons or the simple fact that the developers are still working on them somewhere! No worries, fair reader. For we shall approach these diplomatically as to protect the innocent. Behold, the top 10 list of yore!

1. Text Text Text

Web apps are huge, complicated beasts, even if you try to keep them simple. …

Keep Reading

Making Accessible CSS Buttons Look Awesome

Thursday, October 30, 2008 ~ 10:21 am

Buttons. They're those little things that people really like to click and push. I personally think they're pretty important to help guide a user through the actions they need to perform. But I'll be the first to admit I've made my fair share of image buttons. Totally inaccessible; just an image with some alt text. Now depending on your site design and the type of site, that might be ok. For instance, if you're dealing with a simple marketing site that's kind of …

Keep Reading

Photoshop Tutorial - CBOO (What is that?!)

Thursday, October 30, 2008 ~ 10:13 am

You don’t know it yet, but you’re about to learn one of my favorite and most used Photoshop tricks. You’ve seen this everywhere but might not know it. It has, in some form or fashion, saved more lifeless photos than anything else. What is this awesomeness I speak of? I speak of the CBOO. But that’s Mr. CBOO to you.

No, I haven’t lost my mind. I just had to think of something to call “thing that I do.” CBOO stands for: Copy, Blur, Overlay, Opacity.

Here’s an example …

Keep Reading

Testing a Rails Application in IE in Parallels and in Leopard

Friday, October 03, 2008 ~ 9:28 am

We just wrapped up a kick-awesome web app design and I learned a ton of new stuff, so I'm going to be posting some new tutorials. Most of this can be found elsewhere, but it's usually in multiple places so I'm trying to consolidate it for you. Aren't I a champ (see awful picture)?

Yeah anyway, so since I was responsible for the integration of my HTML/CSS/Javascript into an already-in-progress Ruby on Rails application I knew I …

Keep Reading

Syncing Your Sent Mail on Your Computer and iPhone

Thursday, July 17, 2008 ~ 8:57 am

I’ve had my e-mail synced up between my iPhone and Mac for a while now, but for some reason I could never get my sent mail to sync. I mus have missed the boat on this one because it’s actually not that hard, and I’ve found that Leopard makes it less panic-inducing (I’ll explain later).

So when I knew I was getting an iPhone around last November, I went ahead and changed my 47m mail to an IMAP …

Keep Reading

Retro Photoshop Fun -  From Dull Digital Photo To Sweet Old School Album Cover

Wednesday, July 16, 2008 ~ 1:36 pm

I love having a digital camera, but it is definitely lacking in the vibe department. Old school film camera’s like the Holga and the Diana have a great feel to them, especially when they are cross processed. So I’m going to show you some ways to fake the funk and give your digital images a healthy dose of awesome sauce. (I’ve been listening to Fundamental Elements and I blame them for making me say things like “Fake the funk” and “awesome sauce.”)

Let’s start with a picture …

Keep Reading

A Non-Profit’s Guide to Websites

Wednesday, May 14, 2008 ~ 9:33 am

Non-profit organizations have a special place in our hearts here at FortySeven Media. We love it when people decide to change their world for the better, and do our best to help them however we can. Several months ago we completed the Knoxville Leadership Foundation's new website. Shortly there after Dan Myers, the Director of Communications and Operations at KLF, asked us to be part of a seminar for non-profit organizations to better equip them to use their websites. The following is a condensed version of that …

Keep Reading

Quick Screenshot Key Commands in Mac OS X

Wednesday, February 13, 2008 ~ 4:20 pm

Every designer knows that at some point during a project there will screenshots, and lots of them. Third party applications often get this job, but if you are a Mac user (10.3 and later), you have another option built right into the OS. That option comes in the form of key commands, and the key commands come in three flavors:

1. If you want a file saved to the desktop for later editing use Shift+Command(Apple)+3 for the whole screen and Shift+Command(Apple)+4 for a selection.

2. If you want a screenshot that …

Keep Reading

Encode Your Email Addresses in ExpressionEngine

Tuesday, February 12, 2008 ~ 5:23 pm

So here’s a quick tip for you ExpressionEngine users. EE will automatically encode any email addresses that are generated by itself. For example, when you leave a comment on this blog and put in your email address, EE will turn it into a mess of javascript nonsense in the code so that those nasty spiders don’t pick up your email and send you dirty emails.

Sometimes you’ve got to manually encode it, though and that’s where this quick tutorial comes in.

Ready? Here we go:

{encode="bob@bobby.com" title="Email Me!"}

…

Keep Reading

Auto Navigation Highlighting in ExpressionEngine

Wednesday, January 30, 2008 ~ 4:35 pm

We’ve been using this technique for a while now and it works great! We always take the most used parts of a site and put them in templates for easy access when putting together a site. But what happens when you want to highlight the navigation to show the user where they’re at? Enter this cool trick! And yes, you have to be using ExpressionEngine .

Alright, say this is your navigation code:

<ul>
  <li><a class="current" href="./">Home</a></li>
  <li><a href="dont_hire/">Don’t …

Keep Reading

Custom Webclip Icons for your iPhone or iPod Touch Home Screen

Wednesday, January 16, 2008 ~ 4:07 pm

So some of you may have heard about the iPhone, iPod Touch update yesterday that lets you add shortcuts on your home screen to webpages. My iPhone does a nice job of taking a screenshot of the page I’m on and making a pretty little icon that looks like my other icons on the home screen. But wait! I want my logo and not a tiny version of the whole page! Turns out it’s super simple …

Keep Reading

Making Your Footer Stay Put With CSS

Monday, January 14, 2008 ~ 10:50 pm

One problem I run into pretty frequently when coding a site in to XHTML and CSS is making my footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be a different color that the body background doesn’t stay at the bottom of the browser window. I can hear you say, “But why don’t you just do a fixed position on it. That’s easy enough.” True, but if you do that then it’s always at …

Keep Reading