Branding is an important part of any modern business and eFront was created with theming and customizability built-in, making it easy to add your own logo, favicon, custom theme and even custom javascript in your eFront based learning portal.

To begin customizing eFront, log in with an admin account. You will be able to see two related options:

(1) System settings: For settings, configuration and some basic appearance options

(2) Themes: For customizing the appearance and look and feel of your eFront system for more details

System settings

Let's start with configurations you can modify in system settings. Go to System Settings and then in the Identity section.

Over there you will find the following options:

(1) Main URL: This is the URL where your platform is installed, excluding the protocol part (HTTP or https)

(2) Redirect on logout: Here you can set up a URL that you want your users to get redirected to, after clicking on the logout link

(3) Site name: With this option, you can set up a name for your site, e.g. Learning Management System

(4) Site motto: Here you can define a short motto for your site, e.g e.g. Refreshing eLearning

Moving over to section Date & Language you can set various settings that define the user's language, region and any special variant preferences that the user wants to see in their user interface. Let's go through them one by one:

(1) Default language: Here you can define the default language for your eFront system. You can go to the Languages page to disable languages you don’t want appearing on your language list

(2) Date format: Here you can set the way dates will appear in your system

(3) 1st Week Day: Select which day (Monday or Sunday) will be considered by the system as the start of a week

(4) Time zone: Select the time zone that corresponds to your geographical region

(5) CSV Delimiter: A delimited text file is a text file used to store data. You will probably use such files when importing or exporting data from eFront. You can choose which symbol will be useful to separate this data

Next, let's move on to the Appearance section. Here is a list of all options you can set here:

(1) Default courses view: Choose between list and grid view

(2) Maximize viewable area for the learner: Checking in this option will change the way content is presented to your learners. The layout changes so learners have the most available space for content

(3) Enable course ratings: Enabling this you will allow learners to rate the courses they attend

(4) Enable help: Check this option if you want to enable the Help widget that suggests articles directly from the Knowledgebase, according to the page you are in

(5) Display the branch name at the navigation bar: Select whether the branch name of a branch (when applicable) will appear in the navigation bar or not

(6) System logo: Here you can set your own logo for your system and of course reset to the default.The suggested dimensions are 300x200 pixels and it is also suggested that it’s selected to match your header color

(7) System favicon: Here you can set your own favicon and of course reset to the default. Keep in mind that your favicon (the small icon that represents your page in the browser taskbar or bookmarks listings), it has to be square, and will be displayed in a 16×16 resolution by most browsers

Themes

You can further modify and customize the appearance of your eFront system from the section themes. For ultimate flexibility, eFront allows you to define a custom layout of each branch of your e-learning service. Themes sit on top of a layout, and define the various colors, fonts, backgrounds etc. that the layout is displayed in (if you’re confused think of it like this: the layout defines the structure of your site – where things are -, whereas themes define its decoration – how things look -).

In the Themes page, the first section is the Site builder (1). Over here you can customize the visual layout of eFront. You will be able to see a few default blocks (such as the Catalog, the Sign in the panel, etc.) to your left which you can drag and drop to the available columns blocks to create the layout you want. You can also add your own custom blocks to the layout, e.g. a panel displaying a welcome message, ads, custom widgets, etc. You can check the detailed guide How to use the site builder in order to find out more.

Moreover,  you can select between several predefined themes or install a new one (even one that you have created) from the “Change Theme” tab (2). From the themes listing you can set the active theme, preview themes, and even edit any theme.

While editing a theme (or creating a new one) you can style various layout components (3) or even define your own CSS rules (4) that will override the default rules of your theme.

In addition, you can even:

• add your custom Javascript code (5), to archive not only the look and feel you prefer but also the behavior you want

• add a widget or embed a code (6) using <script> tags

Click on 'Update' to confirm and save after each change.