In the midst of creating an online store, using the Prestashop e-commerce shopping cart, I ran into a little error while using Cufon (which generates fonts & renders them in the browser with JavaScript). Using Cufon, at it’s very basic level (of replacing text with graphics), was fairly simple to set up in a Prestashop theme. However, when I went to enable the :hover option for a replaced element, with the normal code structure, the e-commerce site would load a blank page.

Normal usage:

<script type="text/javascript">
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
	hover: true
});
 </script>

I struggled with finding a solution to this last night. I tried removing the line breaks around hover:true, adding quotes around different areas, deleting the brackets, but nothing worked. Then, this morning, I decided to google the problem, and within minutes, I found the solution in the Prestashop forums. It was an ah-ha moment, when I found the solution. It was so simple, yet nothing I would have tried on my own…

The Solution: Surround the JavaScript code with {literal} tags.

Like so:

<script type="text/javascript">
{literal}
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
	hover: true
});
{/literal}
 </script>

Are you tired of the posting delay when you use Facebook’s Blog/RSS import function? Sometimes it can be days or even weeks before Facebook will import your blog posts. Sure, there is a way to manually update your Facebook notes, but don’t you have enough things to do?

Thankfully, there is a Facebook application that you can use to import your blog posts where you determine how often it checks your blog for new posts. It is RSS Graffiti. I already did a tutorial on how to use RSS Graffiti for your business or organization Facebook page, but today I’ll show you how to use it for your personal profile. It is similar to using RSS Graffiti for your pages, but has less steps.

[*This may even be a solution for those of you who are getting the "The blog/rss url you entered is not valid. Please verify and try again." error when using the built-in Facebook Blog/RSS import function.]

Let’s get started…

Go to: http://apps.facebook.com/rssgraffiti/ [you will need to be logged in to Facebook]

Click on "Click here to grant this permission"

Click "Allow"

Click "Click here to allow publishing"

Click "Allow"

Click "Add feed"

Add your feed address in "Feed URL", a title for your feed in "Feed Name" and click "Save" - there are other options if you scroll down, but these are the only ones you need. By default, it will check your blog every 30 minutes for new posts and each post will include the title, a photo and an excerpt.

That’s it for setting up RSS Graffiti. However, if you were previously using the built-in Blog/RSS import, you will need to disable it. Otherwise, whenever the Facebook importer does decide to finally import your blog posts, you will have double blog posts on your profile. Maybe you’re okay with that, but your FB friends may not be as happy about it. So here’s how you disable the built-in FB importer:

Go to your Facebook profile & in the middle under where you add your status updates, click on "Options"

Click on "Settings"

Click on the "x" next to "Blog/RSS", and Voila! it's gone!

Do you have a Facebook page for your business or organization where you would like to have your blog posts automatically posted/imported? Fortunately, there is a simple solution, a Facebook app called RSS Graffiti.

There are a lot of options when using RSS Graffiti, but I’ll walk you through the basic set-up.

First, go to: http://www.facebook.com/RSS.Graffiti [you will need to be signed in to Facebook to follow the rest of the instructions]

Click on "Add to my Page"

A pop up window will appear, click "Add to Page" next to the page where you want to use the application.

If you have other pages, the pop up stays open & the page you added the application to disappears from the list. You can add the application to however many pages you want. When you are finished, click "Close".

Next, you need to go where you edit your pages. If you're unsure of how to get there, click on "Home" in the very top navigation to go to your Facebook home page. In the left sidebar under your picture, you'll see "Ads and Pages" click on it. If you have more than one page, you will have to select the page you are adding RSS Graffiti to, otherwise it will take you directly to the settings for your FB page.

This is what the edit/settings option looks like for your FB page. Scroll down until you find RSS Graffiti under the Applications section.

When you find RSS Graffiti, select "Edit".

You will be taken to a page that looks like this, select "Click here to authorize and continue"

Then, click "Click here to allow publishing"

Another pop up, choose "Allow"

Now that the permissions are set, it's time to add your feed address. Click on "Add feed"

Enter your feed address in the "Feed URL" & a title for your feed in "Feed Name" - The default settings will post your blog posts with title, excerpt & photo AND it will check your blog every 30 minutes for new posts. You can scroll down to edit these settings, like to change how often the app checks your blog for new blog posts, however the default settings are perfect for the average user. Once you have added the feed address, feed name and are happy with the settings, click "Save"

That’s it! Now, sit back, relax & let RSS Graffiti will do all the work for you!

Author Tina McAllister approached me about a one page site design for her book, Gina Agnes. I read Gina Agnes a year ago, so I was really excited to work with Tina on this project. Gina Agnes is the story of a girl who was found as a baby in a pew, at Saint Agnes Catholic Church, & is raised by three nuns & Father Gerard.

I used colors from the cover as a starting point & created a couple different layouts. For one of the designs, I illustrated a Catholic Church. For the other design, I created my first hand lettering design, inspired by the incredibly talented Jessica Hische. I drew both the Church illustration & the hand lettering with pencil & paper, and then I traced the designs in Illustrator.

Once Tina saw the hand lettered design, she immediately knew that it was the design for ginaagnes.com.

See the live site → ginaagnes.com

When author Tina McAllister approached me about a one-page design for her latest book, Woof! The Book, I jumped at the opportunity. Working with Tina McAllister is always a pleasure, as we seem to have very similar tastes in design. And when she said she wanted me to illustrate the main character for her book, I was over the moon!

Woof! The Book is the story of Vivi, a wife & mother, who has completely let herself go, until she discovers the world of Botox & other beauty treatments. In the book, Vivi gets a complete makeover from head to toe, so I needed to illustrate Vivi both “before” & “after”.

I started with designing the “after” illustration of Vivi. However, my first illustration turned out too young…

So, I started over. This time, I was much happier with Vivi’s “after” illustration, so I manipulated it to produce the “before” illustration.

However, Vivi’s “before” illustration wasn’t messy enough & her “after” was too simple, so some details were added to both illustrations…

Some stains were added to Vivi's pants & untied shoelaces to her tennis shoe.

Some bling was added to Vivi's shirt & a ring & bracelet to accessorize her outfit. Plus, her lip color was changed to match her blouse with some glossy highlights.

However, Vivi’s “before” illustration still looked too clean, and Vivi’s lips in the “after” needed a tad more gloss…

Once the “before” & “after” illustrations of Vivi were finalized, the rest of the single web page design came together very quickly…

See the live site → woof-thebook.com

Every now & then, I have the privilege of working with local {Kansas City} clientele. Although my KC clients are a fraction of my clientele, their projects are the most extensive. And Brady & Associates was my most extensive website project to date.

Brady & Associates has been providing staffing productivity benchmarking and variance resolution services to hospitals for more than 25 years. And {like me} the majority of their clients are not based here in Kansas City. With serving more than 600 hospitals across the U.S. and throughout Europe and the Middle East, Brady & Associates’ website is a fundamental representation of their business to current & prospective clients.

When Brady & Associates contacted me, they already had a website. Each page {of their old site} contained various elements that were pieced together; their site lacked a consistent flow. Their flash-based navigation was not optimized for SEO. The homepage featured a continuously scrolling list of hospitals served, which was created in Flash {with no SEO juice added} and was a distraction {since it did not give users the option to pause or slow the scrolling movement}. One of the rudimentary elements for branding was missing from the site: the Brady & Associates logo. And the site had no Content Management System, so a web developer was required to make any content changes. Needless to say, bradyinc.com was ready for a makeover {and a CMS}.

The brady & associates old homepage.

Our main objective was to create an overall professional design that flowed smoothly from page to page & could be updated by the client. After thoroughly examining several Content Management Systems, I concluded that SilverStripe was the best CMS for the Brady & Associates redesign. I was impressed with SilverStripe’s extensive list of built-in features and it could easily be customized to meet every objective and feature Brady & Associates wanted and needed.

The brady & associates logo has a retro-modern look.

The logo for Brady & Associates is a great retro-modern design and needed to be prominently displayed on the redesign. Brady & Associates still wanted animation on the homepage, but we did it smarter {with SEO juice} & more user-friendly. I dipped into Flash {for the first time} and created an animated presentation highlighting why Brady & Associates is the hospital benchmarking choice {with complimenting HTML}. In the sidebar, I added animated client testimonials, with fade transitions, using JavaScript {and the animation pauses when you hover over a testimonial}.

A members only area was created to capture leads and reward members {those who register} with insider information {a win-win for members & Brady & Associates}. HTML templates were created to mimic PDF resources for reading secure information within a web browser and to make them searchable within the site. A self-assessment questionnaire was created, which calculates the visitor’s answers and assesses their need for new benchmarks. A drop-down navigation was integrated that could dynamically be updated as content was added to or dropped from the site. And since the previous site had a lot of content in different places, redirects had to be created – so that search engines recognized the new content & visitors {using old links} would be directed to the new content.

As I mentioned earlier, there was a lot to the Brady & Associates website redesign, and those are just the highlights.

The redesigned brady & associates website.

See the live site → bradyinc.com

Marlon & Syreeta Smith needed a logo & blog design for their new venture: Covenant Keepers, Inc. Once we finished their logo design, it was time to move on → to the blog design. Marlon & Syreeta had a clear vision for their blog & already had the various sections laid out – from the different categories to the different pages. The couple wanted the blog to be called Marlon & Syreeta’s Blog, to give it that personal feeling. We all agreed that Thesis should be used as the basic framework for the site. Marlon picked his color {blue}, Syreeta picked her color {cranberry} & the design went from there.

Marlon & Syreeta’s Vision Statement: To encourage, educate and empower newlywed couples, engaged couples and those dating with Biblical principles and real-life strategies for experiencing healthy marriages with a 0% divorce rate.

In addition to the blog’s graphics & layout, we integrated social media, created custom questionnaires, installed google analytics, and set up email subscription to the blog’s feed. I also helped Marlon & Syreeta with adding content to their site & guided them through the basics of using WordPress.

See the live site → MarlonandSyreeta.com

What is a sticky post?

Essentially, it is a blog post that you stick to the top of your blog.

A blog is normally ordered by date, from the most recent blog post {at the top/beginning} to the oldest blog post {at the bottom/end}. A sticky post will be featured at the top of the blog {with the rest of your blog posts chronologically ordered below it}.

It is possible to have more than one sticky post at a time. If you have more than one sticky post, all sticky posts will be ordered by date {from most recent to oldest}, followed by the rest of your blog posts {in their normal dated order}.

Is it difficult to make a post sticky?

The good news for you WordPress users is that WP has built-in sticky-ness powers {you no longer need a plugin or custom code to get this feature)!

Before you follow the four simple steps I will show you in a moment, please make sure you have the most recent version of WordPress. At the time of this writing, the most recent version of WP is 2.9.2. You will know you have an outdated version if you have a message like this at the top of your WP dashboard:

The message reads "WordPress 2.9.2 is available! Please update now." (Click on this image to see a larger version.)

*For security reasons, you should always upgrade whenever there is a new version of WordPress. It is important you back-up your database before upgrading. If you need help with this, please contact me.

Here’s how to make a post sticky:

In the Publish area, click on "Edit" (in the Visibility line).

1. Check the box that says "Stick this post to the front page".
2. Click "OK".
3. Click on "Update Post".

That’s it! Your sticky post should now be displayed at the top of your blog. Any questions?

Note: For those of you with CSS skills, you can modify the look of the sticky posts by adding styles for .sticky {the class WordPress adds to sticky posts}.

I have wanted to add tutorials to my blog for some time now, and today I’m going to do just that. [Please bear with me, it is my first public tutorial.]

I’ve had a lot of requests lately for importing blog posts to Facebook pages and profiles. Today, I’m going to show you how to import your blog posts to your facebook notes.

On your profile page, click on "Options".

When you click on "Options", it is replaced by "Settings". Now click on "Settings".

Then click on "Blog/RSS".

Type in your rss feed address & click on "Import".

That's it! Now your blog posts will be imported to your Facebook Notes.

Facebook will automatically check your RSS feed & import new posts when they are published. It is important to note that sometimes there is a delay {sometimes even a few days} with Facebook actually checking and pulling in the content. If you notice this, you can just wait for Facebook to do it’s thing, or you can manually update the notes. Here’s how:

First, make sure you are on your profile page & follow the steps above to click on “Options” → “Settings” → “Blog/RSS” and then:

Click on "Update Now".

Before I wrap up this tutorial, there is one more thing I want to share with you. By default, when you set up to import blog posts to your Facebook Notes, it will automatically publish new posts to your wall {so they’ll show up in your friends’ news feeds}. However, since there can be a delay from when you publish your blog posts {on your blog} to when they appear in your FB {Facebook} Notes, I prefer to use RSS Grafitti to publish blog posts to FB pages and walls.

RSS Grafitti is an awesome FB application that you can easily set up to check your blog every 30 minutes. It will check your blog every 30 minutes {or whatever time range you select}, and publish your new blog posts to your wall or FB page.

Now, if you’re like me and choose to set up RSS Grafitti, each blog post will post twice to your wall {whenever FB gets around to updating your imported Notes}. If you don’t like the duplicate wall content, you can set FB Notes to not publish to your wall. Here’s how:

Click on "Account" and then "Application Settings".

Look for Notes in your list of applications. Click on the "Edit Settings" for Notes.

Click on the "Additional Permissions" tab. Click on the checkbox that is checked for "Publish Content to My Wall" (so make sure it is unchecked as pictured). Then click "Okay".

So there it is, my first official tutorial. Since I’m planning on adding more tutorials on various topics, I’d greatly appreciate your honest feedback. Afterall, I do want these to be helpful. Also, let me know if you prefer written tutorials {like this one} or video tutorials {with text/audio/both?}.

If, after reading this tutorial, you’d just rather donate to my coffee fund & have me set up your Blog→FB importing, you can contact me here. Thanks!

I have some catching up to do on my portfolio, so let’s get going…

Marlon & Syreeta Smith made the decision to go into business together. When the Smiths contacted me, they explicitly defined…

…their company: Covenant Keepers, Inc.

…their purpose: “To create a GLOBAL movement of positive and healthy relationships, with special focus on families because the family is the nucleus of a society’s well-being.”
{statement taken from their site}

…their goal: to eliminate divorce {0% divorce rate}

…their need: a logo & blog design

Any experienced designer, in the branding or web design field, will agree that the branding {logo} should be developed before the site design, so that’s what we did.

When I presented the first round of logo design visuals, Marlon & Syreeta deliberated & agreed they liked the use of a heart {in place of an “o” in Covenant} and the idea of interlocking rings {which were just basic interlocking circles at that time}. They wanted to explore the idea of making the circles look more like rings {and detailed to represent “his” & “hers”}. The challenge with the rings, was to keep them simple enough that they followed the basic guidelines for all logos {more on the basic guidelines later}. Therefore, I created rings with various degrees of detail & alternate viewpoints and integrated them into the logo. The winning design fusion thus became the logo for Covenant Keepers, Inc.: