Installation of CouchCMS

Couch CMS has great function where designers are allowed to create complete static website and then turn it into dynamic one.

Step one – Download CouchCMS
First step is to download CouchCMS version 1.4 and unzip it.
Folder called ‘Couch’ will be created with all files needed. This is what all files look like –
1

Step two – Create database on your server
Creating database for CouchCMS is needed. To find out how to do it step by step, please read my post here.

Step three – Rename the file
Rename the file named config.example.php to config.php.

Step four – Add database details
Open config.php file and add database name, database user name, database password and MySQL host name which is usually localhost.
2

Step five – Rename folder
Make sure that original folder with all files has changed name otherwise it is easy to hack!!!! So do not forget to rename it and then upload to the server.

Step six – Add renamed couch folder into folder with HTML/CSS template and upload it to the server

Step seven – Run installation
To run installation of CouchCMS, type the URL of your website, for example: http://www.domain.com/couchcms

(do not forget to change it to your own website!)

1

Add details and click ‘Install’.

1

Step eight – Log in
1

Add your details and log in.

This is what admin section looks like straight after installation –
2

Getting stuck on Drupal 7 – decision to change CMS

I learnt how to create things that are necessary for creating website in Drupal 7. However, when I tried to put it all together and create own layout for the project, I could not get it working properly.

Things that did not work:

  • slide shows
  • gallery wasn’t working properly
  • creating layout that was needed did not work the way it should have
  • creating buttons

After spending enormous amount of hours trying to figure things out, decision to change CMS was made.

Reasons to change CMS:

  • not enough time to learn how to do things listed above
  • other projects going

Evaluation:

Drupal 7 is great CMS as it gives visual representation of content for client. It is professional and companies use it for projects therefore it is recommended to have knowledge of working with it. It is shame I do not have time to figure out things that I am stuck on at the moment, but I have learnt a lot as I was completely new to Drupal 7. I will pick up this CMS again and make sure that I will master my skills at it.

Adding gallery in Drupal 7 – Colorbox

Main feature of new Hull Ice Arena website are going to be pictures. This is why figuring out how to add slide shows and gallery into this website is necessary.

Gallery module research

Every function in Drupal 7 is added by installing the right module. Recommended gallery module with lightbox was called Colorbox. It uses jQuery, it is compatible with all browsers and supports photos, grouping, slide show, ajax, inline, and iframed content. All these features are well suitable for this project and that is why installation of this module was made.

Installation

Working with Colorbox

Go to ‘Configuration’ and find ‘Media’ section where Colorbox should be.
gfdgdfg

Choosing of different styles of Colourbox is allowed, speed of slide-shows etc. Choose the right setting for project and click ‘Save’.

Image field configuration is necessary so go to ‘Configuration’ and find ‘Media’ section and choose ‘Image styles’.

Click on ‘Add style’, name style and click ‘create new style’. There are settings of images that can be changed.
gfdgdfg
Click on ‘Update style’.

Go to ‘Structure’ and ‘Content types’ to default content types. Click on ‘Articles’ as it already has image option built in and then click ‘Manage fields’.
gfdgdfg

gfdgdfg

To activate Colorbox, go to ‘Manage display’ on top and select ‘Colorbox’ under format option.

gfdgdfg

To add image, go to ‘Add content’ and ‘Article’. Add title and text and choose what image should be uploaded.
gfdgdfg
gfdgdfg

Save it and this is the result –
gfdgdfg

Multiple upload for images

Go to ‘Structure’, ‘Content types’, ‘Manage fields’ and click on ‘Edit’.

gfdgdfg

 

Scroll down and find ‘Image field settings’ where choose ‘Unlimited’. This means that now unlimited images can be uploaded.
gfdgdfg

Changing navigation

When navigation is added into website, menu options are added there alphabetically. However, this is not suitable for any website as there always has to be certain order of buttons in navigation, for example Home, About, Gallery, Contact. If it would be alphabetically, example above would be About, Contact, Gallery, Home.

In Durpal 7, there is option to change this by ‘weight’. Smaller number is going to be always first in order.

menu order

That is why, setting weight to these numbers was needed to create navigation suitable for this project.

Changing theme to Bootstrap Business theme

Bootstrap Business theme in based on Bootstrap 3 framework and that is one of the reasons why it was decided to use for this project.

Another features:

  • responsive
  • HTML5/CSS3
  • 1,2 and 3 block layout available
  • big slide-show on the top of the page (requirement for this project)

Theme was installed the same way that was described in previous posts.

Layout of Bootstrap Business theme
regions in bootstrap theme

This layout of block fits very well into future layout of the site.

Changing layout

Go to Structure, Panels, Panel page. First of all, the Chaos Tools (www.drupal.org/project/ctools) and Panels modules (www.drupal.org/project/panels) need to be installed.

Fill in boxes and press ‘Continue’.
1 2

Then choose basic layout that is suitable for website.
3

Options to add CSS is provided
gfdgdfg

Option to add blocks or widgets to layout is allowed –
gfdgdfg

Click on little customize button next to ‘Center’ and it’ll take you to the window where you can decide what you want to add into layout –
gfdgdfg

Click on ‘Save’ and job is done.

There is also option to modify existing panels by moving them where it is suitable however, I could not figure out how to do it.

End result of changing layout

4

 

Browsers support of Bootstrap 3

Browsers support

Untitled456456

  • Internet Explorer 8-11 is supported on Windows
  • Chrome, Firefox and Safari is supported

The only thing that is not supported in Internet Explorer 8-9 are some of properties and tags from CSS3 and HTML5 and that is why using Respond.js is required to use.

Untitled.png472

Here is the link with full list of properties and tags that are not supported – http://caniuse.com/

Decision to use it

I have decided to use Bootstrap 3 because all browsers are supported and that is very good in terms of usability as users will be able to use the website on any browsers.

Hull City Council uses mostly Internet Explorer and this is supported by Bootstrap 3.

Blocks in Drupal 7

As mentioned in previous post, website consists of blocks (div tags).
Untitled43
To control these blocks, go to ‘Structure’, ‘Blocks’
Untitled61
There is list of all blocks on website and administrator can control them here.

Untitled62

Moving block on website

Choose what block needs to be move on website, for example ‘Search form’. Choose where block needs to be, this time I have chosen ‘secondary’.
Untitled63
Position of the block can be controlled –

  • To move blocks down, it needs to be set to +8 (this will put block at the bottom)
  • To move blocks up, it needs to be minus (-)

Save it and page will automatically refresh.
Untitled65

Creating block

Click on ‘Add box’, fill in details.
Untitled70
Choose in which themes and regions of themes will be block displayed.
Untitled71

Visibility setting are available where administrator can choose on what pages is block going to appear –
Untitled67

content of block –
Untitled66
Roles –
Untitled68
Users –
Untitled69

 

Save it.

The result

Untitled72

Finding and installing theme Bootstrap 3 (solving problem) + modules

Drupal 7 comes with loads of different already built and blank themes.

  • HTML, CSS is used for front end
  • PHP is used for back end
  • some of them are responsive

Default Drupal 7 theme was used till now as it is very basic and simple to use, however change is needed to make it look more professional.

Layout of Drupal 7 theme – generic layout
Untitled43

How to find more themes

To find more themes click on this link http://drupal.org/project/themes.
Make sure that version ‘7.x’ is chosen in ‘Core compatibility’ to get themes that are suitable for Drupal 7.
There are older versions of Drupal and themes will not work with this version.
Click search and find the right theme.

Untitled44

For this project, Bootstrap 3 is going to be used to build Hull Ice Arena website.
Untitled45

Installing a theme

Drupal 7 has a new feature that allows users to install themes with URL link.
There are two options how to install theme –

  • URL link
  • uploading downloaded files of theme

URL link option is quicker way to install theme and that is why it is going to be used for this project.

After choosing the right theme, scroll down and find ‘Downloads’. There are different versions but alway choose ‘Recommended releases’. Hoover over the link and copy the link.

Untitled46

Go to ‘Appearance’ and press ‘Install new theme’.
Untitled47
As seen on screen-shot, there is already default theme there.

Untitled48
Paste the URL link and click ‘Install’.

Untitled49

Click on ‘Enable newly added theme’ and find it in ‘Appearance’ and click ‘Enable and set default’.
Untitled50

Solving jQuery problem

Bootstrap 3 requires jQuery. Installing jQuery Update module is required.
(All modules can be find here)

Theme will be changed BUT error message will appear as jQuery has to be enabled.
Untitled52
Untitled51

After reading supporting material on Drupal 7 website, I found out how to do it.

Find jQuery Update in Modules. (Click here to view the link)
Untitled53

Copy link of recommended releases version and install module by clicking on ‘Modules’ and ‘Install new module’.
Untitled55

Paste the URL of the link and click ‘Install’.
Untitled56
Untitled57

Find installed module and tick the box next to it. Then click ‘Save configuration’.
Untitled59