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.

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

 

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.

 

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.

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:

 

Extensions -> Updates

 

EF4 Updates

 

Manually:

 

Extensions -> Manage -> Install

 

EF4 Updates