Drupal 7 - Installing and Setting Up the Commercial InnoCompany Theme

This is a tutorial for installing and setting up the commercial InnoCompany Theme that retails for around $45 in the US (£32 or so in the UK). The theme offers a multi-purpose corporate solution, but my own use is to create a portfolio site. I consider myself a back-end Drupal dev first and foremost, and my feeling is it would take me too long to create a neat portfolio site (which must of course be Drupal) from scratch. That effort would detract from my paid work for my clients and the pro bono weekend work I undertake for charities.

Despite the theme being constructed by WorthAPost, payment is I actually made to themeforest. Once the theme is bought it can be downloaded as a zip file.

To follow this tutorial, the following assumptions are made:

You have already set up a LAMP stack on your rig with a working Apache server and PHP and MySQL
You have Drush installed
You have an understanding of Linux command line
You have at least a passing knowledge of Drupal 7

Ok, so firstly navigate to the innocompany download which under most circumstances will by either in your home downloads directory, or in my case /tmp.

badzilla@linux-ldan:~> cd /tmp
badzilla@linux-ldan:/tmp> ls -las *.zip
29452 -rw-r--r-- 1 badzilla users 30158778 May 31 21:40 themeforest-3177223-innocompany-multipurpose-corporate-drupal-theme.zip
badzilla@linux-ldan:/tmp>

The zip file expands into the current directory (nasty and messy) so create a subdirectory and move the zip file into it, then unzip

badzilla@linux-ldan:/tmp> mkdir innocompany
badzilla@linux-ldan:/tmp> cd innocompany/
badzilla@linux-ldan:/tmp/innocompany> cp ../themeforest-* .
badzilla@linux-ldan:/tmp/innocompany> unzip themeforest-*

The zip file expands to quite a complicated file structure. It ships with features and views to minimise the effort of setting up the theme since these are dependencies. The entire directory tree is shown below.

badzilla@linux-ldan:/tmp/innocompany> find ./ -type d | sed -e 's/[^-][^\/]*\//--/g;s/--/ |-/'
 |-
 |-theme_with_demo_installation
 |---compressed_database
 |-standalone_theme
 |---icompany
 |-----forum
 |-----js
 |-----sliders
 |-------iview
 |---------js
 |---------img
 |---------css
 |-----------skin1
 |-----------skin4
 |-------piecemaker
 |---------scripts
 |-----------swfobject
 |-------flex
 |---------images
 |-------nivo
 |---------themes
 |-----------bar
 |---------images
 |-------elastic
 |---------js
 |---------css
 |---------images
 |-----simplenews
 |-----img
 |-------slides
 |-------icons
 |---------48
 |---------picons
 |-------bg
 |-----views
 |-----css
 |-------images
 |---------ie6
 |-----cache
 |-----fonts
 |-----includes
 |-licensing
 |-Documentation
 |---img
 |---bootstrap
 |-----js
 |-----img
 |-----css
 |-psd
 |-modules
 |---features
 |-----tests
 |-----includes
 |-----theme
 |---jquery_update
 |-----replace
 |-------ui
 |---------ui
 |-----------minified
 |-------------i18n
 |-----------i18n
 |---------themes
 |-----------base
 |-------------minified
 |---------------images
 |-------------images
 |---------external
 |-------jquery
 |---------1.5
 |---------1.7
 |---------1.8
 |-------misc
 |---------1.7
 |---token
 |-----tests
 |---icompany_config
 |---views
 |-----views_export
 |-----tests
 |-------test_plugins
 |-------taxonomy
 |-------user
 |-------node
 |-------plugins
 |-------templates
 |-------styles
 |-------field
 |-------handlers
 |-------comment
 |-----js
 |-----plugins
 |-------export_ui
 |-------views_wizard
 |-----css
 |-------ie
 |-----help
 |-------images
 |-----handlers
 |-----includes
 |-----drush
 |-----modules
 |-------translation
 |-------taxonomy
 |-------user
 |-------filter
 |-------node
 |-------locale
 |-------aggregator
 |-------search
 |-------system
 |-------profile
 |-------tracker
 |-------field
 |-------statistics
 |-------book
 |-------contact
 |-------comment
 |-----theme
 |-----images
 |---icompany_module
 |-----.settings
 |---ctools
 |-----page_manager
 |-------js
 |-------plugins
 |---------task_handlers
 |---------tasks
 |---------cache
 |-------css
 |-------help
 |-------theme
 |-------images
 |-----ctools_ajax_sample
 |-------js
 |-------css
 |-------images
 |-----tests
 |-------ctools_export_test
 |-------plugins
 |---------not_cached
 |---------cached
 |-----bulk_export
 |-----js
 |-----ctools_plugin_example
 |-------plugins
 |---------content_types
 |---------access
 |---------relationships
 |---------arguments
 |---------contexts
 |-------help
 |-----stylizer
 |-------plugins
 |---------export_ui
 |-----plugins
 |-------content_types
 |---------entity_context
 |---------term_context
 |---------block
 |---------node_form
 |---------node_context
 |---------token
 |---------page
 |---------custom
 |---------node
 |---------search
 |---------form
 |---------user_context
 |---------vocabulary_context
 |---------contact
 |---------comment
 |-------access
 |-------relationships
 |-------export_ui
 |-------arguments
 |-------cache
 |-------contexts
 |-----ctools_custom_content
 |-------plugins
 |---------export_ui
 |-----views_content
 |-------plugins
 |---------content_types
 |---------views
 |---------relationships
 |---------contexts
 |-----css
 |-----ctools_access_ruleset
 |-------plugins
 |---------access
 |---------export_ui
 |-----help
 |-----includes
 |-----drush
 |-----images
 |---jcarousel
 |-----js
 |-----skins
 |-------default
 |-------tango
 |-----includes

Next you will need to create a MySQL database for your site. I tend to do this on the command line - a habit I've got into.

badzilla@linux-ldan:/tmp/innocompany> mysql -u root
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 181
Server version: 5.5.28-log Source distribution
 
Copyright (c) 2000, 2012, Oracle and/or its affiliates. All rights reserved.
 
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
 
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
 
mysql> CREATE DATABASE portfolio;
database created
mysql> GRANT ALL PRIVILEGES ON portfolio.* TO 'database_username'@'localhost' WITH GRANT OPTION;
Query OK, 0 rows affected (0.77 sec)
mysql> quit
Bye

You will need to change database_username to whatever value you are using. Next we need to create the document root for the website - and this is where the convention varies between Linux distros. Since I'm using openSUSE I placed my website under /srv/www/htdocs/ but I know other distros such as the immensely popular Ubuntu uses /var/www/html/. Pick whichever is appropriate for your rig. Whichever you choose, ensure that:

Apache user and group has write access to the document root
The user you use at the command line is a member of the Apache group and the directory has group write permissions

badzilla@linux-ldan:/tmp/innocompany> cd /srv/www/htdocs
badzilla@linux-ldan:/srv/www/htdocs> drush dl drupal
Project drupal (7.22) downloaded to /srv/www/htdocs/drupal-7.22.                                                 [success]
Project drupal contains:                                                                                         [success]
 - 3 profiles: minimal, testing, standard
 - 4 themes: seven, garland, bartik, stark
 - 47 modules: comment, syslog, menu, shortcut, simpletest, contact, trigger, book, statistics, field_ui, update,
dblog, contextual, list, options, field_sql_storage, text, number, field, openid, path, image, tracker, help,
profile, system, search, aggregator, rdf, locale, node, filter, poll, dashboard, color, block, blog, user,
overlay, taxonomy, forum, translation, file, php, toolbar, drupal_system_listing_compatible_test,
drupal_system_listing_incompatible_test
 
badzilla@linux-ldan:/srv/www/htdocs> mv drupal-7.22 portfolio
badzilla@linux-ldan:/srv/www/htdocs>

Note how I use drush to download the latest version of Drupal and then since it creates the directory under the name of the latest version of Drupal, I rename it to portfolio since that's what I want my document root to be called. You can now install the Drupal download, and this can be effected by using Drush. Change directory to inside portfolio and execute the following command below. It is unimportant what you specify for the Drupal user 1 values since they will be overwritten shortly when we create the InnoCompany demo data. However, you will need to change your database username, password and db name. Also I've had problems in the past with Drupal understanding localhost so I always use 127.0.0.1 instead.

badzilla@linux-ldan:/srv/www/htdocs> cd portfolio
badzilla@linux-ldan:/srv/www/htdocs/portfolio> drush site-install standard --account-name=admin --account-pass=admin --db-url=mysql://your_username:your_password@127.0.0.1/your_db_name
You are about to create a sites/default/files directory and create a sites/default/settings.php file and DROP all tables in your 'portfolio' database. Do you want to continue? (y/n): y
Starting Drupal installation. This takes a few seconds ...                                                       [ok]
Installation complete.  User name: admin  User password: admin                                                   [ok]
badzilla@linux-ldan:/srv/www/htdocs/portfolio>

Now it's almost time to check you have a functioning website - but that will need a change to the Apache configuration first. Here your mileage will vary dependent upon your setup. I am adding to the httpd.conf file (not necessarily a good idea since changes could be lost in a system upgrade), and your configuration could be different. /etc/apache2/httpd.conf

<VirtualHost *:80>
	DocumentRoot "/srv/www/htdocs/portfolio"
	ServerName portfolio.localhost
        ServerAlias portfolio.localhost
	RewriteEngine On
	RewriteOptions Inherit
</VirtualHost>
 
<Directory /srv/www/htdocs/portfolio>
	Options -Indexes +FollowSymLinks
	AllowOverride All
	Order allow,deny
	Allow from all
</directory>

Next an entry to the hosts file is required to ensure you can actually point a browser at your site. /etc/hosts

127.0.0.1	portfolio.localhost

Now it's time for an Apache reboot

badzilla@linux-ldan:/srv/www/htdocs/portfolio> sudo /etc/init.d/apache2 restart
redirecting to systemctl
badzilla@linux-ldan:/srv/www/htdocs/portfolio>

By pointing a browser to portfolio.localhost you should be able to see the website, albeit without (as yet) the InnoCompany theme and functionality

I noticed that the Webform module is not listed in the directory tree above, yet the site does use it for the contact form. So this needs to be added.

badzilla@linux-ldan:/srv/www/htdocs/portfolio> drush dl webform
Project webform (7.x-3.19) downloaded to /srv/www/htdocs/portfolio/sites/all/modules/webform.                    [success]
badzilla@linux-ldan:/srv/www/htdocs/portfolio> drush en webform -y
The following extensions will be enabled: webform
Do you really want to continue? (y/n): y
webform was enabled successfully.                                                                                [ok]
badzilla@linux-ldan:/srv/www/htdocs/portfolio>

Now let's copy over the modules from the InnoCompany directory tree.

badzilla@linux-ldan:/srv/www/htdocs/portfolio> cd sites/all/modules/
badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/modules> ls
README.txt  webform
badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/modules> cp -R /tmp/innocompany/modules/* .
badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/modules> ls
ctools  features  icompany_config  icompany_module  jcarousel  jquery_update  README.txt  token  views  webform
badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/modules>

The theme is situated in the standalone_theme directory in the tree, in a zip file. So unzip this into sites/all/themes as per the Drupal convention.

badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/modules/icompany_config> cd ../../themes/
badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/themes> unzip /tmp/innocompany/standalone_theme/icompany.zip
Archive:  /tmp/innocompany/standalone_theme/icompany.zip
   creating: icompany/
  inflating: icompany/block--footer1.tpl.php  
  inflating: icompany/block--footer2.tpl.php  
etc.....

In the Documentation directory in the tree there is a file called docs.html that unsurprisingly contains useful configuration information. So copy this to the document root along with its supporting img directory files BUT REMEMBER TO DELETE THIS FILE BEFORE HOSTING YOUR WEBSITE!!

badzilla@linux-ldan:/srv/www/htdocs/portfolio/sites/all/themes> cd ../../..
badzilla@linux-ldan:/srv/www/htdocs/portfolio> cp /tmp/innocompany/Documentation/docs.html .
badzilla@linux-ldan:/srv/www/htdocs/portfolio> cp -R /tmp/innocompany/Documentation/img .

Ok so now we need to add the sql statements provided by WorthAPost - this will provide all the startup data to pre-populate our Drupal database. I've elected for the strategy of using the test data and amending to fit my circumstances rather than building from scratch. The test data db commands can be found in the directory tree at theme_with_demo_installation in a zipped file with a filename commencing InnoCompany-

badzilla@linux-ldan:/tmp/innocompany/theme_with_demo_installation/compressed_database> ls -lash
total 160K
4.0K drwxr-xr-x 2 badzilla users 4.0K Apr 20 23:16 .
4.0K drwxr-xr-x 3 badzilla users 4.0K Apr 20 23:19 ..
152K -rw-r--r-- 1 badzilla users 152K Apr 20 23:16 InnoCompany-2013-04-20T23-16-41.mysql.gz
badzilla@linux-ldan:/tmp/innocompany/theme_with_demo_installation/compressed_database> gunzip InnoCompany-2013-04-20T23-16-41.mysql.gz
badzilla@linux-ldan:/tmp/innocompany/theme_with_demo_installation/compressed_database> mysql -u your_db_username -p portfolio
Enter password: 
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A
 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 193
Server version: 5.5.28-log Source distribution
 
Copyright (c) 2000, 2012, Oracle and/or its affiliates. All rights reserved.
 
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
 
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
 
mysql> source InnoCompany-2013-04-20T23-16-41.mysql;
...etc...
Query OK, 0 rows affected (0.00 sec)
 
Query OK, 0 rows affected (0.00 sec)
 
Query OK, 0 rows affected (0.00 sec)
 
Query OK, 0 rows affected (0.00 sec)
 
Query OK, 0 rows affected (0.00 sec)
 
mysql>

There are a number of test images which belong in sites/default/files. These are buried quite deep in the InnoCompany filesystem and first need expanding out of an entire Drupal build and then copying to the correct place.

badzilla@linux-ldan:/srv/www/htdocs/portfolio> cd /tmp/innocompany/theme_with_demo_installation/
badzilla@linux-ldan:/tmp/innocompany/theme_with_demo_installation> unzip themeforest-3177223-innocompany-multipurpose-corporate-drupal-theme.zip
badzilla@linux-ldan:/srv/www/htdocs/portfolio> cp -R /tmp/innocompany/theme_with_demo_installation/sites/default/files/* sites/default/files/.
badzilla@linux-ldan:/srv/www/htdocs/portfolio>

Now refresh your browser and you will see the site appear, albeit the site in maintenance mode screen.

Navigate to /user and login with the credentials of Username: worthapost and password of worthapost. Once you are in, immediately change the username and the password by clicking on your username (top right) and then the Edit tab. You will also probably want to change the timezone setting at the same time.

Take a look at /docs.html and you'll see the config page that came with the installation.

It is now worthwhile to perform some tidy-up activities, such as ensure that the permissions are set correctly on the filesystem, and update.php has been run.

badzilla@linux-ldan:/srv/www/htdocs/portfolio> sudo chown -R wwwrun:www *
root's password:
badzilla@linux-ldan:/srv/www/htdocs/portfolio> sudo chown -R wwwrun:www .*
badzilla@linux-ldan:/srv/www/htdocs/portfolio> sudo chmod -R ag+w *
badzilla@linux-ldan:/srv/www/htdocs/portfolio> drush updatedb
Operations on Unicode strings are emulated on a best-effort basis. Install the PHP mbstring extension for        [warning]
improved Unicode support. (Currently using Unicode library Standard PHP)
The following updates are pending:
 
webform module : 
  7321 -   Remove files left over from deleted submissions. Such files are now deleted  automatically. 
 
Do you wish to run all pending updates? (y/n): y
Operations on Unicode strings are emulated on a best-effort basis. Install the PHP mbstring extension for        [warning]
improved Unicode support. (Currently using Unicode library Standard PHP)
Performed update: webform_update_7321                                                                            [ok]
Finished performing updates.                                                                                     [ok]
badzilla@linux-ldan:/srv/www/htdocs/portfolio>

You should now have a fully functioning website. There is now plenty to do since you need to replace all the test data with your own, and your basic site details (such as name, email address etc) should be set by going to admin/config/system/site-information. All these activities can be worked on in the fullness of time, and I will be providing more tutorials to aid that process as I build my own portfolio site.

blog terms

Drupal Drupal 7