Skip to main content

EF4 framework customization

 

Modify the template design with EF4 in few minutes!

 

 

Template files structure - for web developers

 

Template Files StructureTemplate based on   EF4 Framework
assets/config

On the Setting Storage tab in the template parameters, you can save all parameters into a file. All configuration files are stored in this directory by default.

All files are automatically generated and you do not need to edit them.
assets/layout

In this directory you will find configuration files for each available layout. These files contain information about the block structure for Layout Builder.

All files are automatically generated and you do not need to edit them.
assets/style

In this directory you will find configuration files for each template style. These files contain information about menu assignments for available layouts of each template style. The file name contains a template style ID, for example assigns-9.json (template id is 9).

All files are automatically generated and you do not need to edit them.
cache

If the CSS and/or JS compressor is enabled in the template parameters, then the cached files are stored in this directory.

All files are automatically generated and you do not need to edit them.
css

Most of CSS files are compiled from LESS files and you do not need to edit them:

  • bootstrap_responsive_rtl.css
  • bootstrap_responsive.css
  • bootstrap_rtl.css
  • bootstrap.css
  • comingsoon.css
  • offcanvas.css
  • offline.css
  • template_responsive.css
  • template_rtl.css
  • template.css
  • and all files related to the extensions, for example, djmegamenu.css, djclassifieds.css, etc.

The following files are not compiled from LESS files and you can edit them if needed:

  • custom.css - stylesheet for custom styles. A customer can put custom styles here.
  • error.css - error page stylesheet
  • print - print page stylesheet
  • template_params.php - it loads PHP code as CSS styles. We use this file for the Advanced Selectors which you can find in the template parameters under the Font Settings tab.

In the CSS directory you will find also source maps for LESS files:

  • *.map - thanks to them, you can use a web inspector to inspect LESS files. They are generated automatically so you should not edit them.

The file names may contain a template style ID. Each template style has separate CSS stylesheets since you can save different settings (for example colors, fonts, template width, etc) for them. For example:

  • bootstrap_responsive_rtl.14.css
  • bootstrap_responsive_rtl.11.css
  • bootstrap_responsive_rtl.9.css
fonts On the Font Settings tab in the template parameters, you can upload a generated web font and assign it for the template fonts. The uploaded font is stored in this directory.
html

Directory of layout overrides. More details:

Layout overrides in Joomla

Understanding output overrides
images

Directory of template images.

If you create a color version as separate template style you may need to use some different template images for them. There is an additional template parameter to choose a path to images. This way you can choose a different path for images for each template style, for example:

  • images/scheme1
  • images/scheme2
  • images/scheme3
js

Directory of template scripts.

For custom scripts you need to create custom.js file in the JS directory. It will be automatically loaded into the head section of your template. Placing custom scripts in the custom.js file is a good practice because this file will be not overridden if you update your template package in the future. More details about the custom.less file:
How to add custom JS scripts to Joomla template based on EF4 Framework?
language

Directory of template language files.
less

Directory of template LESS files.

  • less/bootstrap_responsive_rtl.less - main file of Bootstrap responsive LESS styles for RTL languages
  • less/bootstrap_responsive.less - main file of Bootstrap responsive LESS styles for LTR languages
  • less/bootstrap_rtl.less - main file of Bootstrap LESS styles for RTL languages
  • less/bootstrap.less - main file of Bootstrap LESS styles for LTR languages
  • less/comingsoon.less - LESS styles for coming soon page
  • less/djimageslider_responsive.less, less/djmediatools_responsive.less, less/djclassifieds_responsive.less, etc - Responsive LESS styles of extensions
  • less/djimageslider_rtl.less, less/djmediatools_rtl.less, less/djclassifieds_rtl.less, etc - LESS styles of extensions for RTL languages
  • less/djimageslider.less, less/djmediatools.less, less/djclassifieds.less - LESS styles of extensions
  • less/editor.less - LESS styles for typography and custom html code
  • less/joomla.less - LESS styles for Joomla views and modules
  • less/layout.less - LESS styles for template layout
  • less/menus.less - LESS styles for menu modules
  • less/modules.less - LESS styles for module designs
  • less/offcanvas.less - LESS styles for offcanvas panel
  • less/offline.less - LESS styles for offline panel
  • less/template_mixins.less - additional mixins for template LESS styles
  • less/template_responsive.less - LESS styles for responsive layouts
  • less/template_rtl.less - LESS styles of template for RTL languages
  • less/template_variables.less - template variables for template LESS styles
  • less/template.less - main file of template LESS styles

For custom styles you need to create custom.less file in the LESS directory. It will be automatically loaded into the head section of your template. Placing custom styles in the custom.less file is a good practice because this file will be not overridden if you update your template package in the future. More details about the custom.less file:
How to add your own CSS styles to Joomla template based on EF4 framework?
less/override

Directory of overrided Bootstrap LESS files.

The main library of Bootstrap is located in the plugin directory:
plugins/system/ef4_jmframework/includes/assets/template/bootstrap

If you need to add a customized Bootstrap LESS file into the template, you should copy the customized file to /less/override in the template directory.

You need to copy two versions of that file, for LTR and RTL languages:

  • less/override/ltr
  • less/override/rtl

Do not forget to change the file path in the main Bootstrap file. Let's take the form.less file as an example. If you copy this file to the /less/override directory, you need to edit the bootstrap.less file to uncomment the old path and add the new path:

old path:
@import "../../../plugins/system/ef4_jmframework/includes/assets/template/bootstrap/less/forms.less";

new path:
@import "override/ltr/forms.less";

The same in the bootstrap_rtl.less file:

old path:
@import "../../../plugins/system/ef4_jmframework/includes/assets/template/bootstrap/less-rtl/forms.less";

new path:
@import "override/rtl/forms.less";
lib/jm_template.php

This is a file for template PHP scripts.

In this file you can configure the following settings:

  • LESS files arrays - this is a very useful option for developers to reduce the duration of LESS files compilation. You need to create an array for main LESS files. The array should contain LESS files that are related/needed to compile the main files. This way you can avoid compilation of all files on page refresh if you modify one or few files only. Here is an example of the template.less array:

    $this->lessMap['template.less'] = array(
    'bootstrap_variables.less',
    'template_variables.less',
    'override/ltr/buttons.less',
    'template_mixins.less',
    //template
    'editor.less',
    'joomla.less',
    'layout.less',
    'menus.less',
    'modules.less',
    //extensions
    'djmediatools.less'
    );

  • template parameters related to LESS variables. Here is an example of the template parameters related to the scheme color LESS variables:

    $colorversion = $this->params->get('JMcolorVersion',
    $this->defaults->get('JMcolorVersion'));
    $bootstrap_vars['JMcolorVersion'] = $colorversion;


    Read more on how to add a new parameter.

  • paths for LESS files of extensions, since we load LESS files from the template LESS directory instead of the default themes for extensions. Here is an example code for replacing the theme paths with our own LESS files for the DJ-MegaMenu extension:

    // DJ-Megamenu
    $css_djmegamenu_theme = $this->CompileStyleSheet(
    JPath::clean(JMF_TPL_PATH.'/less/djmegamenu.less'), true, true);
    $css_djmegamenu_theme_rtl = $this->CompileStyleSheet(
    JPath::clean(JMF_TPL_PATH.'/less/djmegamenu_rtl.less'), true, true);
    $less_djmegamenu_theme = 'templates/'.$app->getTemplate().'/less/djmegamenu.less';
    $less_djmegamenu_theme_rtl = 'templates/'.$app->getTemplate().'/less/djmegamenu_rtl.less';
    // -------------------------------------
    // extensions themes
    // -------------------------------------
    $themer = (int)$this->params->get('themermode', 0) == 1 ? true : false;
    if ($themer) {
    // add LESS files when Theme Customizer enabled
    $urlsToRemove = array(
    'templates/'.$app->getTemplate().'/css/djmegamenu.css' => array('url' => $less_djmegamenu_theme, 'type' => 'less'),
    'templates/'.$app->getTemplate().'/css/djmegamenu_rtl.css' => array('url' => $less_djmegamenu_theme_rtl, 'type' => 'less');
    $app->set('jm_remove_stylesheets', $urlsToRemove);
    } else {
    // add CSS files when Theme Customizer disabled
    $urlsToRemove = array(
    'templates/'.$app->getTemplate().'/css/djmegamenu.css' => array('url' => $css_djmegamenu_theme, 'type' => 'css'),
    'templates/'.$app->getTemplate().'/css/djmegamenu_rtl.css' => array('url' => $css_djmegamenu_theme_rtl, 'type' => 'css');
    $app->set('jm_remove_stylesheets', $urlsToRemove);
    }
tpl

Available template layouts and blocks.

Examples of template main layouts:

  • tpl/content-left-right.php
  • tpl/default.php
  • tpl/left-right-content.php

The default.php is the main layout (left-content-right). It includes blocks from the "blocks" subdirectory. More about layouts and how to create them, you can read in Layout Builder section of EF4 documentation.
tpl/blocks/

Available template layout blocks. Template layout blocks are loaded in the main layout file.

Examples of template blocks:

  • tpl/blocks/bottom1.php
  • tpl/blocks/bottom2.php
  • tpl/blocks/footer.php
  • tpl/blocks/footer-mod.php
  • tpl/blocks/header.php
  • tpl/blocks/main.php
  • tpl/blocks/offcanvas.php
  • tpl/blocks/sample-block.php
  • tpl/blocks/system-message.php
  • tpl/blocks/top1.php
  • tpl/blocks/top2.php
  • tpl/blocks/top-bar.php
  • tpl/blocks/topmenu.php
  • tpl/blocks/head.php
component.php

Component page layout.
error.php

Error page layout.
index.php

Main index file. Since the template layout is moved to the blocks, you can keep this file untouched.
offline.php

Offline page layout.
template_preview.png

Large thumbanil of template. Default size is 640x384.
template_thumbnail.png

Small thumbanil of template. Default size is 206x150.
templateDefaults.json

Default values for PHP variables that are used in several files.

We have created a separate file to store the default values for PHP variables that are used in several files. This way, if you would like to change the default value for a variable you can do it in one place. Probably some of them are used in one file only, but we put them here altogether.

Example variable:

"JMcolorVersion":"#247fe1"

This variable is used, for example, in the lib/jm_template.php file:

$colorversion = $this->params->get('JMcolorVersion',
$this->defaults->get('JMcolorVersion'));
$bootstrap_vars['JMcolorVersion'] = $colorversion;
templateDetails.xml

Template information and parameters. In this file, you will find also the fields for Theme Customizer panel.

Parts you may need to change:

  • template name and version
  • template file structure
  • template module positions
  • template parameters

The default template parameters are common to many templates and we keep them in the EF4 plugin directory:
/plugins/ef4_jmframework/includes/assets/admin/params/template.xml

To load all parameters for the basic settings tab, it is enough to leave only the fieldset as follows:

<fieldset name="jmbasic" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BASIC_SETTINGS_LABEL"></fieldset>

In the same way, you need to load parameters for the rest tabs.

If you need to add an additional field into fieldset, it will be included on the top by default.
If you need to place it at the end, then you need to copy fields from the plugin and put them above the new field.

Template parameters structure:

  • basic settings
  • layout builder
  • font settings
  • color modifications - fields for color variables in the back-end
  • advanced features
  • storage settings
  • documentation
  • version

Theme Customizer parameters:

  • color modifications
  • font settings

 

How to translate EF4 Framework language files?

 

Is your language missing in EF4 Framework? Do not worry, you can translate the plugin quickly and easily. In this tutorial, you will learn all you need to create your own translation.

Download and unpack EF4 Framework package

Before we start translating, download the latest EF4 Framework package from your download area at Joomla-Monster.com. The package name is "plg_EF4-framework.zip". Unpack it.

Language files

Once you open the unpacked folder, you should see the framework directories and files:

plg_EF4-framework  └── includes  └── language  └── ef4_jmframework.php  └── ef4_jmframework.xml  └── gpl.txt  └── index.html

All language files are located in the "language" directory. This is how the directory structure looks like:

language  └── en-GB       └── en-GB.plg_system_ef4_jmframework.ini       └── en-GB.plg_system_ef4_jmframework.sys.ini  └── fr-FR       └── fr-FR.plg_system_ef4_jmframework.ini       └── fr-FR.plg_system_ef4_jmframework.sys.ini  └── pl-PL       └── pl-PL.plg_system_ef4_jmframework.ini       └── pl-PL.plg_system_ef4_jmframework.sys.ini  └── ru-RU       └── ru-RU.plg_system_ef4_jmframework.ini       └── ru-RU.plg_system_ef4_jmframework.sys.ini  └── sk-SK       └── sk-SK.plg_system_ef4_jmframework.ini       └── sk-SK.plg_system_ef4_jmframework.sys.ini

To do our translation we will base on the English language since it is always up-to-date. You need to duplicate the "en-GB" directory and change the duplicated folder and files names to a proper language tag. In our example, we are going to make a translation for the German language which has the "de-DE" language tag. So our language directory will look as follows:

de-DE  └── de-DE.plg_system_ef4_jmframework.ini  └── de-DE.plg_system_ef4_jmframework.sys.ini

If you do not know what is your language tag. You can see a list of Joomla language tags here:
https://community.joomla.org/translations/joomla-3-translations.html

Translation

The only file you really need to edit is "de-DE.plg_system_ef4_jmframework.ini". It includes translations for all labels and descriptions used in the plugin and template parameters. You can edit this file using any notepad app. Once you edit you will see something like this:

; *** THEME CUSTOMIZER *** PLG_SYSTEM_JMFRAMEWORK_THEME_CUSTOMIZER_LINK="More about Theme Customizer" PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_TEMPLATE="Template" PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_EXTENSIONS="Extensions" PLG_SYSTEM_JMFRAMEWORK_THEME_PREVIEW="Preview" PLG_SYSTEM_JMFRAMEWORK_THEME_RESET="Reset" PLG_SYSTEM_JMFRAMEWORK_THEME_SAVE="Save" PLG_SYSTEM_JMFRAMEWORK_THEME_SAVE_TO_FILE="Save as file" PLG_SYSTEM_JMFRAMEWORK_THEME_USERNAME="Username" PLG_SYSTEM_JMFRAMEWORK_THEME_PASSWORD="Password" PLG_SYSTEM_JMFRAMEWORK_THEME_LOGIN="Log in" PLG_SYSTEM_JMFRAMEWORK_THEME_LOGOUT="Logout" PLG_SYSTEM_JMFRAMEWORK_THEME_LOGIN_LEGEND="Want to store your modifications? Log-in as administrator." PLG_SYSTEM_JMFRAMEWORK_THEMER_WAIT="Loading Theme Customizer. Please wait..." PLG_SYSTEM_JMFRAMEWORK_THEMER_WAIT_APPLYING="Applying changes. Please wait..." PLG_SYSTEM_JMFRAMEWORK_THEMER_WAIT_SAVING="Saving changes. Please wait..." PLG_SYSTEM_JMFRAMEWORK_THEMER_WAIT_RELOADING="Template's configuration has been modified in the back-end. The page will be be refreshed." PLG_SYSTEM_JMFRAMEWORK_THEME_LOGIN_ERROR="You have to log-in as administrator to store the settings!" PLG_SYSTEM_JMFRAMEWORK_THEME_ACCESS_ERROR="You do not have permissions to store settings!" PLG_SYSTEM_JMFRAMEWORK_THEME_BAD_REQUEST_ERROR="Bad request!" PLG_SYSTEM_JMFRAMEWORK_THEME_SETTINGS_SAVED_TO_DB="Settings have been saved to your template." PLG_SYSTEM_JMFRAMEWORK_THEME_SETTINGS_SAVED_TO_FILE="Settings have been saved to following file: %s. You can load them via back-end control panel in Settings Storage tab." PLG_SYSTEM_JMFRAMEWORK_THEME_SETTINGS_SAVING_ERROR="Settings could not have been saved. Please check your file/directory permissions."

Let's take this line as an example:

PLG_SYSTEM_JMFRAMEWORK_THEME_USERNAME="Username"

PLG_SYSTEM_JMFRAMEWORK_THEME_USERNAME - this is a language constant. You do not touch this string.
Username - this is a language value. This part you need to translate to your language.

In German "Benutzername" means "Username" so my translation will look as follows:

PLG_SYSTEM_JMFRAMEWORK_THEME_USERNAME="Benutzername"

This way you need to translate all the rest language constants. It is easy, isn't it? Once you complete do not forget to save the file.

How to install translation

Now you need to move your translation on your server to get it work. You can do this in two ways:

1) Create a new zip package of the plugin and install it via Extensions Manager in Joomla back-end.
or
2) Copy the translated directory (in our example it is "de-DE") to the following location on your server:

/plugins/system/ef4_jmframework/language/

Do not forget to check if your language is set to default in Joomla back-end. That's it.

If you would like to share your translation with others, please contact us and we will add your translation to the official package.