Skip to main content

How to customize logo and cover image

How to customize Forma Lms' branding

Forma Lms' look and feel is managed through its templates. 

Templates are stored in the ...../templates/ folder. You should access that via FTP or File manager, they are not modifiable via UI unless you have the plugin for that. 

When you first install it, Forma come with a “standard” template. 

If you want to customize the template to match your own branding, you can do that by manually modifying the template or by using the commercial “templedit” plugin, that does all the work for you. 

Let's take a look at how you modify the template. 

Always keep the standard template

Our advice is to always leave the “standard” template untouched. When you upgrade Forma, the standard template will be overwritten, so you will lose your changes. Much better to duplicate it and rename it to your liking. The editing will be done on the duplicated template. 

Remember to set your customized template as your default one, in order to display the changes. 

Logos and images

There are 4 images you can easily replace, by overwriting the existing images with your own, provided they have the same name and extension Just replace them in the folders you will find below. 

image.png

image.png

This is company_logo_admin.png, it's stored in …templates/templatename/images/company_logo_admin.png

image.png

This is the favicon, it comes with 2 files (.ico and .png). They are supposed to be 16×16 pixels. 

Replace the 2 favicons under …templates/templatename/images/favicon.png 

and …templates/templatename/images/favicon.ico

image.png

The cover image is named image.jpg, and it's in …templates/templatename/standard/static/images/login/bg.jpg

Further editing

Forma Lms' icons can be found under …templates/templatename/static/images/icons/.....

Just like in the other cases, you can replace the icons with recolored ones provided you keep the same file names. 

Styles and .css are in the style and style guides folders. If you are familiar with .css, you'll be able to change the overall colors and styles.