We have moved! This is an old website which is no longer officially supported.
Visit us at the new ImpressPages website.
Join us on Facebook Follow us on Twitter Subscribe to our RSS feed

Guide to free ImpressPages CMS themes

Though we recently launched a marketplace where you can both buy and sell ImpressPages themes, we have some wonderful themes that come for free and help newbies to get an idea of what ImpressPages CMS is all about. So here’s a brief overview of our example basic themes – Blank, QuickStart and Skeleton.

ImpressPages themes

Blank

Blank theme

Blank is a theme that is enabled by default when you install ImpressPages CMS so it’s intended both to show you the benefits of ImpressPages and to inspire you to start playing with your own designs.

Blank theme is clean and empty-ish, it features plenty of negative space. We chose standard black&white colors so the content on this theme is easy to read. It has standard blue color for links. We believe this theme is ideal for many different projects, yet it can be easily customized to suit even more of them.

Blank theme

Another great thing that the Blank theme capitalizes on is the 12 column grid that makes page layouting comfortable. You can create neat themes well optimized for mobile and desktop displays when applying this easy-to-use grid. All widgets take up the entire length of the screen regardless of its size – that’s the benefit of the new CSS structure we introduced with ImpressPages CMS 3.6.

Blank theme has two basic layouts for homepage and inner pages. It is fully responsive so your website is compatible with smartphones and tablets.

In the Theme Options panel, there’s a realtime preview feature lying within so you can play with settings such as colors, fonts and backgrounds, to name a few, and instantly see how the changes will look in your website!

As we already implied, the Blank theme has two layouts: the homepage one (to be used for default home pages) and a layout for inner pages. Both these layouts have common header and footer that are reiterated on the entire web site. For this reason, the layout files are split into separate files. The resulting _footer.php and _header.php files are included in both home and main files, which should give you an idea of how to split the layout into parts so duplicate code is avoided.

Blank theme is also the one that employs the benefits of LESS CSS styling. There’s a theme.less file that imports the layout files of your theme placed in a single folder, making the stylesheet code well organized and self-explanatory. Explore the code of config.less file with your IDE - you can make lots of tweaks there. This way you can change your website’s fonts, colors, gallery options or various borders. Of course, you can add your own variables and use them in your less files. If you use our default CSS for your widget styles, you have all these configuration options for your theme by default. 

QuickStart

Quickstart theme

QuickStart theme has the absolute minimum needed to show the structure of ImpressPages themes. It’s perfect for learning the basics of creating themes for ImpressPages so after playing with QuickStart for a while you can soon start building your own theme from scratch. This theme displays only a single block of content and a single menu. Also, QuickStart theme contains just two CSS files (it doesn’t employ LESS CSS), a single PHP file for layout and two theme setup files. 

LessSkeleton

This theme is intended to be used by intermediate and advanced web designers to create full featured themes in no time.   So, if you are a newbie, we would first recommend you to play around with, say, QuickStart theme, and only then you should explore the advanced features of LessSkeleton. You can download LessSkeleton theme from ImpressPages github – contrary to the Blank and QuickStart themes, this one is not included into ImpressPages by default, so you need to download it.

LessSkeleton has all the neat features (LESS CSS, configuration options, responsive widget styling), but no CSS. Because you are a professional, right?

This theme has a clearly defined structure and a great README file that contains enough material needed to start creating your own modern website themes.

To start creating your own theme based on LessSkeleton, rename the directory to your new theme name and modify the appropriate theme setup options in setup/theme.json file.

Then, create a homepage layout by modifying the sample home.php file. This LessSkeleton theme file has a statement <?php echo $this->subview('_header.php'); ?> This statement includes _header.php file, and that’s the recommended way of including the partial layout files.

Remove the stuff you don't need from theme.less file, create and import some new less files and do some styling for your theme.

LessSkeleton provides you with a sample configuration option 'wrapperColor' for real-time customization of background color. To add your theme options, edit the options section in theme.json file. To make real-time preview, add some scripts in options.js file. To access these options from your layout file, you can use getThemeOption method.

We’re sure you’ll have plenty of fun moments both playing and creating with ImpressPages! Don’t forget that there are plenty of other themes to download from ImpressPages Theme Marketplace! Also, those are just the basic free themes – we have more free ones for you to choose.

Write a comment

You must be logged in to comment.