Year 1 - UE 05 - Digital Analytics

So as many free software, you can make Matomo Analytics your own solution. You could directly customize the fonts and the colors within the code itself, but Matomo has some pre-built features you can use in order to easily change the design of the solution.

Change the favicon and the icon

If you are the super user within Matomo, you can click on Administration, then in “Settings”, from there you can customise the Logo (better to go for a rectangular shape, the logo of Matomo is 144 width px by 24 height px, so a 6 times ratio), as well as the Favicon (note that currently Matomo does not support .ico favicon). As a favicon is a square and the logo is rectangular, you will need a software such as GIMP to make those changes.

Change the name of your website

The name of your website is defined within the Measureable settings.

Changing the fonts and the colours

Changing the fonts and the colours is a bit more advanced as it requires to create a plugin for that. In order to create this plugin. Execute the following command line on your server:

./console generate:theme

It will ask you for:

• The name you would like to give to this plugin, for example FLOSS.
  
• The description, for example, the theme of the FLOSS Marketing School.
  
• The version: you can press enter and it will create a default version number.
  

Then go to Administration => Plugins => Manage Themes (do not look within the Plugins list but within the themes instead) in order to activate it.

From here there are several files that you can modify in order to change the fonts and colours.

The fastest approach is to go within the stylesheets folder and change the colours and fonts according to the template activated by default.

By turning:

@theme-fontFamily-base: Arial, Verdana, sans-serif;

to

@theme-fontFamily-base: Lato, Arial, Verdana, sans-serif;

You will get Lato as the main font.

@theme-color-header-background: #0091ea;

into

@theme-color-header-background: #ffffff;

You will turn the header menu from blue to white.

Now, you have everything in hand in order to tune your Matomo's instance.

For more information about customization, please look at the official documentation of Matomo: https://developer.matomo.org/guides/theming