Knowledge Base / Category / e107 Gaia Bootstrap Pro theme

e107 Gaia Bootstrap Pro theme

HTML theme by Creative Tim ported for e107 CMS by Jimako

Live Preview Contact us for more info

Intro to e107 Gaia Theme

Basic information

e107 Gaia theme is e107 CMS theme based on Gaia Bootstrap3 HTML template by Creative Tim. The light version is not available anymore.
Important. After release e107 2.2.2 with the new way how to create e107 themes, Gaia will be rewritten together with the new versions of the theme plugins.  New download rules are planned for site members. 


Premium version:

HTML theme

e107 DEMO:


How to install this theme with demo content

This theme is not possible to install from directly.

Premium version:

This version is not possible to install from directly.

Manual Installation using FTP

- download zip packs from this site

- unzip them

- use an FTP client to access your host web server

- upload plugins to yoursite/e107_plugins

- upload theme to yoursite/e107_theme


clean install without leftovers from other themes (custom pages, menus etc)

- install the required theme plugins

- install the theme with demo content import

00:00 install e107 CMS

01:04 download needed plugins and theme

02:27 install plugins

03:02 install theme

03:11 import demo content

03:21 check result

HomePage setup

You should know what is FRONTPAGE and how to set homepage layout.
Possibility with homepage layout:

- change any other header with JM Theme plugin
- change any other footer with JM Theme plugin
- use any element on menuarea

In next version hardcoded elements in the homepage layout will be moved to demo content. For now open layout_homepage.php file and check/remove/reorder elements used there.

Slider section

This theme doesn't have any slider and core featurebox is not supported/tested.
This could change in the next versions if there is interest in this. But the original HTML theme has no slider. The standard bootstrap carousel should be supported by default. Not tested for now.

Welcome Message

The welcome message is not supported in this theme by default
The welcome message is hidden at the homepage layout.

If you want to use it, you can use inside the needed element.

This theme solves introduction different way.

Element - Image header

This element has 2 versions (templates) by default

You can use those elements anywhere on site, but they are most often used on homepage.
This element has 2 versions (templates)

Home - Grey Header


Freebie - Red Header


You can change texts, image, remove image etc.



Those are default elements added by demo installation. You can create your own ones too.

Element - Our Company

Element with heading, text and classic images (without hover and link)

Home Our company




There are more fields as it's needed. The shortcodes for all fields are displayed too to be able to change the template and add text fields if needed.

This element has ID first section to what image intro is scrolling after click on down arrow. If you change order or elements, you need to customize either anchor for down arrow button or section's ID.

Who we are

The same element only with 4 images (different template is used):

Element - Projects

There are prepared 2 different templates for text and gallery.

Home - Projects


You can set the different number of items.

Portfolio - Projects



In the demo only one set of values is used with both templates,

Specific for this element is hover effect on images with the possible link.

Element - Services

Some heading with icons
Available more templates:

Freebie - Our services


Index - Service Box


Index - Service Box Vertical


About us - Services


Pricing - Services


Element - Others

All section from Premium and Freebie HTML versions were prepared and templated. All are prepared as demo content.

Our team




Call to Action








Simple pricing







How to customize Gaia

Helpers and rules for customizing Gaia

How to customize Gaia without the losing possibility of next update

Basic rules:

- anything related to css (style, look) put to style_custom.css

- anything related to layout (headers, footers) - use JM Theme plugin and related folders inside the theme. Options depend on the theme. For example, OpenMind doesn't have Navbar builder, because there is just one option in the original theme.

- anything related to content (as the addition to core functionality) - use JM Elements plugin and related folders inside theme


This could be solved in many ways. After real using and trying many different themes we decided that:

- a static template is better than generated on the fly by user settings (how often you are changing the layout of your site and trying different headers?)

- sometimes you can switch colours by changing css file, sometimes you need to use different classes

- Theme plugin offers for the developer the possibility to try different settings without changing the site itself. Each theme has different options and it's possible that there are options we missed. Sometimes is easier to look at the original HTML theme and use the code. Navbar Builder just helps to show what shortcodes you can use.

Next is real testing with the new version of Gaia theme and finding that one shortcode is missing (no idea why at this moment). Solving this will be part of the next video.

EDIT: no video is needed. Gaia doesn't support search box in navigation. In next release, this option will be removed.

- change site background

This theme doesn't offer more than one set of colours. Any style customization needs to be done manually
Open file style_custom.css. If it doesn't exist, create new one inside theme folder (on the same level as style.css).
This file is never replaced with future theme updates.

Add there (replace #EEEEEE with your colour):

body {
  background-color: #EEEEEE;

.navbar-default {
 background-color: #EEEEEE;

.navbar-transparent {
    background-color: transparent;
.section {
  background-color: #EEEEEE;
/* color overlaying part of map */
.section-contact-us .contact-container .address-container {
  background-color: #EEEEEE;

It depends on your colour if more changes are needed.

- add top up button

This functionality is not part of the original theme. It will be part of the next release because this is a good idea.
Open footer templates (default and small).  Path:  theme/footers/


Add this code at the end of files (after closing footer tag)

<div id="back-top">
    <a href="#uiModal"><i class="fa fa-chevron-up"></i></a>


 #uiModal says where you will go after click on that button.  This tag is inserted by e107 itself, so we use it, otherwise some ID has to be added to headers or body. This is quick solution.


open style.css or style_custom.css file and add this code:

#back-top a:hover {
    background-color: rgba(228, 122, 128, 0.9);
#back-top a {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999999;
    color: #eee;
    background-color: rgba(228, 122, 128, 0.3);    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    padding: 10px;
    border-radius: 4px;
    text-align: center;

#back-top a i {
    font-size: 2em;

#back-top .fa {
    width: 30px;


background-color: rgba(228, 122, 128, 0.9);

the button of colour on mouse hover. If you want it lighter, change value 0.9  

background-color: rgba(228, 122, 128, 0.3);

the normal colour of the button (with 0.3 opacity is very light).  rgba(228, 122, 128) is RGBA version of #E47A80 - default colour of buttons (that "pink").   Change it to your used colour.

border-radius: 4px;

standard gaia radius for buttons.


Don't forget to clear browser cache (CTRL-F5). You should now see not working, but styled button.


open custom.js in the theme folder. Add this code (before last  });   )

// hide #back-top first
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
            } else {

        // scroll body to 0px on click
        $('#back-top a').click(function () {
                scrollTop: 0
            }, 500);
            return false;


by default (on first screen) is button hidden. After first scrolling light version is displayed with animation effect (fadeIn/fadeOut). 

After click on button scrolling to the top is animated.  500 is the speed of scrolling.

Source of this solution:  OpenMind theme.


If it doesn't work, check console for javascript errors (F12, tab Console).  You can see this in action in the Gaia demo.

Style Guide

In Progress. It was originally created for bootstrap4, so default code has to be downgraded.