Knowledge Base / Category / e107 OpenMind Theme

e107 OpenMind Theme

HTML theme ported for e107 CMS by Jimako

Live Preview Purchase Now

Intro to e107 OpenMind Theme

Basic information

OpenMind e107 theme is e107 theme based on licensed HTML template. You need to solve your own HTML license (we have only multisite) license. Without license, you got only e107 version without HTML assets.

Sources:

Limited version:

Limited version on e107.org doesn't contain HTML assets and needed custom plugins. It's not a working version. 

Custom theme means that we have an only a multisite license, so we can't share this theme as it is, we just can use it for our client/friend. 

This theme is not for free using.

Premium version:

HTML theme

e107 DEMO:

https://v2demo.e107.sk/openmind/

Download links:

JM Element plugin

JM Theme plugin

OpenMind Pro theme

Installation

The mandatory steps to get exact the same look as on the demo

How to install this theme with demo content
The mandatory steps to get exactly the same look as on the demo :

- recommended clean installation of e107. Default bootstrap3 theme is the minimal solution. With other themes, there can be reductant content.

- download and install JMTheme plugin, no change or configuration is needed

- download and install JMElements plugin, no change or configuration is needed

- install Featurebox plugin (check if it's installed)

Other plugins can be installed later. Those ones have demo content in this theme.

- download and install Open Mind. During installation use option import demo content.

This theme comes with full demo installation pack (file install.xml), but all default (demo) content is in separate files too. If anything goes wrong, you don't need to reinstall the theme, just use inbuilt XML import functionality and import full or only just part of the content.



If the site looks like on the demo page, it's correct. There is in next part showed how it should look with version 2.1.1

How to use JM Theme Options

How to use JM Theme Options
The theme has available the same colour sets as HTML theme.

- go to JM Theme plugin

- find menu Custom options

- select desired colour, save

- here you can change site header too. It has nothing with site title in preferences (title tag). It's just coloured title in theme header.

- here you can change copyright too. Theme has by default 2 types of footer. In both theme shortcode is used. If the year parameter is the same as the actual year, only the actual year is displayed. Next year from - to is added without any change.

D19411aa115b



How theme footer works

How theme footer works
This theme is very simple (in meaning that most of the changes are done by css, not by special css classes).

In version 2.1.1 are available 2 footers:

- default - 3 columns with full row copyright

- simple - only full row copyright

It's very easy to add new footer if it's needed. Just ask.

Each layout can have a different footer. Just select the layout in JMT plugin and then select footer from the dropdown box.


2c6ff82a1fd4


There are prepared 3 menu areas. If the footers for all layouts have the same content, set menus only for the default layout.

It's very easy to suppress this behaviour if it's needed. Just ask.

Navigation links in footer.

There are prepared 2 templates for footer links. 3 columns links or single column links. By default footer, link category is used, but it can be changed very easy.

- default footer areas use shortcode menu with those values:


8e3a9ee07ee7



Recent news in footer.

For news in the footer is news grid menu used. Only important thing is to set footer-recent-news template.


1e3fe002fbd9


Full Default Footer:


B16484a4b88c

Supported menus for sidebar area and plugins

What menus and plugins were tested with this theme

What menus and plugins were tested with this theme
Because this theme was originally used on e107.sk, most of core menus are templated.

Menus:

  • blogcalender menu
  • chatbox menu
  • login menu
  • forum plugin - new post forum posts menu
  • news grid menu - added new template col-md-12
  • news categories menu
  • online menu
  • search menu


Core plugins:
  • featurebox plugin
  • gallery plugin
  • download plugin
  • forum plugin
  • tagcloud plugin


Not core plugins:

  • links page plugin
  • calendar plugin
  • userlanguage plugin
  • tags plugin

How to set / change Frontpage content

What are options for Homepage content

What are options for Homepage content
This is a bit tricky. Normally a client selects from HTML theme and one homepage is prepared. With zip version, there are more options.

1. homepage layout

any page with this layout will have this look

the layout is hardcoded in layout_homepage.php file. There is always:

- Featurebox

- the content itself (result depends on what is set as Frontpage)

- the menu for variable content (MenuArea 2) under Featurebox

- news section with
{LATESTNEWS}
and
{LATESTPAGES}
theme shortcodes

- menu for variable content (MenuArea 4) under Featurebox

in demo Features and 2 columns news element are used in area2. By moving the menu to a different area you can reorder those items. You can use any elements in those 2 menu areas...

2. custom page template

Demo Home 2 is built as the page with the template Openmind Home 2 template.

The content of this template are only 2 elements (coloured features and services icons)

Combination of homepage layout + set this page as Frontpage you can get the new fully prepared homepage with the new look.

Or you can replace elements in the menu above to have the same result, but for demo purpose, it has to be the new page with the new template.

Any content itself of this page is ignored.


3. default page template + homepage layout

Elements example page is the next option. It uses the default template, so the content of this page is displayed.

If you set this page as Frontpage with homepage layout, you can create content directly on the page.

This is not common, so this page is most for examples of shortcodes used for available elements.

The same result you can get with welcome message shortcode.

Welcome message

The welcome message is by default removed from homepage layout. You can add it without code changing this way:

- add shortcode menu to menu area 2 on homepage layout

- use
{WMESSAGE}
as content for this menu and set id as jumbotron

If this is needed, special tablestyle for WM can be added

How to use Home 2 as Frontpage

This wasn't fully clear from the description above

How to change the content of Frontpage
 You can use this if you want those elements from Home 2 on your Frontpage without changing Frontpage settings.

You can either:

- look at page template used for Home 2 or just use elements images

1. changing 4 normal boxes for coloured boxes

- copy shortcode for those boxes

{ELEMENTS: mode=features&template=features}

- go to Menu Manager, select Homepage layout and edit first shortcode menu.

Instead {ELEMENTS: mode=mindfeatures&template=mindfeatures}  use {ELEMENTS: mode=features&template=features}

2. add the service element 

- copy shortcode for those services

{ELEMENTS: mode=services&template=services}

Then either replace 2 boxes element shortcode in shortcode_menu or add new shortcode_menu and insert this shortcode there.

How to fix a element

There is the bug in element template for four coloured boxes element, this is way how to fix it
Problem:  URL on 4 Coloured boxes doesn't work. 

Steps (general steps for any problem with elements):

1. find used keys 

- check options setting (mode) - for MindFeatures elements is mindfeatures, so you will look for the file with this name

- check template setting - default template key is mindfeatures.

You can get that information directly from shortcode:

{ELEMENTS: mode=mindfeatures&template=mindfeatures}

The mode value is code value (the unique name for the group of data). More elements can use the same option settings (if they use the same fields). 

2. open option file

- the path is always your theme folders/elements/options_mode.php, so in this case it's openmind/elements/options_mindfeatures.php

- check the name of needed fields, in this case, it is item_button and item_url  

Note: We try to use the same names for similar fields in  (section_ for header, item_ for items) but there could be older elements sometimes with different keys.

All used (editable) fields have key inuse as true, so there could be more fields but you don't see them in the admin area because they are not used (it saves time with developing new elements or their reusing with new theme)

It's good practice to insert relevant shortcode to the title, so you can copy shortcode directly from admin area. 

38

3. open template file

it uses standard template path (theme folder/templates/jmelements/)

find mindfeatures keys

Problem is there we forgot there hardcoded code and nobody noticed this until now.

<a href="#" class="btn btn-success pull-right">Read more</a>

Just replace this line with relevant shortcodes

<a href="{ITEM_URL}" class="btn btn-success pull-right">{ITEM_BUTTON}</a>

and it's fixed.

This will be fixed in the next release of OpenMind theme.

 

How to add buttons

How to add buttons to Four Coloured elements
 You successfully finished MindFeatures element (Four icons with hover effect and buttons), but you like coloured boxes more.

You need to know -

1. code for your data (in this case mindfeatures - default value, you could change it) (Note: you can create new set of data by copying original element and change code to features)

2. needed template - by default it's template from other element features  (Note: you can create new template key by copying existing features and change key f.e. features_buttons)

Your shortcode then will be

{ELEMENTS: mode=mindfeatures&template=features}

If you change it in the menu manager, at least colour should be changed, but buttons are missing.

Now open template file and find your template. 

Copy button code from mindfeatures template:

<a href="{ITEM_URL}" class="btn btn-success pull-right">{ITEM_BUTTON}</a>

and check result

Full template:

$JMELEMENTS_TEMPLATE['features']['start'] = '
<section>
<div class="container">
<div class="row">';
$JMELEMENTS_TEMPLATE['features']['item'] = '
<div class="col-md-3">
<div class="mind-box animated {ITEM_ANIMATION} {ITEM_CLASS} {ITEM_DELAY} ">
<h4 class="mind-box-title">{ITEM_TITLE}</h4>
<i class="{ITEM_ICON}"></i>
<p>{ITEM_DESC}</p>
<a href="{ITEM_URL}" class="btn btn-success pull-right">{ITEM_BUTTON}</a>
</div>
</div>
';
$JMELEMENTS_TEMPLATE['features']['end'] = ' </div>
</div>
</section>
';

With some other elements, maybe more customization is needed, but boxes are very similar.  

Ca22c2983bb8

Note:  if there would be missing some field (f.e. class), it's enough to add it to element settings (file option_yourselectedsettings.php)

Another way (if you don't want to use existing code for this):

- change setting for "4 Coloured boxes" element (from option_services.php to option_mindfeatures.php). This way you get new fields to fill for this element. But you still need to add them to the template.

How to use Webticker

How to extend this theme for JM Element 2.3 possibilities
JM Elements 2.3 version is fully compatible with OpenMind theme version 2.

How to use Webticker?

1. via the webticker menu

- then selecting openmind template is mandatory

- if you place menu at the top of menu area n2, then you need remove <section></section> tag from layout_homepage template (all sections have bottom padding 40px, so there is space under featurebox).

2. via shortcode

only place shortcode to file layout-homepage.php 

<section>
{FEATUREBOX|bootstrap3_carousel}
{WEBTICKER: template=openmind}
</section> <!-- carousel -->

C23b322292f7

Click on image to see the full picture.

If you need those colours, you need to add this css to your style_custom.css.  !important is required to use because webticker css is loaded in the footer (to load it only if menu or shortcode are used).

/* TICKER */
.ticker {
background: #5400ab!important;
}
.ticker .container:before {
background-color: #cc0261!important;
}
.ticker-title {
background-color: #cc0261!important;
}
.ticker-title:before {
border-bottom: 40px solid #cc0261!important;
}