How To Create A Drag & Drop Website

09/06/12
How to create a Drag & Drop website | ImpressPages 1.X CMS documentation
ImpressPages CMS News Docs Extensions Forum About
misaelvicente@... SEARCH
DOCUMENTATION 1.x
SEARCH DOCUMENTATION
Docs | Themes
Getting started Using ImpressPages Themes

Change theme Create theme Create additional menu Create unique menu generation class Change default HTML Custom widget layout Image cropping options Custom styles in text editor jQuery instead of Prototype Managed text blocks How to create a Drag & Drop website
How to create a Drag & Drop website

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.
Common tasks Common issues Configuration Plugins ImpressPages CMS Core Core API
Step 1 - Find the design you like

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 i m a g e s- there are all required images. File i n d e x . h t m l main HTML file. File l i c e n s e . t x t Creative Commons license. It means that this design is free to use, but you need to leave this license file intact. File s t y l e s . c s s CSS styles. Later in this tutorial we will see what exactly we need to do with them. Download Professional template
Watch our video tutorials
Step 2 - Download and install ImpressPages CMS

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 dont have one, use XAMPP or EasyPHP to install Apache on your computer. ImpressPages CMS installation steps: Download the ImpressPages CMS
www.impresspages.org/docs/working-with-themes/how-to-create-a-drag-drop-website/
1/12
09/06/12
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/gettingstarted/installation/ After a successful installation you should see a website with default design and content:
Step 3 - Create new theme

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 i p _ t h e m e s . By default there is one theme i p _ d e f a u l t . Lets create a new one. Our theme is called professional, so we will create new folder: p r o f e s s i o n a lin i p _ t h e m e s , next to folder i p _ d e f a u l t . 1. Put all your files from downloaded theme to newly created i p _ t h e m e s / p r o f e s s i o n a lfolder:
2. Copy i p _ c o n t e n t . c s sfrom 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.
2/12
09/06/12
3. Also copy b l a n k . p h pfrom i p _ d e f a u l tfolder to p r o f e s s i o n a lfolder. This file is used to generate RSS feed and other system tasks where no real HTML is involved. We dont need to do anything with this file. It just needs to be in the theme. 4. Rename i n d e x . h t m lfile to m a i n . p h p . The system looks for m a i n . p h pto get the HTML for the website layout. Now your files should look like this:
Step 4 - Switch website to new theme

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 i p _ c o n f i g . p h pfile. 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:
d e f i n e ( ' T H E M E ' ,' i p _ d e f a u l t ' ) ;/ / t h e m ef r o mt h e m e sd i r e c t o r y
to
d e f i n e ( ' T H E M E ' ,' p r o f e s s i o n a l ' ) ;/ / t h e m ef r o mt h e m e sd i r e c t o r y
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:
3/12
09/06/12
Our website has no style or design. This is because the browser cant find the CSS files at the moment.
Step 5 - Fix CSS styles

The website uses our newly created theme, but the browser cant find the CSS styles, because the CSS file is not in the same directory anymore. Open i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pfile. Line 18 should include:
< l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " s t y l e . c s s "m e d i a = " s c r e e n "/ >
We need to change this line to:

< l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " < ? p h pe c h oB A S E _ U R L . T H E M E _ D I R . T H E M E ;? > / s t y l e . c s s "
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: h t t p : / / w w w . e x a m p l e . c o m / i p _ t h e m e s / p r o f e s s i o n a l / s t y l e . c s s Look at our website. It is beautiful now.
Step 6 - Menu integration
4/12
09/06/12
The links on our website dont 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 i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pagain and change lines 31 - 37:
 < l ic l a s s = " a c t i v e " > < ah r e f = " # " > H o m e < / a > < / l i > < l i > < ah r e f = " # " > A b o u tU s < / a > < / l i > < l i > < ah r e f = " # " > P r o d u c t s < / a > < / l i > < l i > < ah r e f = " # " > S e r v i c e s < / a > < / l i > < l i > < ah r e f = " # " > C o n t a c tU s < / a > < / l i > 
to PHP code that generates menu:

< ? p h p
r e q u i r e _ o n c e( B A S E _ D I R . L I B R A R Y _ D I R . ' p h p / m e n u / c o m m o n . p h p ' ) ; $ m e n u T o p=n e wL i b r a r y \ P h p \ M e n u \ C o m m o n ( ) ; e c h o$ m e n u T o p > g e n e r a t e S u b m e n u ( ' t o p ' ,n u l l ,1 ) ;/ / $ z o n e N a m e ,$ p a r e n t E l e m e n t I d ,$ d e p t h L i m i ? >
Now we have our top menu working. Lets do the same with menu on the left. Change lines 86 109:
< l i > < h 2 > L o r e mI p s u m < / h 2 > < l i > < ah r e f = " # " > F u s c ed u in e q u ef r i n g i l l a < / a > < / l i > < l i > < ah r e f = " # " > E g e tt e m p o re g e tn o n u m m y < / a > < / l i > < l i > < ah r e f = " # " > M a g n al a c u sb i b e n d u mm a u r i s < / a > < / l i > < l i > < ah r e f = " # " > N e cm e t u ss e dd o n e c < / a > < / l i > < l i > < ah r e f = " # " > M a g n al a c u sb i b e n d u mm a u r i s < / a > < / l i > < l i > < ah r e f = " # " > V e l i ts e m p e rn i s im o l e s t i e < / a > < / l i > < l i > < ah r e f = " # " > E g e tt e m p o re g e tn o n u m m y < / a > < / l i > < / l i > < l i > < h 2 > V o l u t p a tD o l o r e < / h 2 > < l i > < ah r e f = " # " > N e cm e t u ss e dd o n e c < / a > < / l i > < l i > < ah r e f = " # " > M a g n al a c u sb i b e n d u mm a u r i s < / a > < / l i > < l i > < ah r e f = " # " > V e l i ts e m p e rn i s im o l e s t i e < / a > < / l i > < l i > < ah r e f = " # " > E g e tt e m p o re g e tn o n u m m y < / a > < / l i > < l i > < ah r e f = " # " > N e cm e t u ss e dd o n e c < / a > < / l i > < l i > < ah r e f = " # " > M a g n al a c u sb i b e n d u mm a u r i s < / a > < / l i > < l i > < ah r e f = " # " > V e l i ts e m p e rn i s im o l e s t i e < / a > < / l i > < / l i >
to PHP code that generates left menu:
< l i > < h 2 > S e r v i c e s < / h 2 > < ? p h p r e q u i r e _ o n c e( B A S E _ D I R . L I B R A R Y _ D I R . ' p h p / m e n u / c o m m o n . p h p ' ) ; $ m e n u T o p=n e wL i b r a r y \ P h p \ M e n u \ C o m m o n ( ) ; e c h o$ m e n u T o p > g e n e r a t e S u b m e n u ( ' l e f t ' ,n u l l ,1 ) ;/ / $ z o n e N a m e ,$ p a r e n t E l e m e n t I d ,$ d e p t h L i m ? > < / l i >
Now we have our menu working. We see default ImpressPages CMS menu items: Welcome, Lorem ipsum, Text, Photos, Video and other.
5/12
09/06/12
Step 7 - Output content of the page

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 i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pfile and replace lines 43 69:
< d i vc l a s s = " p o s t " > < h 1c l a s s = " t i t l e " > W e l c o m et oo u rw e b s i t e< / h 1 > < pc l a s s = " b y l i n e " > < s m a l l > P o s t e db yF r e e C s s T e m p l a t e s < / s m a l l > < d i vc l a s s = " e n t r y " > < s t r o n g > P r o f e s s i o n a l1 . 0 E n j o y: ) < / d i v > < d i vc l a s s = " m e t a " > < pc l a s s = " l i n k s " > < ah r e f = " # "c l a s s = " c o m m e n t s " > C o m m e n t s( 3 2 ) < / a > < / d i v > < / d i v >
<
to PHP code that generates actual page content:

< d i vc l a s s = " i p C o n t e n t " > < ? p h pe c h o$ s i t e > g e n e r a t e C o n t e n t ( ) ;? > < d i vc l a s s = " c l e a r " > < ! -> < / d i v > < / d i v >
Generated content requires additional styles. We can write them from scratch but it is easier to use the skeleton from the i p _ c o n t e n t . c s sfile. 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 i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h p and add new line somewhere near the line 18 before < / h e a d > :
< l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " < ? p h pe c h oB A S E _ U R L . T H E M E _ D I R . T H E M E ;? > / i p _ c o n t e n t . c
Now we can navigate through our website and see real content.
6/12
09/06/12
Step 8 - Fix title styles

Our content looks more like the default ImpressPages CMS installation and does not suit the whole website style. That is because content styles in i p _ c o n t e n t . c s soverride styles, described in s t y l e . c s s . So we need to copy some styles from s i t e . p h pto i p _ c o n t e n t . c s s . The title styles in s t y l e . c s sare described on line 146:
. p o s t. t i t l e{ m a r g i n :0 p x ; b a c k g r o u n d :# 4 4 4 4 4 4u r l ( i m a g e s / i m g 0 2 . j p g )n o r e p e a tl e f t5 0 % ; p a d d i n g :7 p x2 5 p x ; f o n t s i z e :1 . 4 e m ; }
We need to copy these lines to i p _ c o n t e n t . c s s . Then titles will look like they should. But in i p _ c o n t e n t . c s sfile 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 i p _ t h e m e s / p r o f e s s i o n a l / i p _ c o n t e n t . c s sto
. i p C o n t e n th 1 . i p W i d g e t T i t l e H e a d i n g{ m a r g i n :0 p x ; b a c k g r o u n d :# 4 4 4 4 4 4u r l ( i m a g e s / i m g 0 2 . j p g )n o r e p e a tl e f t5 0 % ; p a d d i n g :7 p x2 5 p x ; f o n t s i z e :1 . 4 e m ; } . i p C o n t e n th 2 . i p W i d g e t T i t l e H e a d i n g{ m a r g i n :0 p x ; b a c k g r o u n d :# 4 4 4 4 4 4u r l ( i m a g e s / i m g 0 2 . j p g )n o r e p e a tl e f t5 0 % ; p a d d i n g :7 p x2 5 p x ; f o n t s i z e :1 . 2 e m ; } . i p C o n t e n th 3 . i p W i d g e t T i t l e H e a d i n g{ m a r g i n :0 p x ; b a c k g r o u n d :# 4 4 4 4 4 4u r l ( i m a g e s / i m g 0 2 . j p g )n o r e p e a tl e f t5 0 % ; p a d d i n g :7 p x2 5 p x ; f o n t s i z e :1 . 0 e m ; }
Also, the list styles described in i p _ c o n t e n t . c s sdont suit our current style. We will just remove unnecessary styles and leave the default browser list styles. Remove these lines from i p _ t h e m e s / p r o f e s s i o n a l / i p _ c o n t e n t . c s sfile near line 94:
. i p C o n t e n tu l , . m c e C o n t e n t B o d yu l{ l i s t s t y l e :n o n e ; m a r g i n :1 0 p x01 0 p x1 5 p x ; p a d d i n g :0 ; } . i p C o n t e n tu ll i , . m c e C o n t e n t B o d yu ll i{
7/12
09/06/12
b a c k g r o u n d :t r a n s p a r e n tu r l ( i m a g e s / l i s t . g i f )n o r e p e a ts c r o l l6 p x9 p x ; l i n e h e i g h t :2 0 p x ; m a r g i n :0 ; p a d d i n g :0001 8 p x ; }
Now our website content looks good. Press ctrl + F5 to force refresh if what you see is not like the picture:
Step 9 - Content management

The administration area will not work until you add the required JavaScript to the head section of the layout file. Open i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pfile and add this line before < / h e a d >near line 20.
< s c r i p ts r c = " < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > j s / d e f a u l t . j s " > < / s c r i p t >
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/usingimpresspages/content-management/
Step 10 - Images
Default image settings dont match the layout width. Thats why the photo gallery has additional space at the right and the big photo goes out of the page.
8/12
09/06/12
We need to sign in to administration panel and change photo cropping parameters to fit our new style. Change a single photo width: add a d m i n . p h pat the end of your website URL (http://www.example.com/admin.php) and login. go to tab D e v e l o p e r>M o d u l e sc o n f i g click C o n t e n tm a n a g e m e n ton the left if it's not selected press yellow folder icon on line W i d g e t :P h o t o change P h o t ow i d t hparameter value to 562 Change photo gallery cropping width and height: go to tab D e v e l o p e r>M o d u l e sc o n f i g click C o n t e n tm a n a g e m e n ton the left if it's not selected press yellow folder icon on line W i d g e t :P h o t og a l l e r y change P h o t ow i d t hparameter value to 127 change P h o t oh e i g h tparameter value to 100 Additionally you can change the B i gp h o t ow i d t hand B i gp h o t oh e i g h t 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.
Step 11 - Lightbox
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 i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pfile and add new line before < / h e a d > . This line includes required CSS styles:
9/12
09/06/12
< l i n kr e l = " s t y l e s h e e t "h r e f = " < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > j s / l i g h t b o x / c s s / l i g h t b o x . c s s "t y p
Then add these lines at the end of i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pfile before line.
< ! -p o p u p s> < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > j s / l i g h t b o x / j s / p r o t o t y p e . j < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > j s / l i g h t b o x / j s / s c r i p t a c u l o < s c r i p tt y p e = " t e x t / j a v a s c r i p t "s r c = " < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > j s / l i g h t b o x / j s / l i g h t b o x . j s < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > / /< ! [ C D A T A [ L i g h t b o x O p t i o n s . f i l e L o a d i n g I m a g e=' < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > '+' j s / l i g h t b o x / i m a g e s / L i g h t b o x O p t i o n s . f i l e B o t t o m N a v C l o s e I m a g e=' < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > ' / / ] ] > < / s c r i p t > < ! -s p o p u p s>
It is a JavaScript that will handle mouse events and show large version of image. Now our images open like that:
Step 12 - Search box

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 i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pfile and replace the code below (near the lines 70 75):
< f o r mm e t h o d = " g e t "a c t i o n = " " > < f i e l d s e t > < / f i e l d s e t > < / f o r m >
with:
< ? p h p e c h o$ s i t e > g e t Z o n e ( ' s e a r c h ' ) > g e n e r a t e S e a r c h B o x ( ) ; ? >
ImpressPages CMS generated form looks different. Thats why we need to change CSS styles to adapt the search box to our new design. Open i p _ t h e m e s / p r o f e s s i o n a l / s t y l e . c s sand add these lines at the bottom:
. m o d A d m i n i s t r a t o r S e a r c h I n p u t{ m a r g i n l e f t :2 0 p x ;
10/12
09/06/12
f l o a t :l e f t ; } . m o d A d m i n i s t r a t o r S e a r c h B u t t o n{ b a c k g r o u n d :# 4 4 4 4 4 4u r l ( i m a g e s / i m g 0 2 . j p g )n o r e p e a t3 p x5 0 % ; m a r g i n l e f t :1 0 p x ; w i d t h :2 2 p x ; h e i g h t :2 2 p x ; t e x t s i z e :1 p x ; f l o a t :l e f t ; } # s e a r c h{ h e i g h t :9 0 p x ; }
Now your search box looks fine. If not, press ctrl + F5 to force refresh.
Step 13 - Logo
The logo has no link. Usually logo links to home page of website. Lets do that. Open i p _ t h e m e s / p r o f e s s i o n a l / m a i n . p h pand replace line 29:
< h 1 > < ah r e f = " # " > P r o f e s s i o n a l < / a > < / h 1 >
to
< h 1 > < ah r e f = " < ? p h pe c h o$ s i t e > g e n e r a t e U r l ( ) ;? > " > E x a m p l e . c o m < / a > < / h 1 >
If you would like to replace the text with a logo image (for example your_logo.gif), upload it to i p _ t h e m e s / p r o f e s s i o n a l / i m g e s /directory and replace line:
< h 1 > < ah r e f = " # " > P r o f e s s i o n a l < / a > < / h 1 >
to
< ah r e f = " < ? p h pe c h o$ s i t e > g e n e r a t e U r l ( ) ;? > " > / i
You can change i m g 0 3 . j p gwith any other image that is relevant to you, like y o u r _ l o g o . p n g .
Now you have your new website with new design. You can start dragging and dropping the content. Hope you like it. Write a comment
You are logged in as misaelvicente@gmail.com.
11/12
09/06/12
Name Link
Text *
Send
ImpressPages CMS Features Requirements License Testimonials Donate
Docs 2.x 1.x
Extensions Plugins 2.x Themes 2.x Translations Plugins 1.x Themes 1.x Contribute
About About ImpressPages CMS Team Logos and graphics Press Contact us
Follow us on
Copyright 2009-2012 by ImpressPages LTD All rights reserved. Terms of Use. Privacy Policy.
12/12

How To Create A Drag & Drop Website - ImpressPages 1

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

How To Create A Drag & Drop Website - ImpressPages 1

Transféré par

Droits d'auteur :

Formats disponibles

09/06/12

Getting started Using ImpressPages Themes

Step 1 - Find the design you like

Watch our video tutorials

Step 2 - Download and install ImpressPages CMS

Step 3 - Create new theme

Step 4 - Switch website to new theme

Step 5 - Fix CSS styles

We need to change this line to:

Step 6 - Menu integration

to PHP code that generates menu:

to PHP code that generates left menu:

Step 7 - Output content of the page

to PHP code that generates actual page content:

< l i n kr e l = " s t y l e s h e e t "t y p e = " t e x t / c s s "h r e f = " < ? p h pe c h oB A S E _ U R L . T H E M E _ D I R . T H E M E ;? > / i p _ c o n t e n t . c

Step 8 - Fix title styles

Step 9 - Content management

< l i n kr e l = " s t y l e s h e e t "h r e f = " < ? p h pe c h oB A S E _ U R L . L I B R A R Y _ D I R ;? > j s / l i g h t b o x / c s s / l i g h t b o x . c s s "t y p

Step 12 - Search box

ImpressPages CMS Features Requirements License Testimonials Donate

Docs 2.x 1.x

Vous aimerez peut-être aussi