Drupal 7 - Installing and Setting Up the Commercial InnoCompany Theme

Parent Feed: 

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.

[email protected]:~> cd /tmp
[email protected]:/tmp> ls -las *.zip
29452 -rw-r--r-- 1 badzilla users 30158778 May 31 21:40 themeforest-3177223-innocompany-multipurpose-corporate-drupal-theme.zip
[email protected]:/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

[email protected]:/tmp> mkdir innocompany
[email protected]:/tmp> cd innocompany/
[email protected]:/tmp/innocompany> cp ../themeforest-* .
[email protected]:/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.

[email protected]:/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.
[email protected]:/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
[email protected]:/tmp/innocompany> cd /srv/www/htdocs
[email protected]:/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

[email protected]:/srv/www/htdocs> mv drupal-7.22 portfolio
[email protected]:/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.

[email protected]:/srv/www/htdocs> cd portfolio
[email protected]:/srv/www/htdocs/portfolio> drush site-install standard --account-name=admin --account-pass=admin --db-url=mysql://your_username:[email protected]/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]
[email protected]:/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

[email protected]:/srv/www/htdocs/portfolio> sudo /etc/init.d/apache2 restart
redirecting to systemctl
[email protected]:/srv/www/htdocs/portfolio>

Site-Install
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.

[email protected]:/srv/www/htdocs/portfolio> drush dl webform
Project webform (7.x-3.19) downloaded to /srv/www/htdocs/portfolio/sites/all/modules/webform.                    [success]
[email protected]:/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]
[email protected]:/srv/www/htdocs/portfolio>


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

[email protected]:/srv/www/htdocs/portfolio> cd sites/all/modules/
[email protected]:/srv/www/htdocs/portfolio/sites/all/modules> ls
README.txt  webform
[email protected]:/srv/www/htdocs/portfolio/sites/all/modules> cp -R /tmp/innocompany/modules/* .
[email protected]:/srv/www/htdocs/portfolio/sites/all/modules> ls
ctools  features  icompany_config  icompany_module  jcarousel  jquery_update  README.txt  token  views  webform
[email protected]:/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.

[email protected]:/srv/www/htdocs/portfolio/sites/all/modules/icompany_config> cd ../../themes/
[email protected]:/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!!

[email protected]:/srv/www/htdocs/portfolio/sites/all/themes> cd ../../..
[email protected]:/srv/www/htdocs/portfolio> cp /tmp/innocompany/Documentation/docs.html .
[email protected]:/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-
[email protected]:/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
[email protected]:/tmp/innocompany/theme_with_demo_installation/compressed_database> gunzip InnoCompany-2013-04-20T23-16-41.mysql.gz
[email protected]:/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.

[email protected]:/srv/www/htdocs/portfolio> cd /tmp/innocompany/theme_with_demo_installation/
[email protected]:/tmp/innocompany/theme_with_demo_installation> unzip themeforest-3177223-innocompany-multipurpose-corporate-drupal-theme.zip
[email protected]:/srv/www/htdocs/portfolio> cp -R /tmp/innocompany/theme_with_demo_installation/sites/default/files/* sites/default/files/.
[email protected]:/srv/www/htdocs/portfolio>


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

User
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.

docs
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.

[email protected]:/srv/www/htdocs/portfolio> sudo chown -R wwwrun:www *
root's password:
[email protected]:/srv/www/htdocs/portfolio> sudo chown -R wwwrun:www .*
[email protected]:/srv/www/htdocs/portfolio> sudo chmod -R ag+w *
[email protected]:/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]
[email protected]:/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.

Complete

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web