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. It comes in 2 versions. Gaia Light is based on the free version of this template, Gaia Premium is based on the PRO version.
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. 

Sources:

Light version:

Freebie version

Premium version:

HTML theme

e107 DEMO:

https://www.e107sk.com/demo/gaia/

Download links:

JM Element plugin

JM Theme plugin

Gaia Pro theme

Installation

How to install this theme with demo content

This theme is not possible to install from e107.org directly.
Light version:

Just download theme from e107.org or use Theme Manager / Find themes.
Find the theme:
05
Check the theme info:
04
Read the info:
03
Download theme:
02
Import demo content:
01
 

Premium version:

This version is not possible to install from e107.org 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

Recommendation:

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


Min

Freebie - Red Header


Min

You can change texts, image, remove image etc.

Cb9df249ac39

C2a7c4734a20

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


Min

Possibilities:

10c604f744f6

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):
Min

Element - Projects

There are prepared 2 different templates for text and gallery.

Home - Projects


Min

You can set the different number of items.
F393d22a52bb

Portfolio - Projects


Min

Ccef280288c4

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.
B26fed1896dd

Element - Services

Some heading with icons
Available more templates:

Freebie - Our services


Min

Index - Service Box


Min

Index - Service Box Vertical

Min

About us - Services


Min

Pricing - Services


Min

Element - Others

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

Our team

Min



Counters


Min

Call to Action

Min


Clients

Min

Testimonials


 Min

Team


Min

Simple pricing


Min

FAQ


Min

1be5433b14f6

Cards


Min

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

Headers

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/

1. HTML CODE

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>
</div>

Explanation:

 #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.

2. FORMATTING

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;
}

Explanation:

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.

Note:

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

3. BEHAVIOUR

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

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

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

Explanation:

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.

Note:

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.