Content / 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. 

It's written this way to be compatible with the actual released e107 2.2.1 version. But they are already preparing changes in the core that will change everything (HTML templates, psst :}

This is the reason for separate development repository.  

The main purpose of this theme is mainly to test all templates with bootstrap 4.  

The base of this theme are templates and snippets by startbootstrap, mainly this one: https://startbootstrap.com/templates/modern-business/

A lot of work before us, mainly because I will rewrite all my bootstrap4 theme to this standard.

 

Layouts

2.2.1 version is the latest version with using $LAYOUT in theme.php as the only option

 Available layouts: 

Name File name Default settings Note
default
default_layout.php set as default. Not recommended to change. this solves the problem with changing menus when you change the default layout
homepage
homepage_layout.php Used for Frontpage. 
full
full_layout.php forum, download, links_page
sidebar_left
sidebar_left_layout.php vstore,faqs
sidebar_right
sidebar_right_layout.php news
singlelogin
singlelogin_layout.php login, fpw classic login box, not modal, tested with signup too
singlesignup singlesignup_layout.php signup form with image tested with login too
singlecontact singlecontact_layout.php contact separate layout for the contact page. If the goal is able to do with the template, it will be removed. 
bare bare_layout.php guide for development purpose and documentation

Future changes:

Those layouts will be replaced by HTML templates.

Header

For testing navigation 2 header templates were prepared - default and dark.  Normally you will use only one, so use what you need.  By default dark is used.

Header

Default navigation:

Header

Footer

Just simple footer with site disclaimer is used for now.

Footer

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>