EF4 Framework gives a wide range of settings that will help you to configure template fast and easy. Let's take a closer look on them.

The template parameters are located in the back-end of template:

Extensions -> Template Manager -> [template_name]

 

Basic Settings

EF4 Basic Settings

Logo – choose an image to upload as logo for your site.
Leave empty or click on cross button if you do not want to display logo or you want to display a logo text only.

Logo text - enter a logo text as alternative to a logo image.
Logo text will be displayed only when you have not chosen any image to display as logo.

Site description – enter a site description.
It is usually displayed under logo or next to it.

Favicon image - choose an image to upload as favicon for your site.
It is usually displayed in the browser's address bar, on the browser's tab or in a list of bookmarks. Recommended size for a favicon is 16x16 pixels.

Font size switcher – enable or disable font size switcher.
It is usually displayed above the component area in template. This tool allows to enlarge or reduce the font size of the component area.

Back to top button – enable or disable "back to top" button.
It is usually displayed in the bottom corner or in the footer area of template. This button allows to smooth scroll to the top of page.

Offcanvas sidebar - choose if you want to display the offcanvas sidebar. Offcanvas is a sidebar with additional module position that can be displayed by clicking on a custom button.

Offcanvas width - enter the offcanvas sidebar width in pixels.

Offcanvas position - choose whether to display the offcanvas sidebar on the left or right side of your template.

 

How to display the offcanvas sidebar on a website?

To display the offcanvas sidebar on your website you need to follow these steps:

Step 1: Make sure that you have enabled the offcanvas feature in the template parameters as described above.

Step 2: Create a custom HTML module with the following code:

<a class="toggle-nav menu"><span class="icon-align-justify"></span></a>

Publish the module on one of the available module positions in your template. It contains a button that a user can click to show or hide the offcanvas sidebar.

Step 3: Publish a module on the "offcanvas" module position. It is a module position inside the offcanvas sidebar.

TIPHow to create a custom HTML module?

Coming soon - choose if you want to display the coming soon page. It displays a countdown clock to count the time left to launch a website.

Coming soon date - choose a date when you plan to launch a website. The countdown clock will count the time left to that date.

Error page - select an article that you wish to display as custom 404 error page. Otherwise the standard error page will be used.

Responsive layout – enable or disable the responsive layout for tablets and mobile.
When disabled, your site will have the same width for all devices: desktops, tablets and mobiles.

Disable component – select the pages on which you want to hide the component area.
This feature can be useful for you, if you decide to publish only modules on one of your site's pages.

 

Layout Builder

EF4 Layout Builder

INFOWe have a separate section dedicated to the Layout Builder. Check it

 

Font Settings

EF4 Font Settings

On the Font Settings tab, you are able to change the font size and font family of the following texts and headings:

Base font – settings related to the whole template.
Base font is usually displayed for article and module content.

Horizontal menu – settings related to the horizontal menu.
It is usually published on the top of the template. In our commercial J3 templates we use DJ-MegaMenu and DJ-Menu for free ones.

Module headings – settings related to the module headings.

Article headings – settings related to the article headings.

Advanced settings – settings related to the specified selectors.
In the Selectors field you need to enter id's or classes for any template part to modify font settings. Remember to use comma to separate selectors.
For example: h1, #jm-top

Font Awesome support - enable this option if you want to load Font Awesome to the template's head.

There are 3 font types available to choose:

1. Font from the list

EF4 Font Settings

You can choose from the following web safe fonts:

  • Arial - Arial, Helvetica, sans-serif
  • Arial Bold - 'Arial Black', 'Arial Bold', Gadget, sans-serif
  • Arial Narrow - 'Arial Narrow', Arial, sans-serif
  • Tahoma - Tahoma, Geneva, Verdana, sans-serif
  • Verdana - Verdana, Geneva, Tahoma, sans-serif
  • Times New Roman - 'Times New Roman', Times, serif
  • Georgia - Georgia, 'Times New Roman', Times, serif
  • Courier New - 'Courier New', Courier, 'Andale Mono', monospace
  • Trebuchet MS - 'Trebuchet MS', 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif
  • Lucida Sans - 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', sans-serif
  • Impact - Impact, Haettenschweiler, 'Arial Narrow Bold', Charcoal, sans-serif
  • Palatino - Palatino, 'Palatino Linotype', 'URW Palladio L', Georgia, 'Times New Roman', Times, serif
  • Century Gothic - 'Century Gothic', 'Apple Gotic', 'URW Gothic L', sans-serif

2. Google webfont

EF4 Font Settings

All Google Fonts you can browse here: http://www.google.com/fonts

3. Generated web font

EF4 Font Settings

Uploading a generated web font:

EF4 Font Settings

To upload a new font to your server in order to use it on your site:

Step 1: Click on Browse to select the font files from your disk.

Step 2: Click on Upload to upload the font files on your server.

NOTEUpload at least 3 font formats and make sure the font files are named exactly the same.
Accepted font file extensions: *.ttf, *.eot, *.woff, *.svg. Example: arial.ttf, arial.eot, arial.woff, arial.svg.

 

Color Modifications

EF4 Color Modifications

On the Color Modifications tab, you can change colors related to the template design such as backgrounds, border colors, font colors and more.
Which elements will be available to change their colors on this tab, it depends on the template design.

How to change a color?

EF4 Color Modifications

Step 1: Choose a color from the palette or enter a hex code of desired color.

Step 2: Save settings.

INFOHow to add a new parameter to the Color Modifications tab?

NOTEIf you want to restore the default color values, simply remove the values from all fields and click on Save.

 

Advanced Features

EF4 Advanced Features

Theme Customizer – enable or disable the Theme Customizer panel on the front-end.

Theme Customizer login – enable or disable the Theme Customizer login form on the front-end.
If you log in to the Theme Customizer panel you will see additional buttons to save your settings.

Administrator restriction – when enabled only those users that are logged in and have administrator or manager permissions will be able to use Theme Customiser

INFOWe have a separate section dedicated to the Theme Customizer. Check it

Source Map (LESS) – enable or disable a source map for every LESS file that has been compiled to CSS. This way you will be able to inspect the code using a web developer tools to find a file location and line number of LESS styles. Please note that a web inspector must support source maps.

Code injection - add custom code into the head section if needed.
Here you can paste Google Analytics script, Google Webmaster meta tag or any other custom code which needs to be pasted into the head section of the template.

Compress CSS/Compress JS – enable or disable CSS/JS compressor. It will help you to optimize the load speed of your site.
How do the compressors work?
- files are merged into one file
- comments, tabs, spaces, new lines and other unuseful signs are removed
- response time is reduced

Compress HTML - enable or disable HTML compressor. The compressor removes comments, spaces and line breaks from the HTML code output.

Skip files - add CSS or JS files (file name or whole path) to be skipped during the compression. Each file should be added in a new line.

Purge cached files - use this button to delete merged JS and CSS files from the template cache folder.

Defer scripts loading - enable or disable defer loading of all scripts.
This option can improve your page speed loading, but turning it on may also cause javascript errors. You can exclude individual scripts which are causing bugs by listing them in the "Exclude scripts" field. jQuery and Mootools libraries are excluded from defer loading by default.

Excluded scripts - list of scripts that are excluded from defer loading by default, because of script dependencies.

Exclude scripts - add scripts (file name or part of the path) to be excluded from defer loading. Each file should be added in a new line.

Facebook Open Graph - enable the Facebook Open Graph protocol. It includes META tags that help your website to become a rich object for social graphs. This feature is related to Joomla content component.

Facebook APP ID - it is optional. The unique ID that lets Facebook know the identity of your site. This is crucial for Facebook Insights to work properly. Please see Facebook's documentation to learn more.

 

Settings Storage

EF4 Settings Storage

Stored settings - a list of previously saved settings files.
Choose the file and click the Load button to load settings or download them as file using the Download Settings button.

Upload settings - choose a file with stored settings and upload it.
The file will appear on the list of Stored settings option.

NOTEIE browser does not support uploading.

Save settings - save the template settings as file.
The file will appear on the list of Stored settings option.

NOTEYou have to save the template settings first in order to save them as file.

Storage location – location of the stored settings files on your server.

 

Updates

EF4 Updates

On the Updates tab, you can check installed template and EF4 Framework version.

How to update framework?

Automatically:

Once there is an update of the EF4 Framework available you should be notified in the control panel of your Joomla. You can also navigate to:

Extensions -> Updates

If you do not see any updates on the list, click "Purge" and then "Find Updates" from the top toolbar.

EF4 Updates

To update simply tick the EF4 Framework from the list and click on the "Update" button from the top toolbar.

Manually:

You can also update the EF4 Framework manually. To do that, simply download the framework zip package from your download area at Joomla-Monster.com and navigate to:

Extensions -> Manage -> Install

Browse the framework zip package and click on the "Upload & Install" button.

EF4 Updates

How to disable template update notifications?

Since EF 4.7 version there is a notification for Joomla-Monster.com template updates. If you are using a Joomla-Monster.com template and a new version will be available then you will get a standard update notification in the control panel of your Joomla.

You can disable this notification in the plugin parameters:

Extensions -> Plugins -> EF4 Joomla-Monster Framework

EF4 Updates