Knowledge Base / Category / e107 Bootstrap4 free theme

e107 Bootstrap4 free theme

e107 theme by Jimako based by template framework for building a bootstrap 4 theme by Start Bootstrap

Live Preview Download

View on GitHub

Basic information

The theme is at the beginning of development.
This theme is prepared as the source (of inspiration) for new core bootstrap4 theme. 

e107 2.2.2 version

 Version 1.0 works only with version 2.2.2. There are examples of new functionalities:

- HTML layouts

- magic shortcodes

Layouts

e107 2.2.1 version is the latest version with using $LAYOUT in theme.php as the only option
New layouts are used if there is theme.html file.  

More about theme.html file

HTML Layouts for e107 version 2.2.2:

Name File name Default settings Note
home
home_layout.html Used for Frontpage. 
full
full_layout.html forum, download, links_page
sidebar_left
sidebar_left_layout.html vstore,faqs
sidebar_right
sidebar_right_layout.html news
singlelogin
singlelogin_layout.html login, fpw classic login box, not modal, tested with signup too
singlesignup singlesignup_layout.html signup form with image tested with login too
singlecontact singlecontact_layout.html contact separate layout for the contact page. If the goal is able to do with the template, it will be removed. 
bare bare_layout.html guide for development purpose and documentation

 

Header

Is everything above {---LAYOUT---} in theme.html file

Only 2 level menu is supported in this theme.

Footer

Is everything bellow {---LAYOUT---} in theme.html file

Simple footer:

Footer

Default footer:

Footer

It's 2 part's footer. The upper part is 4 columns footer.

- 1st menu area was replaced with sidebar navigation

- 2nd menu area uses social icons shortcode

- 3rd and 4th areas are not used yet

The down part consists of footer navigation and site disclaimer.

Featurebox

Standard bootstrap carousel is prepared 

Featurebox

How to add Featurebox to homepage layout:

- set this type of featurebox as default featurebox in FB preferences

- go to Menu manager, select Homepage layout and add featurebox menu to menu area 1.  This area has no caption, it uses bare tablestyle.

Howtouse

Full Page Image Slider Header 

How to make full page image carousel like here:

https://startbootstrap.com/snippets/full-slider/

Just change css for carousel item in style.css:

.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

or overrride default in style_custom.css

.carousel-item {
height: 100vh;
min-height: 350px;
}

Welcome message

 Welcome message use style wm, you can use this style for any element. It doesn't depend on ID now. 

Welcomemessage

Note: check for using masthead in any future template. I noticed they use it instead of the jumbotron.  

After this element, standard page content starts. 

Single Page - Contact

New:  possibility to add google map as theme preference.  

Contact

Contact layout is bare, all templating is done in contact template.

Layout

If you want the better look of contact info:

Contactinfo

just use any bootstrap4 html code in Site Contact Settings:

<h5>
<i class="fa fa-map-marker text-muted"></i> Address</h5> 
<p class="text-muted"> Abcxxxxxxxxxxxxxxxxxxxxx,
<br> xxxxxxxxxxxxxx,
<br> xxxxxxxxxxx 
</p>
<br> <h5>
<i class="fa fa-phone text-muted"></i> Live Support</h5> 
<p class="text-muted"> Xxxxxx Xxxxxx
<br> 99999999999999999999
<br> Mon - Fri, 8:00-22:00 
</p>
<br> <h5>
<i class="fa fa-building text-muted"></i> Business Info</h5> 
<p class="text-muted"> Xxxxxx Xxxxxx
<br> VAT · xxxxxxxxxxx
<br> IBAN · xxxxxxxxxxx
<br> Bank · xxxxxxxxxxx 
</p>

Style Guide