Choosing a website color scheme can be tricky but there are a lot of good free tools out there to help you on your way, some of which are:


A super fast color scheme generator. Just click on generate or explore tabs at the top of the page and browse through their color schemes or create your own by drag & drop. When you are happy with your chosen color scheme just click on export and chose between pdf, png, scss, svg, or url formats.

Visit Site



A great tool for picking your colors from a color circle. You can then select the example tab to see your chosen color scheme implemented in a number of different ways on a website mock up. If you like the color scheme then you can copy this palette or share it

Visit Site


Adobe Color CC

A good tool for picking your colors from a color circle again but this time using a set of color rules.You can pick a base color and generate a palette from this or select one of the color rules like Analogous, Monochromatic, Triad, Complementary, Compound, Shades or Custom

Visit Site


Why do we need to know this

Because a large proportion of the visitors to your site will be using a mobile phone or tablet. A site made for desktop does not look good or function properly on a mobile or tablet. A lot of websites out there at the moment are not mobile friendly which means their users are not getting the best experience and will be more inclined to leave. Google are now also penalizing non-mobile friendly sites in their search results, meaning your target audience will not even find your site while searching on a mobile or tablet. This results in a lot of missed sales as according to Mary Meeker of Internet Trends 2016 50% of web browsing is done on mobile or tablet.

How do I know if my website is mobile friendly

You could just minimize the window of your browser and resize it slowly to see how it behaves at different screen sizes, maybe adding the extension Viewport Dimensions to chrome to see what pixel widths your website is looking good at. See the table below for the standard sizes of mobile, tablet and desktop.

Viewport Width Devices Description
<= 320px iPhone, Samsung, LG,HTC 320 X 440 This is your mobile first default style if making a mobile first responsive website. At this size, space is precious and you should make sure that you have no more than 3 items in the navigation menu.
> 320px iPhone, Samsung, LG,HTC 320 X 440,Motorola – 320 x 480,Motorola, Nokia Lumia
– 480 x 800
This view port size is most used with phones in the landscape position. Make sure that the main content is above the fold as they say in the news paper industry. It refers to having important articles in the section above the fold in a news paper so that people glancing at it when its folded in two will see the important news.
> 480px HTC 540x960 and Samsung/Motorola 720x1280 At greater than 480 we can start adding more navigation to the primary and some more images
>768px Tables like HTC,Samsung,Motorola Ipad At this size we need to ensure that the navigation and buttons are clickable
>=960px  Desktop, Laptop and some Tablets This is the size that we want to display everything that we couldn't on mobile and tablet. As size is not a concern we can concentrate on good design.


Alternatively you can run the Google Mobile Friendly Test and just enter your website URL and click Analyze. This will give you breakdown on whether your site is mobile friendly or not and also provides suggestions on what to do.

First of all, Google needs a reason to rank your site before others.

If you have a website with a few pages and haven't updated anything on it for 2 years then Google will rank the guy who updates his content regularly before you. Google makes it's money on advertising and as such needs to ensure that only relevant web sites are presented to their users, otherwise it's users would move to another search engine provider to get a better match for their searches. One of the most important elements for search engines ranking your site is your site's Domain Authority which is determined by over 40 other metrics, one of which is the number of other sites linking to yours and their Domain Authority.

Social media links from sites like Facebook are very important in letting search engines know that your site can be trusted and people are engaging with it. This is where blogging can help, by creating useful blogs relevant to the content on your site that help solve other peoples problems, you increase your chances of social media users sharing links to your site and thus increasing your important Domain Authority.

So what type of blog will increase search ranking

The main point is to offer solutions to the problems that your target audience is searching for. If your are solving your target audience problems then they are much more likely to share a link to your site with friends on social media. Also other domain administrators or site owners will also be more likely to link to your site on their personal blogs, increasing your Domain Authority and your search engine ranking. Some points to keep in mind when writing your blog are:

  • Know who your target audience is
  • Choose a title that will appeal to and find your audience 
  • Identify groups within you audience that might have specific needs and write blog post specifically for these (for example a car dealership might write a blog on assesability options for disabled people)
  • Choose topics by making a list based on popular questions posted on relevant forums 
  • Make good comments on other related blogs and leave a backlink (see for some good tips)
  • Make your content relevant to your target audience 
  • Solve problems that you think your target audience are searching for
  • Update regularly 

If your wondering how to highlight your code using the CKEditor in Drupal 7 thee read on.

First install the CKeditor module at 

Now go to the configuration page at admin/config/content/ckeditor, select the profile you want to edit and expand the editor apperance section. Now goto plugins and check the box next to Plugin for inserting Code Snippets

Screenshot from 2016-08-17 14:54:21_0.png

Scroll down to bottom and save. Now open admin/config/content/ckeditor again, select the profile you want to edit and expand the editor apperance section. Grab the code snippet button ckeditor-code-button.png   from available buttons and drag it to the current toolbar and save. Now any time you add code into the editor just select the code snippet button and select your code type from the drop down box  and paste it in.

commerce kickstart logo

Use drush to download commerce kickstart

cd websites

drush dl commerce_kickstart

Use drush to install the downloaded files without demo store​

drush si commerce_kickstart --site-name=SiteName

--account-name=user --account-pass=passwd --db-url=mysql://

3306/dbname commerce_kickstart_configure_store_form.install_demo_store=0

Use drush to install the downloaded files with demo store​

drush si commerce_kickstart --site-name=SiteName

​ --account-name=user

--account-pass=passwd --db-url=mysql:// 

Or if you want to use the GUI during installation to configure the store settings

  1. Create a normal drupal site using drush qc --domain=site_name.
  2. Then take note of the database name, user and password in the setting.php file and delete all files and folders in the site folder.
  3. Now copy over all the files and folders from the directory you downloaded with the drush dl commerce_kickstart command.
  4. Edit and save the settings.php file with the database setting noted above.
  5. Use phpMyAdmin to drop all tables in the database
  6. Run update.php by entering
  7. Follow the Gui instructions.



Download and install Omega 4 theme as you would for any Drupal Theme or use drush cmd in your website folder (Don't install omega tools)

drush dl omega

drush en omega

Check to see if you have a version of drush with omega helper commands

drush help --filter=omega

All commands in omega: (omega)
 omega-export (oexp)   Exports the theme settings of a given theme from the    
                       database to the .info file.                             
 omega-guard (ogrd)    Runs guard for the given theme including Compass and    
                       LiveReload by default.                                  
 omega-revert (orev)   Reverts the theme settings of a given theme by deleting 
                       them from the database.                                 
 omega-subtheme        Creates a Omega subtheme.                               
 omega-wizard (owiz)   Guides you through a wizard for generating a subtheme.

Create a subtheme using drush and follow the prompts

drush omega-wizard

Change directory to your new subtheme and run bundle install to get all gem file dependencies 

gem install bundler
bundel install

Omega 4x subthemes have a  hidden .ruby-version file which bundle install picks up so you will have to edit this file from 1.9.X to the latest version (as of this writing it's 2.3.1). When this is done run

rbenv install –list

This will list all ruby versions install on your machine. rbenv is  a ruby version manager if you don't have it on your machine then follow this tutorial on how to install rbenv. If the latest ruby version is listed then proceed below with rbenv install 2.3.1 If the latest version is not listed you will have to do a git pull fron your .rbenv directory in your home folder to get the latest version. Take a look at the install rbenv on ubuntu 14.04 tutorial. All set now we can run

rbenv install 2.3.1

to install ruby 2.3.1 and now you should be able to run bundle commands from your subtheme directory 

gem install bundler
bundle install

Run drush omega guard to automatically watch your sass folder for changes and apply to css (run from your subtheme directory)

drush omega-guard


First Uninstall ruby and gem from your current setup so we have no conflicts

sudo apt-get purge ruby rubygems

Next install the Personal Package Archives (PPA)  for Node.js

sudo apt-add-repository -y ppa:chris-lea/node.js


Install python properties

sudo apt-get install python-software-properties

Now we update 

sudo apt-get -y update

And install node.js, git-core and Curl

sudo apt-get -y install curl git-core nodejs

We can now use Curl to download RBENV from git

curl | bash

Now update .bashrc to set your path to RBENV by adding this to the top of .bashrc in your home folder

export RBENV_ROOT="${HOME}/.rbenv" if [ -d "${RBENV_ROOT}" ]; then   export PATH="${RBENV_ROOT}/bin:${PATH}"   eval "$(rbenv init -)" fi

Restart bashrc

source ~/.bashrc

Install missing dependencies

rbenv bootstrap-ubuntu-12-04

List ruby versions and install the latest

rbenv install --list rbenv install 2.3.0


(rbenv rehash) This is now deprecated as added to rbenv core as off version 0.1.2

When finished make this version of ruby default by setting it to global
rbenv global 2.3.0

Now we are nearly there, just need to install bundler which does most of the work for you setting up the config file with a list of required gems for each project and install the right gems per project

gem install bundler

Now we are ready, if you project has a gem file just navigate to that directory and run

bundle install

If you are starting you own project just run bundle init from within the project directory and add you gems to the gem file it creates

bundle ini

If you need a different ruby version for any local project we can tell RBENV to create a local ruby version for this project by running this in your project folder

rbenv local 2.3.0






To create a new up to date commerce kickstart site update both commerce kickstart module and the core on your local development machine

  1. Backup original sites files and database.
  2. Set up a fresh drupal site using drush qc
  3. Take note of database name and password in sites/default/settings.php of new site
  4. Rename folders sites and profiles to sites-old and profiles-old in case we mess up.
  5. Copy over your  sites and profile folder from original site to new site
  6. Edit settings.php with database name and password fron step 3 above
  7. Run backup migrate on new site and restore database with original
  8. Run update.php by entering ito you browser and following the instructions
  9. That's it your done enjoy!