EF4 framework customization
Modify the template design with EF4 in few minutes!
Template files structure - for web developers
Template Files Structure | Template based on |
---|---|
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:
The following files are not compiled from LESS files and you can edit them if needed:
In the CSS directory you will find also source maps for LESS files:
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:
|
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: |
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:
|
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: |
language |
Directory of template language files. |
less |
Directory of template LESS files.
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: |
less/override |
Directory of overrided Bootstrap LESS files. The main library of Bootstrap is located in the plugin directory: 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:
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: new path: The same in the bootstrap_rtl.less file: old path: new path: |
lib/jm_template.php |
This is a file for template PHP scripts. In this file you can configure the following settings:
|
tpl |
Available template layouts and blocks. Examples of template main layouts:
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:
|
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: This variable is used, for example, in the lib/jm_template.php file: |
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:
The default template parameters are common to many templates and we keep them in the EF4 plugin directory: To load all parameters for the basic settings tab, it is enough to leave only the fieldset as follows: 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. Template parameters structure:
Theme Customizer parameters:
|
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.