Recent Content List e107 theming

How to use LAN string in template on 14 Jul 2020


{LAN=THEME_XXX} within the template.

How to rid favicon and use new way on 17 May 2020

 At first, you need to delete favicon.ico file from your root. And check if there is no one in the theme folder.

Then add to your theme class:

e107::link(array('rel'=>"title icon", "type"=>"image/png", "href" => THEME_ABS."images/title-img.png"));
e107::link(array('rel'=>"title icon", "type"=>"image/png", "href" => SITEURL.e_THEME."pure/images/title-img.png"));

How to replace VIEWPORT in theme.php on 01 May 2020

With version 2.3.0 you get debug error Please place all theme code inside the theme class.


define('VIEWPORT', "width=device-width, initial-scale=1.0");


e107::meta('viewport', 'width=device-width, initial-scale=1.0');

Theme configuration as shortcodes on 01 May 2020

The way how to use values from theme configuration as shortcodes

In theme_shortcodes.php  file:

function sc_theme_pref($parm) 

$name = $parm['name'];
return "";
$default = $parm['default'];

$value = $this->themePrefs[$name];

$value = varset($value, $default);

return $value; 



{THEME_PREF: code=header_width&default=container}

code: theme preference name

default: default value if the preference is not set 

Used in:


How to change emoticons size on 20 Apr 2020

Emoticons in version 2 are smaller than in version[...]

Css example for changing emoticons size

Create file style_custom.css in your theme folder if not exists (to avoid problems with update)
and add this code:

/* FIX for emoticon size */
img.e-emoticon {
width: 60px;

You can insert it directly in style.css if you know what you are doing.

File theme.php on 20 Apr 2020

Information you can find in theme.php

Basic description of file theme.php to understand when you open it and you are trying to change som[...]
Updated for version 2.3.0


You don't need to use those constants if you use libraries in theme.xml

define("BOOTSTRAP", 3);

define("FONTAWESOME", 4);

should be replaced in theme.xml file by:

bootstrap 3:

<libraries> <library name="bootstrap" scope="all"/> <library name="fontawesome" scope="all"/> </libraries>

bootstrap 4:

<libraries><library name="bootstrap" version="4" scope="all"/><library name="fontawesome" version="5" scope="all"/></libraries>

define('BODYTAG', '<body class="body-class '.THEME_LAYOUT.'">');

should by in theme.html replaced by

<body id="page-top" class="{LAYOUT_ID}" {BODY_ONLOAD} >


define('VIEWPORT', "width=device-width, initial-scale=1.0");

should be replaced in theme.php

e107::meta('viewport', 'width=device-width, initial-scale=1.0');

it is used for meta tag viewport in header_template.php (proper rendering and touch zooming if applicable)

No legacy stuff should be used in themes for version 2.2.2


There are still constants used in code from version 1 (I just let them there because default theme use them too):

define('OTHERNEWS_COLS',false); // no tables, only divs.

define('OTHERNEWS_LIMIT', 3); // Limit to 3.

define('OTHERNEWS2_COLS',false); // no tables, only divs.

define('OTHERNEWS2_LIMIT', 3); // Limit to 3.

define('COMMENTLINK', e107::getParser()->toGlyph('fa-comment'));


define('PRE_EXTENDEDSTRING', '<br />');

Update 2017/09: COMMENTLINK has default value in core, so no need to use it in theme.php, only if you want to have your own. Example of constants you can find in old themes:

Constant Description
define("STANDARDS_MODE", TRUE); Mainly IE ; correct boxmodel (legacy)
define("IMODE", "lite"); Icon-set use (eg forum dark/lite (legacy)
define("THEME_DISCLAIMER", "<br /><i>".LAN_THEME_1."</i>"); theme disclaimer (themeinfo)
define('WMFLAG', ''); Welcome message is not displayed at all, use {WMESSAGE=hide} now


load core libraries directly in theme.php is not needed anymore, theme.xml is enough

e107::library('load', 'bootstrap');

e107::library('load', 'fontawesome');

Where are core libraries files located?

You can find all information in Settings/Libraries.  

What paths are used depends if you use them locally or not.  


Note: from version 2.3.0 libraries should (could) be defined in theme.xml file, what is preferred way.  It doesn't mean you can't load them manually from the theme folder without libraries at all.

Load theme css and js files

For detailed information see Developer Manual Examples related to theming:

IE fix example:

e107::js('url','https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js','','2','<!--[if lt IE 9]>','');e107::js('url','https://oss.maxcdn.com/respond/1.4.2/respond.min.js','','2','','<![endif]-->');

Activate bootstrap tooltips :

e107::js("footer-inline", "$('.e-tip').tooltip({container: 'body'})");

Load scripts after JQuery:

e107::js("theme", "js/scripts.js", 'jquery');

Load translated strings


For Frontend your language strings should be a file with name English.php (or your language). For the Admin part, there should be an English_admin.php file (or your language). Both reside in the languages folder inside your theme.

Theme headers on 19 Apr 2020

 New e107 2.3.0

Magic shortcode Meaning Supported (tested) Note
Custom Header in theme.html  header   footer defined in theme shortcodes sc_header()

How is done in our themes:

{---HEADER---} - magic shortcode in theme.html

__construct in theme shortcodes class:

$this->sitetheme = e107::getPref('sitetheme');

Get correct extension (compatibility with older themes):

if (is_readable(e_THEME.$this->sitetheme."/theme.html"))
$this->file_extension = ".html"; //change to php if you use php code in header

else $this->file_extension = ".php";

With JM Theme plugin installed (variable headers for layouts)

$where = 'layout_theme = "'.$this->sitetheme.'" AND layout_mode = "'.THEME_LAYOUT.'" LIMIT 1 ';
$this->customlayout = e107::getDb()->retrieve('jmlayout', '*', $where );

With newer themes, it can be replaced with $this->file_extension = ".html";

* Special Header Shortcode for dynamic menuarea templates.
* @shortcode {---HEADER---}
* @return string
function sc_header()
$header = varset( $this->customlayout['layout_header'] , "header_default");
$headerpath = e_THEME. $this->sitetheme.'/headers/'.$header. $this->file_extension;

if(file_exists($headerpath)) {
$text = file_get_contents($headerpath);
else $text = '';
return $text;

File theme.xml on 17 Apr 2020

what elements in theme.xml mean

updated for version 2.3,0

See the new Bootstrap 4 theme.

Version 2 Description
<e107Theme name="Bootstrap 4" define the theme name
<e107Theme version="1.0" define the theme name
<e107Theme date="2018-06-24" define the theme date
<e107Theme compatibility="2.2.1" define the theme compatibility
<e107Theme livedemo='http://e107.org' Link to live demo
<author name ="e107" define the theme author
<author email="..." define email contact to the theme author
<author url="..." define the theme author website

Сategory used on e107.org. Allowed categories: generic, adult, blog, clan, children, corporate, forum, 

gaming, gallery, news, social, video, multimedia.

<plugins></plugins> List of plugins you can install directly from Theme manager. System checks if they are installed or not. If your theme needs some core or non-core plugins.
<stylesheets></stylesheets> If your theme has more css for color settings (with boostrap it’s easy), you can switch between them in theme manager
<layouts></layouts> Available layouts that you can define layout html files inside layouts folder. You can set pages with this layout, default layout and menus for this layout (you can set them in Menu manager too)
<libraries></libraries> The prefered way how to use libraries in theme now. Defining of bootstrap and font awesome constants is not recommended.
<glyphicons></glyphicons> Load different icon set in theme
<themePrefs></themePrefs> Default values for theme prefs. Theme prefs are defined in theme_config.php file.

Odd/even rows on 15 Apr 2020

When you need to have each other row displayed dif[...]

 In theme_shorcodes: 

private $odd = false;

create new shortcode for needed class

function sc_row_odd()
$this->odd = !$this->odd;

return ($this->odd) ? '' : 'class= " odd " ';

Use it template: 

<li {ROW_ODD}>

Next examples:

Agency2 theme:

function sc_timeline_inverted()
$this->pairing;{{ }}{{ }}
$this->pairing = !$this->pairing;

return ($this->pairing ? '' : 'class= "timeline-inverted" ');

Fix for core glyphicon icons on 18 Dec 2019

I use define("FONTAWESOME", 4);  but there are still glyphicons from the core on Frontend.

The list is from the Gaia theme, extended for martik (bootstrap4). Maybe some of them were fixed, not time to check

$('span.glyphicon.glyphicon-home').each(function() {
$(this).removeClass('glyphicon glyphicon-home');
$(this).addClass('fa fa-home');
} )

$('i.glyphicon.glyphicon-search').each(function() {
$(this).removeClass('glyphicon glyphicon-search');
$(this).addClass('fa fa-search');
} )

$('span.glyphicon.glyphicon-search').each(function() {
$(this).removeClass('glyphicon glyphicon-search');
$(this).addClass('fa fa-search');
} )

$('i.glyphicon.glyphicon-move').each(function() {
$(this).removeClass('glyphicon glyphicon-move');
$(this).addClass('fa fa-arrows');
} );

$('i.glyphicon.glyphicon-trash').each(function() {
$(this).removeClass('glyphicon glyphicon-trash');
$(this).addClass('fa fa-trash');
} );

$('i.glyphicon.glyphicon-lock').each(function() {
$(this).removeClass('glyphicon glyphicon-lock');
$(this).addClass('fa fa-lock');
} )

$('i.glyphicon.glyphicon-chevron-up').each(function() {
$(this).removeClass('glyphicon glyphicon-chevron-up');
$(this).addClass('fa fa-angle-up');
} )

$('i.glyphicon.glyphicon-envelope').each(function() {
$(this).removeClass('glyphicon glyphicon-envelope');
$(this).addClass('fa fa-envelope');
} )

$('i.glyphicon.glyphicon-print').each(function() {
$(this).removeClass('glyphicon glyphicon-print');
$(this).addClass('fa fa-print');
} )

$('i.glyphicon.glyphicon-flag').each(function() {
$(this).removeClass('glyphicon glyphicon-flag');
$(this).addClass('fa fa-flag');
} )

$('i.glyphicon.glyphicon-edit').each(function() {
$(this).removeClass('glyphicon glyphicon-edit');
$(this).addClass('fa fa-edit');
} )

$('i.glyphicon.glyphicon-share-alt').each(function() {
$(this).removeClass('glyphicon glyphicon-share-alt');
$(this).addClass('fa fa-share');
} )

$('i.glyphicon.glyphicon-cut').each(function() {
$(this).removeClass('glyphicon glyphicon-cut');
$(this).addClass('fa fa-scissors');
} )

How to add top up button on 15 Dec 2019

This is moved from Gaia theme because this is part of new version 2.4 already. But maybe this will b[...]

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.

How to change jquery source on 24 Oct 2019

For changing jquery (or removing) it you need them[...]

 In this issue is documentation to this topic

Warning: if you play with javascript, don't forget to turn off e107 caching or at least clear it if you don't see any changes

Just copy example of changing jquery to file theme_library.php inside your theme.  There is possibility that you need to rechange theme to load this addon again, if your theme is already active.

* @file
* Provides information about external libraries.
* Class theme_library.
class theme_library
* Provides information about external libraries.
function config()
return array();
* Alters library information before detection and caching takes place.
function config_alter(&$libraries)
// Override CDN library path. Make sure, CDN path is correct.
$libraries['cdn.jquery']['path'] = '3.1.1';

// Override local library path. Make sure, you have downloaded the files
// to 'e107_web/lib/jquery/3.1.1' folder with the same folder structure
// than 'e107_web/lib/jquery/2.2.4'.
$libraries['jquery']['path'] = '3.1.1';

It's important what you have set as your library source  (Preferencies / Libraries / Use CDN for core libraries = yes)

Now.  If you want just different version from the same source, example above works (for local version check official documentation)

But if you want the different source, you can play with library settings (good luck) or you can:

1. option

set not to use core source:

$libraries['cdn.jquery']['path'] = null;

and load jquery in your theme.php this way:

e107::js('footer', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js', "jquery" , 1 );


- if you use "url" - it's loaded in header

- if you don't use zone 1, it's loaded after core bootstrap libraries (if you don't use libraries for bootstrap, it's not important)

2. option

Change this in theme_library.php

$libraries['cdn.jquery']['library_path'] = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/';
$libraries['cdn.jquery']['path'] = '3.4.1';

This depends on your source, but example above works for this path: 


How to rid core or theme bootstrap files on 24 Oct 2019

Without messing with libraries

If you need to use your own bootstrap version and core or theme bootstrap files are still loaded, you can override them with theme_library.php file.

More information is in this issue: https://github.com/e107inc/e107/issues/1725

But I would use this only for changing jquery version nothing more. Too complicated in my opinion.

The easy and simple way is:

- check theme.xml file and look for element libraries. Delete it.  It looks like this.  This is way how e107 loads bootstrap itself without theme.php control. 

<library name="bootstrap" version="3" scope="all"/>
<library name="fontawesome" scope="all"/>

- check theme.php and look for e107::library() and delete it. This is way how your theme loads bootstrap files from library.

e107::library('load', 'bootstrap');
e107::library('load', 'fontawesome');

Then you can add your own files simply with e107::css() and e107::js()

For example, Hestia is using customized bootstrap, so it is loaded from the local folder.  With CDN just use a parameter for an external source.

e107::css("theme", "assets/css/bootstrap.css");
e107::css("theme", "assets/css/hestia.css");

Overriding core CSS classes on 14 Sep 2019

Defining And Overriding The Core CSS Classes

From old wiki:

Defining And Overriding The Core CSS Classes 

In 0.7 all the core stylesheets have been combined into just one: e107.css in the e107_files directory. You may wish to override the core style classes in this file and define them yourself. To do so, copy the css from the file and place it into your themes style.css.

Next, in your theme.php, place:

$no_core_css = TRUE;

This will tell the core not to output the to the e107.css. This way visitors browsers will only be requesting one external stylesheet - style.css in your themes folder.

We hope to be removing the core style sheet completely in a future release - so now is a good time to copy the styles to your themes style.css and override the core stylesheet as described above.

Version 2:

this works

define("CORE_CSS", false);

Magic shortcodes on 23 Aug 2019

 New e107 2.2.2

Magic shortcode Meaning Supported (tested) Note
Page title Forum, Downloads, News, Gallery, GSitemap, Vstore


Only for STYLE default or main
Actual breadcrumbs 

Forum, Downloads, News, Gallery, GSitemap, Vstore


Layout content in theme.html
Modal window in theme.html   header   footer for your own $LAYOUT['_modal_'] in theme.php
Custom Header in theme.html  header   footer defined in theme shortcodes sc_header()
Custom Footer in theme.html   header   footer defined in theme shortcodes sc_footer()
Themes folder path (THEME_ABS)

theme.html, *_layouts.html  header   footer

for use in a hardcoded path to images in HTML files
for body tag in theme.html  header old  $body_onload (default) is used only with this, without it, body tag is clean (for you to use anything)
unique layout text ID (layout-xxx)  in theme.html  header mainly for the body tag

File theme.html on 02 Jul 2019

The easiest way how to set theme layout


This file has to have this one magic shortcode to let e107 engine know where to output page content (it depends on layout settings)

<!-- Page Content -->

Everything above this code is considered as default header and everything bellow this shortcode is considered as default footer.  

Content of LAYOUT shortcode is defined in HTML layout files. 

This replaces:


and they are not needed anymore.

Using different headers is considered as the advanced topic and it's not officially supported. But it's easier now than before. With JM Theme plugin it's possible via admin area. 


The header is part of this file.  It starts with body tag, so global BODYTAG is not needed anymore. It ends before {---LAYOUT---}.

Example for bootstrap3 theme (the same code as in theme.php):

<body id="page-top" class="{LAYOUT_ID}" {BODY_ONLOAD} >
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="{SITEURL}">{BOOTSTRAP_BRANDING}</a>
<div class="navbar-collapse collapse {BOOTSTRAP_NAV_ALIGN}">
{BOOTSTRAP_USERNAV: placement=top}
</div><!--/.navbar-collapse -->


Footer is part of this file. It starts after {---LAYOUT---} . No closing body tag is needed.

Example of theme.html :

<body id="page-top" class="{LAYOUT_ID}" {BODY_ONLOAD} >

<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="{SITEURL}">{SITENAME}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<div class="collapse navbar-collapse" id="navbarResponsive">

<!-- Page Content -->

<!-- Footer --> 
<footer class="footer py-4 bg-dark text-white"> 
<div class="container"> 
<div class="content"> 
<div class="row"> 
<div class="col-md-3"> <h4>Navigation</h4>{NAVIGATION: type=main&layout=alt} 
<div class="col-md-3"> <h4>Follow Us</h4>{XURL_ICONS: template=footer} 
<div class="col-md-3"> {MENU=105} 
<div class="col-md-3"> {MENU=106}
<div class="container"> {NAVIGATION: type=main&layout=footer} </div>
<div class="container"> 
<p class="m-0 text-center text-white">{SITEDISCLAIMER}</p>
<!-- /.container -->

<!-- Javascripts and other information are automatically added below here -->
</body> <!-- This tag is not necessary and is ignored and replaced. Left here only as a reference -->

Used shortcodes:

  •   core shortcode for actual layout (the same as THEME_LAYOUT)
  • core shortcode for inserting specific code when page is loaded, see header_template.php in core/templates folder

Definitions on 24 Jun 2019

Basic terms

1.1. Theme

We call the THEME (for) all elements related to the graphical layout of your site: pictures, fonts, colours... All files related to the theme are saved in a unique folder.

1.2. Css

CSS (cascading style sheet) is used for all elements related to the style of your SITE. A font is a style, colour is a style, a font-size is a style... etc... A style is created using one (or more) file(-s) with .css as EXTENSION.

1.3. Bootstrap based theme

e107 is by default based on the Bootstrap framework, so Jquery library is loaded by default too. The term bootstrap based theme means that bootstrap is loaded into the theme on the frontend. The Admin area always uses the bootstrap3 theme. How to create a theme without jquery is not part of this tutorial. You can, of course, create a theme without bootstrap.

1.4. Header

In e107, the header is the part of your page BEFORE the main content (it can be on the top or/and the left part of the page). By default, the header is the same for ALL pages on site.  Now is header part of the layout HTML file. It starts with <body tag.

1.5. Footer

in e107 the footer is part AFTER main content. By default, the footer is the same for ALL pages on site. Now is footer part of the layout HTML file. No closing body tag is needed.

1.6. Menus

Menus or menu areas are places where the content of menus/blocks is displayed. Each layout has its own set of menu areas. In the code you can find it as .  For homepage is the content of Frontpage page (it's can be different for userclasses), otherwise content of desired page is displayed.  

Content should be rendered via tablerender() method and it has always 2 parts - caption and text. How those parts are displayed depends on used style in tablestyle() method. 

Related topics:

  • frontpage
  • welcome message 
  • tablestyle()
  • tablerender()

1.8. Templates

 The way how to add HTML markup to e107 shortcodes before the content is rendered. 

1.9. Layouts

new in 2.2.2

Html files to display different page layout for different page. What layout is used depends on theme settings. 

Before the global array $LAYOUT was used.  

Theme Folder Structure on 24 Jun 2019

Folder "e107_themes/your_theme"

Each theme is saved in a unique subfolder inside/as part of your e107_themes folder. The theme folde[...]
updated for version 2.2.2


Required files and folders:

  • theme.xml
  • theme.php
  • style.css
  • theme.html
  • layouts folder

Optional files and folders:

  • style_custom.css
  • theme_config.php
  • theme_library.php
  • install folder
  • image / assets folder
  • custom.js

Languages on 24 Jun 2019

If you use custom text in your theme, you should use LANs constants.

For frontend:  English.php

For admin:  English_admin.php


Frontend:  e107::lan('theme');

Admin: e107::themeLan('admin','bootstrap4', true);

Already used LANs for theme prefs in bootstrap 4 theme (example):

LAN_THEMEPREF_01 Inline CSS <br> between head tags
LAN_THEMEPREF_02 Inline JS <br> after body tag
LAN_THEMEPREF_03 Iframe code for google maps on Contact Page
LAN_THEMEPREF_04 Display standard menu with card look

Layouts on 24 Jun 2019


Other links

Follow us