Theme Bid is a process of selling ColorLabs WordPress Themes by offering them up for bid, taking bids, and then selling the theme to the highest bidder. Imagine, you can have a beautifully and professionally designed WordPress theme with state of the art code, powerful framework, and tons of customization possibilities for a low price. $10? $1? You decide!

All you need to know about Theme Bid is listed below:

• Theme Bid is conducted on Twitter every Thursday at 11.00 – 11.30 am ET with Opening Bid at US$0.05.
• Theme Bid participants have to follow ColorLabs’ Twitter Account @ColorLabs to be an eligible Auction Winner.
• Participants bid openly against one another, with each subsequent bid higher than the previous bid. To bid, Participants have to compose a tweet containing: the item being auctioned, amount of the bid, a mention to @ColorLabs and the hashtag “#themebid”. For example: “Hi, @ColorLabs! I want Arthemia for $0.05 #themebid”.
• ColorLabs (@ColorLabs) will Retweet the highest current bid to be publicly displayed.
• At the end of the auction, ColorLabs (@ColorLabs) will announce the highest bid and bidder. ColorLabs (@ColorLabs) will contact the highest bidder via Twitter’s Direct Message for the payment detail.
• The Auction Schedule, including the auction items, can be seen on a note on ColorLabs Facebook Page. The Auction Schedule will be updated on monthly basis.

Next Week Only: Theme Bid Every Day

To celebrate the start of ColorLabs’ Theme Bid, we will conduct Theme Bid EVERY DAY next week from May 21-24 at 11.00 – 11.30 am ET. Don’t get excited, yet, because that’s only half of the surprise we prepare for you. :)

As the auction item, we’ve decided on our most sought-after ColorLabs Theme Bundles: The Mega Bundle, where you’ll get 25 WordPress themes for $59. Imagine, if you are very lucky, you can have 25 ColorLabs premium WordPress themes for only $0.05! Now would be the perfect time to get excited. (Check out the Pricing Page to find more details about Mega Bundle and other Theme Bundles)

So, see you Monday to Thursday and don’t forget to keep an eye on @ColorLabs during the time mentioned above. You never want to miss this chance!

CSS framework is a collection of code that will cut your development time and make your daily coding easier. A CSS framework usually contains some component like css reset, typography style and grid system. Now I will explain how to create a css grid framework with Compass.

What is Compass

Compass uses Sass. Sass is an extension of CSS which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain. Compass helps you build and maintain your stylesheets and make it easy for you to use stylesheet libraries provided by others.

Compass and Sass work together. Compass will watch all your files in your working directory and compile the sass file to css whenever you make changes to the file. Compass comes with a number of useful functions and utilities like css reset, typography style, CSS3 module and more. With CSS3 module you no need to worry about prefixing the CSS3 vendor prefix, compass will add it automagically.

Enough of This Chitchat, Just Give Me the Code

Ok, you have to install Ruby, Sass, and Compass first. Here are some reference links that will help you installing them.

• Install Ruby using RVM
• Install Sass
• Install Compass

Come back here if you have installed them, I will be waiting. Patiently.

Preparation

After you installed Compass, compasscommand will be available in your Terminal. It’s very easy to generate you first Compass project. Just run this command in your terminal.

$ compass create /home/arif/framework

You will see this message if compass project is successfully generated.

That command will create compass project in the framework directory. If the directory does not exist, compass will create it for you. Now open the newly generated directory. You will see two directory and one config file.

• sass directory is where you compass file located.
• stylesheets directory is where your compiled css file located, all your sass file in sass directory will be compiled here. You can change where the compiled file generated by editing some line in config.rb file.
• config.rb this file contains configuration for compass, i will not explain it here, you can read the configuration reference here.

Write the Code

Now you have generated your project directory, before writing code, run this command inside framework directory before.

$ compass watch

That command will watch all changes inside sass directory, now delete all files inside sass and stylesheets directory. Create new file called framework.scss inside sass directory. Notice that scss extension? Yes that’s not typo, the file need scss extension. Compass can use two file types: sass and scss. You can see the difference here. Now open framework.scss file and let’s start to code.

/* Import compass reset module */
@import "compass";

/* Import reset module */
@import "compass/reset";

/* Define some variables */
$containerWidth :   978px;
$columnWidth :      5.5; //In percent
$column :           12; //Twelve columns

Now we must get gutter width. Let’s do some math here. Gutter is space between column, in this case we have twelve columns, so subtract number of column with 1, and we have 11 gutter. We need width of gutter here not number of gutter. First mutiply column width with amount of column.

5.5% × 12 = 66%

This is total column width without gutter. In one row, column and gutter have total width of 100%, so subtract 100 with total column width.

100% - 66% = 34%

Last, divide that number with number of gutter.

34% / ( 12 - 1 ) = 3.0909%

That is our gutter width. And here is our final gutter formula.

$columnGutter   : (100 - ($columnWidth * $column)) / ($column - 1);

Let’s continue our scss code.

/* Flexible image */
img {
  height: auto;
  max-width: 100%;
}

.container {
  padding: 0 15px;
  position: relative;

  // This is mixin from compass for clearing float
  @include pie-clearfix;
}

.row {
  width: 100%;
  margin: 0 auto;
  position: relative;

  // If you need different container width, you can easily
  // change $containerWidth variable;
  max-width: $containerWidth;

  @include pie-clearfix;
}

// Select all element that contains class 'col'
[class*="col"] {
  float: left;
  display: inline;
  min-height: 1px;
  position: relative;
  margin-left: 1% * $columnGutter;

  // Get rid of margin from first column
  &:first-child {
    margin-left: 0;
  }
}

Back to math here, we need column width from column1 to column12. In compass we can do iteration just like we do in javascript or php. And here is the formula.

@for $i from 1 through $column {
  .col#{$i} {
    $colWidth: 1% * ($columnWidth * $i) + ($columnGutter *($i - 1));
    width: $colWidth;
  }
}

Confused? I will explain them line by line.

• Line 1: This is the iterator syntax from sass, you can see documentation here. We iterate from 1 to 12.
• Line 2: This is sass interpolation syntax, in javascript this syntax same with '.col'+$i sass will generate .col1 to .col12 in css.
• Line 3: We keep the width formula in variable.
• Line 4: Set width of column.

Last, define column width for mobile using media queries.

@media only screen and (max-width: 767px) {
.row {
  max-width: 767px;
    [class*="col"] {
      width: 100%;
      margin-left: 0;
    }
  }
}

Yay! We’re done here. Compass makes your development fun. You can use variable, mixin, iterator and many more. There are tons of usefull mixin you can use in Compass. For list of compass mixin you can view the documentation.

Oh, yeah I’ve pushed this code to Github, feel free to contribute or submit issues so we can make this code better.

View Code View Example

When you’re building a website, it’s easy to get distracted by the technology. Which WordPress theme or framework will you choose? Will the site have video? How will it connect to social media? What about responsive or mobile design?

All of this is fascinating, even fun. But what sometimes gets lost is the most basic question of all: Why does this site exist?

I’ve spent years making sites for clients, mostly small businesses and non-profit organizations. And it still amazes me how many clients haven’t thought through the basics: Who is my audience? What do they need and expect from my business? And how can my site give my audience what they need? Until you answer those questions, a website project is just playing with pixels.

Who are You and Why are You Here?

A crucial part of this process is figuring out what they call in marketing-speak your “Unique Selling Proposition” or USP. At its most basic, this simply means how you differentiate yourself from all the other similar businesses, services or products out there.

What makes you unique? What makes you better? How do you set yourself apart from all the other people who do what you do?

(If your first thought reading that was, “No one does what I do”, then you’re halfway there.)

Why is the USP important? Think about it this way: if you can’t differentiate yourself from the hundreds or thousands of choices out there, how do you expect your customer to do it?

The USP is the antithesis of every cookie-cutter industry site you’ve ever seen. An example I often use is real estate. Just about every real estate site looks the same: a bunch of small images of properties, some sort of complex search box, a ton of links, and a boatload of meaningless jargon like ‘ACME Realty takes a different approach to real estate – one that is based on personal touches and positive results.’

Really? That,s helpful. Because thank goodness ACME isn’t one of those firms that ignores me and gets me bad results.

Getting from There to Here

To counteract this tide of sameness, you need to develop your Unique Selling Proposition, and then make sure that all your communications – not just your website – promote that USP clearly and forcefully.

Coming up with your USP means examining your business in detail. You might start with a freeform brainstorming session, going over these main content areas:

• Audience: Who is your ideal customer? Be as specific as possible, and don’t be afraid to exclude people. (You might even think about the question: who *isn’t* my audience?)
• Problem: What problem do you solve for that ideal customer? What pain are you eliminating? How is your customer better off after working with you or buying your product?
• Unique: What sets you apart from others? This is the big one, of course – the ‘U’ in USP. There are thousands of ways to differentiate yourself: service, range, experience, technique, guarantee, features, and on and on. Focus on a handful of things that really make you one of a kind – things that make a tangible difference to your audience.

Once you have several pages of brainstorming material, edit all of it down to a handful of sentences – a short paragraph bringing together your audience, the problem you solve for them, and how you solve that problem in a unique way.

Then put it aside for a while, maybe a few days. When it’s fresh, come back and do your best to edit that paragraph down to one sentence. That will take some effort.

“I am sorry this letter is so long, but I did not have time to make it short.” -Mark Twain

This doesn’t have to be perfect. It might take several attempts. That’s OK – it shows that you’re taking this seriously. Which is good, because the USP is one of the backbones of your business, online or off.

Another tip, especially if you’re finding the process difficult: ask your customers. What made them choose you? How were you different from others they have worked with? You might be surprised at some of the responses you get.

Not a Magic Bullet

None of this work guarantees that you will end up with a slogan or tagline that will anchor your marketing forever. But that’s not even the point. The point is to slow down, turn off the computer (I said it!) and think through your business from top to bottom, and how you want to present that to your audience. That’s the anchor that will guide your website development going forward.

I tell clients all the time: the web isn’t about technology – the technology is just there to serve a purpose. The web is really about communication. Work through your USP, and you’ll be miles ahead of the masses shouting “I just need a website!”

There’s a lot more about USPs online. If you could use some inspiration, Think Traffic has a great page with some examples of ‘killer’ USPs from around the web.

Do you already have a USP? If not, I hope this has inspired you to create one. I’d love to hear your stories about USPs in the comments.

• Stand Out from The Crowd Unique Golf Tee Image by Steven Depolo, used under its Creative Commons license.
• stand_out Image by Search Engine People Blog, used under its Creative Commons license.

Meanwhile here a sneak preview of the upcoming child theme for Backbone. The design is about 80% ready and we will move to the WordPress development stage tomorrow. Stay tuned!

Introducing Sharpness, a Backbone Framework Child Theme.

Sharpness is a Backbone Framework Child Theme with a main purpose to showcase photography. If you are a photographer and already have beautiful images to start with, then Sharpness will give you a new and exciting way to showcase them online. With minimum distracting imagery and white background, Sharpness is able to maintain the focus on the pictures, letting photography steals the show.

Sharpness Child Theme has a lot of customization options on its theme option panel, but not so many that they’re overwhelming. You can easily make changes to the theme to get a unique website appearance. Sharpness has all the popular wishlist items, like huge image slider on the home page and custom widgets, but without going over the top.

Sharpness is well structured for search engines to give your photoblog/portfolio more traffic, more interaction, more exposure and ultimately more success.

Check out its landing page to find out more features that Sharpness has or see it in full form on Live Demo.

To enjoy the offer, you need to enter a special coupon code when checking out. With the coupon code you can buy any ColorLabs Theme Bundle available for only $49. Check out ColorLabs Deals Page to find out how to get the coupon code and also more details about this offer.

WooCommerce is an open source e-commerce platform with enterprise-level quality & features from WooThemes. Even though it’s still new, WooCommerce plugin has received thousands of complement around the net on how well it is (inside and out) and there is a growing market of themes and plugins made specifically for it.

ColorLabs always give the best that WordPress has to offer. Since WooCommerce has quickly gained great reputation from WordPress community, we had made all ColorLabs e-commerce WordPress themes WooCommerce ready. Our themes are famous for their beautiful design, excellent SEO, and easy customization.

If you are planning on launching your e-commerce business with WooCommerce, we highly encourage you to check out one of our e-commerce themes. Not only they will give the jump start that your business needs, but also your online store will look good, work great and your life will be easier. Let’s take a closer look on what ColorLabs WooCommerce themes have to offer.

Oh, there’s a little surprise for you down below. So read on. :)

Beautiful and Functional Design

When it comes to e-commerce web design user experience is far more important than cutting edge design. ColorLabs e-commerce themes are designed to be functional, accessible and user-friendly for everyone that visits them. The themes’ design is clean and uncluttered making them buyer-centric and allowing quick, intuitive navigation of the sales process. But the design still manage to maintain attractiveness to keep the interest of the visitors alive for an enjoyable user experience. Your customers will appreciate what the you offer and surely feel like returning to visiting your online shop.

Flexible and Customizable

Being built upon WordPress, ColorLabs WooCommerce themes come with WordPress’ functionality and stability, with enough hooks and filters to tweak the themes to suit your needs. To help you make your online store unique, all of our themes have powerful backend theme options. You can add your own logo, change color style, and more changes straight on WordPress backend theme option’s panel without needing to touch any code.

Our WooCommerce themes are also equipped with custom page templates such as archive and site map page template for quick links to your old posts, contact page, and blog page template for news update and sharing.

WooCommerce Goodies

The basic WooCommerce plugin is completely free to download and use. WooCommerce comes with all the standard features that you’d expect within an e-Commerce plugin such as;

• Analytical report of your store straight on the WordPress dashboard
• Comprehensive shipping and tax settings
• Secure user account for customers and order management
• Easy-to-use product and inventory management for all kind of product
• Marketing & promotions including discount coupon management system
• A wide variety of popular payment gateways and payment methods

There is also a wide selection of “extensions” that can be downloaded from the WooThemes website. Some of these are free, but most will set you back a small fee.

Responsive Layout

Meaning your website will look good at any browser width/resolution including iPhones and other mobile devices. Whether your visitor accesses your website on a desktop, an iPad or a smartphone, content is always delivered with ultimate focus.

Here is Your Little Surprise

There are two kind of Pricing Plan for ColorLabs e-commerce themes. You can buy them one by one, each for a price, or you can buy multiple themes at once by purchasing the Enterprise Bundle. The Enterprise Bundle also include 2 App Themes: JobJockey and EstateExpert. (Check out the Pricing Page for more details on the pricing plan available for our e-commerce themes)

Whichever pricing method you choose, you can get $20 PRICE CUT by entering the code 6C590 upon check out.

Check out all ColorLabs WooCommerce themes available in the Enterprise Bundle, give them a try on their demo and get one of those WordPress theme for your online store.

One of the free option (currently free in beta stage) available from Google itself is the PageSpeed service. You may have used the Google PageSpeed online or the browser extension or Mod PageSpeed for analyzing and improving your site performance.

Google PageSpeed Service is another such service which allows you to optimize your pages automatically on the fly. Just use this service from Google and it will take care of your site performance.

As said by Google

“PageSpeed Service is an online service to automatically speed up loading of your web pages. PageSpeed Service fetches content from your server, rewrites your pages by applying web performance best practices and serves them to end users via Google’s servers across the globe.”

An all in one service by itself, Google PageSpeed service fetch your website content, optimizes it and serves from various Google CDN locations,.

Let’s see how to setup the Google PageSpeed service on your WordPress blog or website.

Step 1- Get Started

Google PageSpeed Service is currently in a beta stage with invitation only join, to get access to the service you need to fill out this form and wait for the approval (probably it will take 2-3 days). If your request gets approval, Google will provide you with all initial details of using the service.

Step 2 – Domain Setup

Once you got access to Google API console to Google PageSpeed service, you will have an option to add a domain name to the service. Enter the domain name in the format “www.example.com”, note that naked domains (example.com) are not currently supported by the service.

If you have never verified the ownership of your domain through Google Webmaster Central, then you will be asked to “claim domain ownership” by following the steps in Google Webmaster Central.

Now after verification, you need to configure the DNS for the origin domain, which will be used for the service. For the PageSpeed service to work it needs to fetch content from your live server. For this you will need to setup an origin domain, say orig.example.com. Follow these steps to configure the DNS setting for your origin domain.

• Login to your DNS provider
• Select a name for the origin domain that you are going to configure. eg. ref.example.com
• If www.example.com is an A-record pointing to a server/IP address, then setup a new DNS entry (A-record) for ref.example.com pointing to the same server/IP address as www.example.com
• If www.example.com is a CNAME record pointing to xyz.www.example.com then add a CNAME record for ref.example.com pointing to xyz.www.example.com
• Set the TTL to 1/2 hr (1800 seconds)

After you have setup the DNS for origin domain, you need to change the DNS record for the main domain now. This is done to divert all traffic coming to your main domain to Google’s servers. For that add a new CNAME record for www.example.com and set its value to ghs.google.com (If a CNAME entry for www.example.com already exists, change it value to ghs.google.com)

Step 3 – Configuring  Rewriters

After successful setup you can monitor near-real time traffic and latency metrics for your web site from the Google PageSpeed  “Overview” tab. On the Overview tab you can monitor the HTML Requests and Average HTML Page Load Time graphs, showing the number of hits received on your page and also the load time.

You will have the option to configure Rewriters to optimize your site to your needs.

• HTML Rewriters – optimize HTML files serving and caching
• CSS Rewriters – combine and minify CSS files of your website
• Image Rewriters – optimize the images on your site, by converting it to low size formats and also use of lazyload images features to loading images until they are visible in the client’s viewport.
• JavaScript Rewriters – optimize the JavaScript and to combine them to reduce http requests.

(See the image below to have quick glance of all the rewriters available)

You will have the option to blacklist some URLs of your site, which will be served without any optimization.

Step 4- Reporting

Google PageSpeed service also reports Errors while serving the rewriters, this are listed under error tab. The Error graph lists the number of HTTP errors served on your website over the last 24 hours. The index for the plot lists each error type, along with the number of occurrences in parentheses. HTTP error counts are not only for HTML pages, but also for images, CSS and JavaScript requests.

When you start the Google PageSpeed service for your website, Google will be automatically set a default value for all rewriters, which you can change to suit your site needs. You need to tweak it until you a optimize configuration.

Your site is now optimized by Google’s PageSpeed service. Currently this service is free to use, so don’t wait to sign-up for this service and enjoy the benefits from Google to optimize your site. That’s all.

Do you use the Google PageSpeed Service for your site? Do share your experience with us.

The main purpose of the upcoming Child Theme is to showcase photography, so we keep the graphics and distracting imagery to a minimum and only use neutral colors to maintain the focus on the pictures. The theme has white background color that works with all your photos, letting the photography steal the show.

The Child Theme will be well structured for search engines to give your photoblog/portfolio more traffic, more interaction, more exposure and ultimately more success.

If you are a photographer and already have beautiful images to start with, stay-tuned to ColorLabs blog update for the official launch of this Backbone Child Theme.

Much remains to underestimate the role of image thumbnail in a website. Apparently, the image quality is very important for a website, especially for websites that display photos like a gallery or photography website. One of the reasons why user is interested to visit a website is the quality of the image thumbnail. Copy-writing is an intrinsic part of web design, but it can easily be brushed aside for a beautifully shot photograph or well drawn image as our brain can interpret picture much quicker than text. 

There are several types of websites that can rise or fall on the quality of the images it contains like E-Commerce, Multimedia, Business, Magazine, Blog, etc. They need a good image to keep the theme’s layout looks good and interesting.

There are two most common mistakes which related to the usage of thumbnail image:

1. Image looks streched and broken. This happened because the size of the image that is used is smaller than the default size of the image area.
2. Image looks cropped. This happened because the size of the image is too large and the difference in size with a default size of the area is very far away. Usually, this case happens to the image in a rectangular slider where the height tend to be smaller than the width.

And, how to make an image with a good composition? Here are the steps:

1. Learn your theme’s thumbnail area’s default size. This is very important in order to maintain your own knowledge about the ins and outs of the theme.
2. Adjust the size of the image according to the default thumbnail area you’ve learned in step 1. For this step, you can use a special application for photo editing, like Adobe Photoshop, Picasa, or the default application for photo editing of your computer’s OS. If you don’t want to to edit the image yourself, you can choose to use the image that has bigger size than the size of the default thumbnail area on your website theme. WordPress themes (especially our theme) commonly has Auto Thumbnail Resizer feature where the image will be automatically adjusted to the image area. Most WordPress theme also has Featured Image option so you can set an image as your post’s thumbnail by clicking the ‘Set featured image’ link.

That’s all from me for now. If any of you guys have any other thoughts, you can share it via comments.