In the last edition of “How I Designed the new Ajaxxx.com”, I talked about the planning that went into the site. I overanalyzed the old website from top to bottom, making notes of all the issues I had with it. From lack of picture and video support on some of the pages to how long it took to update the site, there were a bunch of things that bothered me. At the same time though, there were elements that I borrowed from the old site too (like the Sindhi writing you see in the background, along with the song quotes in the banners above). It was a pretty drawn out process, but it was all worth it in the end.

In this entry, I’ll dig deeper. With the planning behind us, I’ll talk about some of the cool things I implemented, some things I chose not to do (and my reasons behind them), and the most fun part…the challenges I encountered.

Okayyyy, so one of the things I wanted to do was have the different banners on each page with a different picture and quote. Well, I got the idea from the original site (where the banners were at the bottom), but decided to bump them up to the top so they became more prevalent. I also tried to theme them around the site and the respective page it fell on. Designing is always the fun part – check out some of the designs I went through before ending up with the ones you see on the site.

Okay, so one of the things I wanted to do was include the widgets along the side. Here’s what I was considering:

• A “ringtone” widget featuring new ringtones from singles I released
• A “video” widget which showcased my new video
• A music player
• My mailing list
• Facebook
• Twitter
• MySpace
• Social media widget

So as you can see, some made the cut whereas some didn’t. I decided to not use the ringtone and video widgets because they wouldn’t get updated enough, substituted the social media widget with icons along the top, and dropped the MySpace idea for obvious reasons.

Okay, so making it happen! The Facebook Like Box widget (or Facebook Fan Box) was the most HELL ever to implement. Talk about difficult. For anybody trying to customize your Facebook widget, the one you get from the Facebook Developer page is okay at best. The biggest issue I had was that it lies within an iframe that’s sized incorrectly, which means you can drag around it inside the box. This isn’t exactly noticeable on the light version of the box, but on the dark version (especially against a dark background), it’s mad noticeable. Make sure you check out the link to see for yourself.

Customizing Facebook Fan Box – What’d I do?

I used two resources. The first one was actually my lifesaver throughout this entire process and I wouldn’t have been able to complete the site without it. Enter Firebug. Firebug is a program (well, an add-on) that you can add to Firefox that lets you control, view, and manipulate all the CSS within your site. It especially helps when you’re using widgets, plugins, etc. where you don’t know (or can’t find) the property name. If you don’t already have it and you’re a web designer, GET IT.

The other resource I used was this site: How to Customize Your Facebook Fan Box. This helped me a great deal with how exactly to update the Facebook Like Box itself. Remember, use the old Facebook code for it, not the new one. This is something I struggled with, so hopefully that helps you if you’re in the same boat.

Customizing Twitter Box – What’d I do?

Again, this was all Firebug. I isolated each element that I wanted to change and then changed it. So let’s say for example I wanted to make the lines dotted. Using Firebug, I went through the properties til I found the one I wanted to modify. I’d test it out and preview it in the browser, and then if it’s the desired effect I’d implement it in the code. It’s definitely hard to explain through just text, but once you get a grasp of Firebug you’ll know what I mean. Try it out if you haven’t already, trust me.

Social Media Icons

So with the social media icons, I ran through issue after issue after issue. A lot of this stemmed from the cool fade rollover effect I tried to do, while others dealt with the placement and arrangement of the icons. I eventually decided not to use the fade effect because it broke the Lightbox pop-up effect I had on the gallery. As far as the placement goes, it was tough because I had to really exercise some CSS skills. I don’t wanna get TOO technical, but I had to set a property for the entire space, another for the list, and another for each item within the list. Let’s just say Firebug was my best friend!

Page Numbers

No need to explain this one. Check out this awesome tutorial that explains it all: How to Add WordPress Pagination Without a Plugin.

Tag Cloud

This is an easy one. To create a tag cloud (which is what you see on the bottom right of each page), I used this code and placed it in the footer code in the area where I wanted it to show:

<?php wp_tag_cloud( $args ); ?>

So What’s Next, Ajaxxx?

In the next and last edition of “How I Designed the new Ajaxxx.com”, I’ll talk about bringing it all together. By that, I’ll talk about some of the back-end things I did to make life easier for updating. I’ll also dig into some of the plugins I did (and didn’t) end up using. If you have any questions (especially if you’re a graphic or web designer), please leave a comment below.

Until the next episode!

Filed under: Design by Ajaxxx
1 Comment »