Just today I launched the new design of my blog. I had been upset over my old design for a while; I couldn’t really put my finger on why, but I just felt that the design was really messy and unprofessional. One of things that REALLY bugged me is that the colours looked awful on Windows machines. For the new design, I decided to play it safe and stick with mostly grayscale colours.

I grabbed the background pattern that I created last year, and used it as a foundation of the new design. I didn’t want it to be too distracting so I toned down its opacity quite a bit. I’d like to work on a new background sometime soon because I feel this one is a bit too disorganized.

I went through various variations of the design, getting feedback from friends and coworkers. Mark Dunkley gave me a lot of quality feedback, as usual. I really liked the idea of having a 100% width <div>’s for the headers and footers. Later on I felt that having multiple <div>’s spanning across the page was a bit overkill, so I decided to keep it for just the footer.

Big props to Steve Hatcher’s CSS Sticky Footer, which I’m using using for this site. I can’t even think of how much time I would have spent if I were to figure out how to make a sticky footer on my own. Thank you, Mr. Hatcher!!

I think now I can finally say that I’m content with the design of my blog. Any feedback/comments would be greatly appreciated! I also have a pretty kick-ass Shopify tutorial coming up, so stay tuned!

UPDATE (11/20/2009): Taking Caroline’s advice, I decided to make it so that my logo is only present on the index page. This should make it easier for visitors with smaller laptops to browse my site :). Also, created a 404 page.

In this short tutorial, I will be walking you through how to prevent users from going to the checkout page unless they have agreed to the Terms and Conditions using jQuery. We’ll be doing this by adding a checkbox to the cart page, which if checked, will allow the user to go the the checkout page. If it’s not checked, an alert box will be shown, and the user will be prevented from going to the checkout page.

1. Download jQuery

You can download jQuery here.

2. Add jQuery to your theme assets

In the Shopify backend, navigate to Assets > Theme Editor. Under Theme Assets, click the Browse button, and navigate to where you saved the jQuery file from Step 1. Double click the file to upload.

Happy Thanksgiving to all my Canadian peoples! I hope you guys are having an awesome long weekend so far.

I apologize for the lack of updates recently, I’ve been extremely busy with client projects, side projects, and moving. I do have a few Shopify tutorial ideas floating around in my mind, but I haven’t had much time to sit down and write them out. I’m hoping that in the coming weeks things will start to slow down.

So a couple of weeks ago, a bunch of my friends at Carleton University got together and started a student club called CUJA (Carleton University Japanese Association). I was appointed to be the web master and graphic designer, so I’ve been working on their branding, their website, and their membership cards. I’m still working on the mock-up of the site, shown below (a big, big thank you to my chums Mark Dunkley and Daniel Weinand for their tips and advices!).

Just yesterday one of the CUJA execs and I went to Staples to order the membership cards that I had designed. They won’t be ready for another 4-5 days, but I can’t wait to see how they turn out!

Another thing that was keeping me busy was moving. A couple of weeks ago I had moved from my former apartment to my parent’s place so that I can live with them until the new apartment becomes available. It’s my first time living at home in two years, so it was definitely a heart-warming experience (free food is also a huge plus!). I’ll be moving to the new place in about a week, and once I settle in I’ll be working more on the Shopify tutorials.

Well that’s enough rambling for today! Happy Thanksgiving everyone!

Last week I posted a tutorial on how to make some text customizable using the settings form. In this tutorial, I will be showing you how to customize the font and background using the settings form. I will be continuing to work on the Minimify theme that we modified in the last tutorial: please click here to download the theme if you don’t have it handy.

1. Create a new fieldset

Let’s start off by creating a new fieldset. Fieldsets allow you to group different sets of settings form inputs. For example, you can group all inputs that affect the font colors under a fieldset called “Font Colors”. Open the settings form code, add a new fieldset (as shown below in red).

<h3>My very own settings form!</h3>
<fieldset>
    <legend>Colors</legend>
    <table>
      <tr>
        <th><label for="text_color">Regular text</label></th>
        <td><input id="text_color" name="text_color" class="color" value="#d60f0f"/></td>
      </tr>
      <tr>
        <th><label for="link_color">Link Color</label></th>
        <td><input id="link_color" name="link_color" class="color" value="#d60f0f"/></td>
      </tr>
      <tr>
        <th><label for="link_hover_color">Link Color Hover</label></th>
        <td><input id="link_hover_color" name="link_hover_color" class="color" value="#d60f0f"/></td>
      </tr>
    </table>
</fieldset>
<fieldset>
    <legend>Font, Logo, Background</legend>
    <table>
    </table>
</fieldset>