Detailed tutorial on how to build a Drag & Drop managed website starting from HTML / CSS design files. We will use a free HTML / CSS template as an example but you can use this tutorial to integrate ImpressPages Drag & Drop CMS into your own HTML / CSS.

We will use free design template called “Professional” from http://www.freecsstemplates.org. Name can be smarter but it looks quite nice and HTML / CSS work is already done and it is free. We will use it to create our theme.

Design archive has:

• Folder images - there are all required images.
• File index.html – main HTML file.
• File license.txt – Creative Commons license. It means that this design is free to use, but you need to leave this license file intact.
• File styles.css – CSS styles.

Later in this tutorial we will see what exactly we need to do with them.

Now we need to install ImpressPages CMS. Later we will integrate our HTML into it.

To install ImpressPages CMS you will need a hosting solution with PHP 5.3 and MySQL. If you don’t have one, use XAMPP or EasyPHP to install Apache on your computer.

ImpressPages CMS installation steps:

• Download the ImpressPages CMS
• Extract downloaded files to the folder on your server where you want the CMS to be installed.
• Login to your hosting provider and create a database. If you work on localhost you can do that using phpMyAdmin.
• Then type appropriate URL in your browser. You will see the installation wizard. Follow the instructions until the installation completes.

By default, database host is "localhost" but with some hosting providers or software it could be "127.0.0.1". Check with hosting provider if needed.

Default login information when working with installation on your local computer (with XAMPP or EasyPHP) is "root" (without quotes) for the username and empty field for the password.

Here is a video on how to do that: http://www.impresspages.org/docs/getting-started/installation/

After a successful installation you should see a website with default design and content:

To integrate our custom design, we need to create a theme. It is just a folder with HTML and CSS files. So we need to create a new theme and integrate our downloaded HTML / CSS files.

In ImpressPages CMS themes are stored in folder ip_themes. By default there is one theme ip_default. Let’s create a new one. Our theme is called “professional”, so we will create new folder: professional in ip_themes, next to folder ip_default.

1. Put all your files from downloaded theme to newly created ip_themes/professional folder:

2. Copy ip_content.css from ip_default folder to professional folder. This file contains general styles used to style photo galleries, titles, contact forms and other manageable content. Later we will change it a bit to suit our needs.

3. Also copy blank.php from ip_default folder to professional folder. This file is used to generate RSS feed and other system tasks where no real HTML is involved. We don’t need to do anything with this file. It just needs to be in the theme.

4. Rename index.html file to main.php. The system looks for main.php to get the HTML for the website layout.

Now your files should look like this:

Now we have a new theme folder with all the required files, but we need to tell the system to use it instead of the default theme.

Open ip_config.php file. It is located in the root folder of your installation, next to other system files (see the image below).

Use any text editor such as Notepad++ or PSPad. The line we need to change is somewhere near line 62. Replace this line:

to

This is the step where we actually tell the system to use our new theme. Now we can check our website in the browser. It should look like this:

Our website has no style or design. This is because the browser can’t find the CSS files at the moment.

The website uses our newly created theme, but the browser can’t find the CSS styles, because the CSS file is not in the same directory anymore.

Open ip_themes/professional/main.php file. Line 18 should include:

We need to change this line to:

What happened here is that we pointed to the exact place where the CSS file is located. The PHP code will replace BASE_URL with your actual website URL (in our case www.example.com), THEME_DIR with “ip_themes” and THEME with “professional”. As a result the browser will get a full URL to the CSS file: http://www.example.com/ip_themes/professional/style.css

Look at our website. It is beautiful now.

The links on our website don’t work yet. It is just one static page. We need to replace the static hardcoded menu code to PHP code that will generate a menu from the database.

Open main HTML file ip_themes/professional/main.php again and change lines 31 - 37:

to PHP code that generates menu:

Now we have our top menu working. Let’s do the same with menu on the left. Change lines 86 – 109:

to PHP code that generates left menu:

Now we have our menu working. We see default ImpressPages CMS menu items: Welcome, Lorem ipsum, Text, Photos, Video and other.

Now regardless the page we are visiting, we always see the same content: “Welcome to our website …”. We need to replace that content in our template to PHP code that will generate actual page content.

Open ip_themes/professional/main.php file and replace lines 43 – 69:

to PHP code that generates actual page content:

Generated content requires additional styles. We can write them from scratch but it is easier to use the skeleton from the ip_content.css file. So, add a new line in head section of main.php file. It will tell the browser to include those CSS styles and use them to style content: text, titles and photos. Open ip_themes/professional/main.php and add new line somewhere near the line 18 before </head>:

Now we can navigate through our website and see real content.

Our content looks more like the default ImpressPages CMS installation and does not suit the whole website style. That is because content styles in ip_content.css override styles, described in style.css. So we need to copy some styles from site.php to ip_content.css. The title styles in style.css are described on line 146:

We need to copy these lines to ip_content.css. Then titles will look like they should. But in ip_content.css file we have three title styles: H1, H2, H3. So we will paste the same styles three times changing the size of font. To do that we need to replace lines 155 – 181 of ip_themes/professional/ip_content.css to

Also, the list styles described in ip_content.css don’t suit our current style. We will just remove unnecessary styles and leave the default browser list styles. Remove these lines from ip_themes/professional/ip_content.css file near line 94:

Now our website content looks good. Press ctrl + F5 to force refresh if what you see is not like the picture:

The administration area will not work until you add the required JavaScript to the head section of the layout file. Open ip_themes/professional/main.php file and add this line before </head> near line 20.

Now you can login using this address: http://www.example.com/admin.php and the credentials that you used in the installation process.

Watch the video how to manage content: http://www.impresspages.org/docs/using-impresspages/content-management/

Default image settings don’t match the layout width. That’s why the photo gallery has additional space at the right and the big photo goes out of the page.

We need to sign in to administration panel and change photo cropping parameters to fit our new style. Change a single photo width:

• add admin.php at the end of your website URL (http://www.example.com/admin.php) and login.
• go to tab Developer -> Modules config
• click Content management on the left if it's not selected
• press yellow folder icon on line Widget: Photo
• change Photo width parameter value to 562

Change photo gallery cropping width and height:

• go to tab Developer -> Modules config
• click Content management on the left if it's not selected
• press yellow folder icon on line Widget: Photo gallery
• change Photo width parameter value to 127
• change Photo height parameter value to 100

Additionally you can change the Big photo width and Big photo height parameters. They describe the size of large version of photo that is visible in popup.

Now the photos will be cropped correctly. But you need to delete old photos and add new ones because settings apply only to new images.

Browse through all other parameters to understand what you can change to better accomodate your needs. Or read more about widgets configuration.

Now when we press image it opens in separate window. Follow the instructions bellow to install a JavaScript lightbox. It will show your large images in a beautiful lightbox.

Open ip_themes/professional/main.php file and add new line before </head>. This line includes required CSS styles:

Then add these lines at the end of ip_themes/professional/main.php file before </body> line.

It is a JavaScript that will handle mouse events and show large version of image. Now our images open like that:

The search box does not work. It is just a static HTML form. We need to replace it with a functional search box, generated by ImpressPages CMS.

To make search field to work, open ip_themes/professional/main.php file and replace the code below (near the lines 70 – 75):

with:

ImpressPages CMS generated form looks different. That’s why we need to change CSS styles to adapt the search box to our new design. Open ip_themes/professional/style.css and add these lines at the bottom:

Now your search box looks fine. If not, press ctrl + F5 to force refresh.

The logo has no link. Usually logo links to home page of website. Let’s do that. Open ip_themes/professional/main.php and replace line 29:

to

If you would like to replace the text with a logo image (for example your_logo.gif), upload it to ip_themes/professional/imges/ directory and replace line:

to

You can change img03.jpg with any other image that is relevant to you, like your_logo.png.

Now you have your new website with new design. You can start dragging and dropping the content. Hope you like it.