How to install Drupal 7 with CKEditor and IMCE on Wampserver

Getting Drupal to work on Wampserver

Starting out with Drupal version 7 – using Drupal 7 tar.gz (the last current Drupal version)

This tutorial assumes that you have downloaded Wampserver (http://www.wampserver.com/en/ ) and installed it on the same computer that you intend to work on with Drupal. Once you have installed Drupal on your computer you will be unable to access your project at another computer terminal.

Setting up the Drupal Files

Go to Drupal.org and download Drupal 7 (http://drupal.org/download ).
Extract the files so you get the Drupal 7 folder
Start the Wampserver (under All Programs – left Microsoft logo) if it is not already running
Left-click on the Wampserver logo (Should be in the icons list in the bottom right corner of Windows) and then open the WWW Directory.
Move the Drupal 7 files into this directory
- If you want Drupal to be at the root level of your site, move all the files in the Drupal folder directly into the WWW directory
- If you want Drupal to be a sub-site, make a new folder in the WWW directory with your site name, and copy all the Drupal 7 files into it
Click on the Wampserver logo and open Localhost to begin the Drupal installation

Drupal Installation

If you installed your website to the root, it should open the Drupal install page. If not, then click on the site name (the name of the folder you created).
Select an Installation Profile, then Standard Installation, then Save and Continue.
Select English (or your language), then Save and Continue.
Set up the Database:
- Click on the Wampserver icon again, and select PHP My Admin.
- Create the database.
- Give the database the same name as your website name (no spaces or underscores___).
- Press create.
- Go back to the Drupal installation.
- Add the Data Base Name (same as site name), database user name (root), data base password (DO NOT ENTER ANYTHING!!)
- Click straight on Save and Continue.
If you followed the steps correctly, your Drupal installation will continue. If you get a big pink box at the top of the screen, there was an error creating your data base. Go back to PHP My Admin and Drop the database (delete it), then re-create, following all the steps above.
Configure your site:
- Alter local host to your website name.
- Add email, username (you) and a password (do not forget this password, there is no way to recover a Wampserver site if you forget the password).
- Alter Server Settings to your country, then Save and Continue.
Visit you new Site. Hurray – You have installed a basic Drupal site.

Install CKEditor module

Some modules need to be added to the Drupal site for you to be able to enter information into the website. The first one is CKEditor. This editor is a HTML editor, and is a text editor to be used inside web pages. It means that the text being edited on your website looks as similar as possible to that on the published website.

You will need to upload the module CKEditor which is available from Drupal.org.

On your newly created Drupal website click on Modules located on top menu.
Click install new module.
Open a new tab and search for CKEditor under Drupal.org
Download the CKEditor module - version 7 - recommended release (Green box only)( http://drupal.org/project/ckeditor ) from the Drupal.org site. Do not unzip it.
Go back to your own Drupal website and beside the heading ‘Upload a module or theme archive to install’ use the browse button to locate the CKEditor file. Install it.
Once the install is finished, it is safe to delete the original CKEditor.tar.gz file.

To make the CKEditor module work you need to install within the CKeditor - a completely different file. You obtain this file from a website http://ckeditor.com/download

In a new tab, go to http://ckeditor.com/download and download this ckeditor as well
To find the place within CKEditor module folder within the Wampserver, go into www directory, - your website folder, - sites, - all, - modules, - ckeditor. Click on the folder called ckeditor. This is where you now need to place the contents of the folder (not the folder itself) you got from http://ckeditor.com/download.

Install IMCE module.

The IMCE module is an image/file uploader and browser that supports personal directories and quota.
You will need download the IMCE module from Drupal.org(http://drupal.org/project/imce ). Again, leave it zipped. On the top menu of your Drupal website click on the Modules location. Beside the heading ‘Upload a module or theme archive to install’ use the browse button to locate IMCE file in the My Documents folder. Install.

Giving permissions for the CKEditor and IMCE modules

For the CKeditor and IMCE modules to work you need to give permissions within Drupal to get the functionally you will need.

Go to the top menu of the Drupal website.
On the top menu, click on Configuration - Content Authoring - CKEditor
There will be 2 entries to edit under the heading Profile, select Advanced, then click edit next to Filtered HTML
Set the File Browser settings to IMCE.
Repeat with Full HTML, then hit save

To set Full HTML as the default setting on all pages go to
Home » Administration » Configuration » Content authoring and then text formats.
Drag using the cross on the left hand side the -Full HTML- to the top of the list.
Click SAVE changes.

Removing grey background colour from tables in Bartik theme

The default theme for the Drupal site is Bartik. It has specified colours and font styles which you may want to change. To remove the grey background colour from tables in Bartik (default theme):

In your Drupal site, open up the themes settings, click on Bartik, select css, and find style.css
Open style.css with jEdit (http://jedit.org/ ), and go down to Table Structure
Remove any lines of code with rgba (225, 225, 0.18). for example, there were 4 lines of code at time of printing. Also change background colour above these lines to #ffffff
To delete Comments, you can go to Modules and un-tick Comment ( will disable Tracker & Forum automatically)

Altering banner color in the Bartik theme

To alter the banner color for the Bartik theme:

In your Drupal site, open up the appearance settings, select Bartik, then select settings
Alter the color set to Custom
Choose alternative color in Header top #color
If left like this you will have a 2 color graduated header. To alter also change Header Bottom.
You can untick Logo to delete the Drupal face.

Getting the desired text format under nodes

For EXISTING nodes, edit, select format and save. The editor will default to the last selected format from this point on.

For every NEW Nodes (default), Configuration > Content Authoring > Text Formats, then DRAG the desired default format to the top of the list. Click Save.

Change the viewed fonts under the Bartik theme to Arial

To change viewed fonts under BARTIK theme (Drupal default theme):

Go to Themes - Bartik – css
Open style.css with Jedit
Use the search function under jEdit to find font
Under font change all the viewed fonts to Arial, Helvetica, san-serif. (was "Lucida Grande", "Lucida Sans Unicode", sans-serif; Menlo, Consolas, "Andale Mono", "Lucida Console;Georgia, "Times New Roman", Times, serif;Helvetica Neue", Helvetica, Arial, sans-serif;Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;)
There should be 7 to change (but check to make sure all are done!!!).

Getting your completed website to work after you have transferred it from the Wampserver to your LAMP server on the net

You need to follow the follow the recommendation in the link http://cksource.com/forums/viewtopic.php?f=11&t=23066 to get the CKEditor working.

We found the suggestion in the CKEditor forum was:
“Do you see any errors in browser where CKEditor doesn't show ?
Please go to CKEditor's profile configuration (all 3 - global, advanced, default) and save them (without any change in it). This sometimes helps.”

Doing what was suggested in this forum worked for us and enabled the CKEditor to work on the LAMP server.