Jun 08 2013
Jun 08

Subsequent to my earlier blog on installing and setting up the commercial InnoCompany Drupal 7 theme, it is now time to do something useful - set up the Piecemaker 3D slider which is based on Flash animation, with an XML configuration file. Thankfully a lot of the work has already been bundled into the InnoCompany theme and there isn't that much to do. Principally the slider images, captions and links are included in theme configuration, and there are 10 available placeholders which means the carousel may have up to 10 images. Once this has been saved as theme settings it is retrieved in template.php->icomp_get_slider_html()->icomp_prepare_piecemaker() and the XML file is written out for the Flash file to process.

Go to admin/appearance/settings/icompany and scroll down to the Slider setting. Change the selection to Piecemaker Slider

Click on the next tab down and start populating each image in the carousel. Note well that you need to make your images 1050px by 400px and not the 1170x450px as prompted. The dimensions suggested are for the other slider types included in the theme that span the entire web page width. Piecemaker 3D needs to sit inside its own div containers. Furthermore, the ratios are slightly different as I discovered to my cost Sad Now the fields - I copied my images to a directory below the standard image area - /sites/default/images/slider. The target link for the image should be a valid landing page, and ideally pertinent to the image you are showing. In my case, it's the portfolio narrative item for the experience the image is showing.

If you now save your carousel settings then navigate to your homepage (remember to flush your browser's cache also) you should see your completed slider. However, there is a bug we still need to deal with...

Clicking on Info shows the heading and caption associated with the image. However, there is a bug in the previously mentioned template.php file - when it writes out the XML file it uses the H2 tag for the heading text and not H1. This can be fixed by either editing the template file or the css file. I elected to edit the css file...

Change the /sites/all/themes/icompany/sliders/piecemaker/piecemaker.css file

/* CSS Document */

H2 {
        font-family: Verdana;
        font-style: bold;
        font-weight: normal;
        color: #222222;
        display: block;
        font-size: 20px;
        margin-bottom: 10px;
        line-height: 30;
        text-align: left;
        letter-spacing: 0px;

Note how I've changed the H1 to H2 so the XML finds the correct tag. You can take this opportunity to edit the tag to how you want it output in the info box.

That's all there is to it Smile

Jun 02 2013
Jun 02

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/--/ |-/'

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

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

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,

[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 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.
<VirtualHost *:80>
DocumentRoot "/srv/www/htdocs/portfolio"
ServerName portfolio.localhost
        ServerAlias portfolio.localhost
RewriteEngine On
RewriteOptions Inherit

<Directory /srv/www/htdocs/portfolio>
Options -Indexes +FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all

Next an entry to the hosts file is required to ensure you can actually point a browser at your site.
/etc/hosts 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>

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 

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

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> source InnoCompany-2013-04-20T23-16-41.mysql;
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)


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.

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.

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


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