Mautic offers a large repertoire of possibilities to interact with potential customers on the website. The best known and most widespread is the so-called "Focus Item" – e.g. in the form of a notification that moves animatedly into the window.
Unfortunately, Focus Items in the Mautic standard construction kit can only be individualized very sparingly: Individual layout changes in the editor can only be made in HTML – the nightmare of every editor
The elegant solution for an individual Focus Item look: Change the Mautic style "hard" for the whole Mautic instance. The focus items can thus be adapted to the website design and are then created in this variant by default when the editor creates a focus item.
Responsible for the appearance of the different Focus Item Styles are different php-files, which can be found in the following directory: "plugins/MauticFocusBundle/Views/Builder". There are some general style-files that are used for each focus item, as well as four folders for each type: Bar, Modal, Notification and Page.
By adjusting the php files in the respective folders, changes can be made to the default styles of the focus items.
Here is an illustrative example:
The task: The Focus Item Style "Notification" should be adjusted. There is one more special feature: The style "Notification" uses the HTML of the "Modal" style. Therefore, the changes must be made in the Modal folder as well as in the Notification folder.
First you have to edit the file "index.html.php" in the folder Modal and in this case add a logo as a picture. The background color of the focus item should be controlled by the primary color in the Mautic-Builder – to make this work, add the following style to the div with the class "mautic-focus":
style="background-color: #<?php echo $props['colors']['primary']; ?>;"
The "$props" variable can be used, for example, to access the colors and contents stored in the focus item.
Second you edit the file "style.less.php" in the folder Notification and add the styling for the text and the button via CSS. Now only the colors have to be adjusted in the Mautic-Builder and the Focus Item is ready.
Here is an example of a before and after comparison:
Without individual styling:
With individual styling:
Attention: Currently there is no "update-proof" way, i.e. the processed Focus Item files are overwritten by every Mautic update! They must therefore be backed up and stored in the appropriate directories after the update. Not optimal, but solvable by a small automatism – and the use justifies this unpleasantness and the expenditure.