Migration guide from ImpressPages 1.x themes

Here you will find main differences between ImpressPages 1.x and 2.x themes architecture

General idea is the same

Themes stay in the same ip_themes directory.
As before you can change current theme in ip_config.php file.
As before themes can have many layout files. By default there is one layout file - main.php
Menu generation class is the same. We plan to add some easier and / or more powerful functions in the future without breaking the compatibility.

Dynamic head section

In ImpressPages CMS 1.x branch CSS and JS files were hardcoded into theme. So you needed to remember which JS and CSS files are required by ImpressPages CMS itself. If plugin required its own JS / CSS files to be included, it could be done only manually by the developer.

Now in ImpressPages CMS 2.x branch all CSS and JS files can be included automatically. Any plugin can require its own CSS / JS files to be included into theme on the fly.

Read here for new ImpressPages 2.x themes syntax.

<?php

$site->generateContent();

?>

Now in ImpressPages CMS 2.x we can have as many content areas on each page as we like. So generateContent was replaced by generateBlock('blockName'):

<?php

echo $site->generateBlock('main');

?>

You can change 'main' to anything you like. But you can't have two blocks with the same value because they will conflict.

jQuery by default

jQuery is now default Javascript library.

Step by Step - how to transform your gorgeous 1.x theme to 2.x theme

1. Replace whole head section in main.php file to this code:

<?php if (!defined('FRONTEND')) exit; ?>
<?php echo $this->doctypeDeclaration(); ?>

<html<?php echo $this->htmlAttributes(); ?>>

<head>
<?php
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/site.css');
    $site->addCss(BASE_URL.THEME_DIR.THEME.'/ip_content.css');
    //add any other CSS files that are used by your theme
    $site->addCss(BASE_URL.LIBRARY_DIR.'js/colorbox/themes/2/colorbox.css');
    echo $site->generateHead();
?>
</head>

Add unique CSS files that are used in your theme.

2. Replace old ip_content.css with new one from default lt_pagan theme. In some cases it could conflict with your CSS rules. You can modify it if you like. But you need this new file because it adds styles for new ImpressPages CMS 2.x widgets.

3. Replace

<?php
echo $site->generateContent();
?>

with

<?php 
    echo $site->generateBlock('main'); 
?>

4. Replace all JS included at the bootom to (read the comment, too):

<?php
    $site->addJavascript(BASE_URL.LIBRARY_DIR.'js/jquery/jquery.js');
    $site->addJavascript(BASE_URL.LIBRARY_DIR.'js/colorbox/jquery.colorbox.js', 2);
    $site->addJavascript(BASE_URL.THEME_DIR.THEME.'/site.js');
    //add any other JS files that are used by your theme
    echo $site->generateJavascript();
?>

Copy site.js from default lt_pagan theme to your theme dir. It will initialize photo lightbox.

Keep in mind that content styles will be changed to default 2.x look. And there is no way around here. You need manually change new ip_content.css to adopt to your theme's styles. Possibly you will need to change some styles on sidebar or search field, too.

Write a comment

You must be logged in to comment.