Documentation 1.x

Docs | Themes

How to create your own theme

  1. Copy default theme ip_default folder to the same directory and rename it to desired name
  2. Modify "main.php" file to your needs
  3. Change appropriate line in ip_config.php – define('THEME', 'your_folder_name');

Or download a blank theme and do it from scratch:

ImpressPages blank theme

Required theme elements

Theme should have default.js file included. ImpressPages CMS can't work without it. So, don't forget to add this line in header section of your theme:

<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/default.js"></script>

ImpressPages administration panel requires prototype. By default this library is added before closong </body> tag.

<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/prototype.js"></script>

Copy ip_content.css file from default theme to your theme. This css file describes look of titles, text, galleries, contact forms, etc. In other words, all manageable widgets. Add this line to your theme to include this file:

<link href="<?php echo BASE_URL.THEME_DIR.THEME; ?>/ip_content.css" rel="stylesheet" type="text/css" />

Feel free to modify ip_content.css to your needs.

What else you can add

In .php files of the theme you can add any PHP code to add required functionality. Here is common code snippets.

Open images in lightbox

You need to do two things to open images in lightbox:

1. Add lightbox css into header section of your theme:

<link rel="stylesheet" href="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/css/lightbox.css" type="text/css" media="screen" />

2. Add javascript. Usually before closing </body> tag:

<!-- popups -->
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="<?php echo BASE_URL.LIBRARY_DIR; ?>js/lightbox/js/lightbox.js"></script>
<script type="text/javascript">
  // <![CDATA[
  LightboxOptions.fileLoadingImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>' + 'js/lightbox/images/loading.gif';
  LightboxOptions.fileBottomNavCloseImage = '<?php echo BASE_URL.LIBRARY_DIR; ?>' + 'js/lightbox/images/closelabel.gif';
  //]]>
</script>
<!-- popups -->

If you like to use jQuery

Here is a manual how to switch from Prototype to jQuery in your theme.

Comments (1)

Tshepo

Tshepo

Hi
I cant really get this write can you guyz make a video or sumthyn.

Write a comment

You must be logged in to comment.