How to create your own theme

You can always start from scratch if you feel strong enough and have some geeky attitude. However, it's always much easier to start from something and build on top of that. Default ImpressPages CMS theme is built just for that.

Let's start by preparing your own theme:

Copy default theme lt_pagan folder to the same directory and rename it to desired name (it should be a code name without special characters, ie. my_theme)
At this stage lt_pagan and my_theme folders are equal. Never work on default theme directly! It will always be your backup if you break something.
Open theme.ini file (in install folder inside your new theme) and change variables accordingly. At the minimum change the theme name (here you can put your name as fancy as you want, ie. "My best theme ever for $1M")
Go to "Administrator -> Theme" and click install on your new theme (you'll be able to update thumbnail later on when your theme will be ready)
Now you can modify main.php, site.css, ip_content.css files to your needs

main.php - main layout file

Go through the main.php file and get familiar with the code. Everything should be self explaining. If not, read the table below.

If you want to change your theme completely, keep in mind the minimal combination of the functions in your theme. It's shown below and each line explained in the table.

<?php if (!defined('CMS')) exit; ?>
<?php echo $this->doctypeDeclaration(); ?>
<html<?php echo $this->htmlAttributes(); ?>>
<head>

...Your CSS...
<?php echo $site->generateHead(); ?>
</head>
<body>
    ...Your HTML...

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

    ...Your HTML...

    ...Your Javascript...
    <?php echo $site->generateJavascript(); ?>
</body>
</html>

Row	Meaning
<?php if (!defined('CMS')) exit; ?>	Ensures that the template file will be included via ImpressPages CMS and will not be accessed directly.
<?php echo $this->doctypeDeclaration(); ?> <html<?php echo $this->htmlAttributes(); ?>>	Outputs doctype declaration. By default HTML5. Try not to write doctype declaration manually instead of this code. If you need diferent doctype, please change it in ip_config.php file.
<?php echo $site->generateHead();?>	Prints meta data (title, keywords, description). Adds required CSS Adds favicon Adds charset
<?php echo $site->generateBlock('main'); ?>	Generates main content of the page. In administration panel this is the place where you can drag your widgets (create content). You can add as many such blocks as you like, but you need to give them unique names.
<?php echo $site->generateJavascript(); ?>	Add required JavaScript files. They are placed befor closing body tag following HTML best practices. If you like, you can put them in the header.
<?php $site->addJavascript(BASE_URL.THEME_DIR.THEME.'/site.js'); ?>	Adds additional Javascript file (in example, site.js from the theme folder). Add this code before generateJavascript function.
<?php $site->addCss(BASE_URL.THEME_DIR.THEME.'/ip_content.css'); ?>	Adds additional CSS file (in example, ip_content.css from the theme folder). Add this code before generateHead function.

ip_content.css - styles for widgets and modules

ip_content.css is very important to make your theme complete and manageable. This CSS file describes the look of titles, text, galleries, contact forms, etc. In other words, all manageable widgets. The code below adds this file to the theme:

<?php $site->addCss(BASE_URL.THEME_DIR.THEME.'/ip_content.css'); ?>

Feel free to modify ip_content.css to your needs.

You can add additional CSS files in the same way. Make sure they go before generateHead function.

Lightbox

lt_pagan theme comes with Colorbox lightbox (jQuery plugin) by default. Styles are defined in colorbox.css (Colorbox comes with 5 predefined styles; just change the number in its path in main.php from 1 to 5 to switch them), plugin loaded with jquery.colorbox.js and it is turned on with the code in the site.js (the code below adds this file to the theme).

<?php $site->addJavascript(BASE_URL.THEME_DIR.THEME.'/site.js'); ?>

Feel free to modify site.js to your needs.

You can add additional Javascript files in the same way. Make sure they go before generateJavascript function.

Other elements

All other files can be modified upon your needs.

If you need to change the size of images, just change them in parameters.php file in install folder and reinstall your theme. All images will be recropped automatically and will nicely adapt to your new theme styles.

Write a comment

You must be logged in to comment.

Documentation 2.x and 3.x