Bypass CSS and JS files in mautic?

Product Support
1

Hi there, i have an annoying problem.
Mautic have some problems that i bypass with css and javascript.

Two of the main problems are this:

  1. The system log me out after 10 minutes (something while i am writing mail)
  2. On campaigns the box width is too small and and you can’t read the description.

So i bypassed the 2 problems and (the first solution was taken from a post on this forum), but every time i make an update the changes are deleted because i have to hard code it into mautic files.

Does anyone has a simple code or maybe a full plugin that allow me to load 2 files (1 JS and 1 CSS) and bypass the code in there without losing the data on each update?

Even if you can direct me to paid plugin that does that will be great.

2

Hi,

  1. Are you running with nginx web server? I know that the latest nginx release respects this timeout better. However you can also try and tweak the settings in php.ini
  2. We have quite a bit of customization inside Mautic and faced similar problems. A few options around this:
    2.1. Do not upgrade all the time.
    2.2 We wrote a simple bash script that will copy and replace the files that we needed changed on each update.
    2.3 You could write a plugin to do this for you as well, a little overkill IMO, but possible.

Hope that helps

3

Hey thanks for your reply,
I rather not waste time on learning how to write mautic plugin and hope someone already did that.

The idea or replace files on each update via code was my idea as well.

At hte past i used to insert the css and javascript code as part of mautic css and javascript files.

Now i decided to create external css file and external js file and i simply import the files into mautic after update with 2 lines of code.

But still a simple plugin that does or an option to do that from the system without losing data after each update would have been better.

4

I recently needed to make some CSS changes to a Mautic installation and wanted to avoid having to re-apply the changes on every update.

My extremely hacky and probably not at all supported or encouraged method is:

Create a new .php file in the same folder as Mautic’s webroot, called app.css.php:

<?php
header('Content-Type: text/css');
echo (" 
/* INSERT YOUR CUSTOM CSS RULES HERE */
#mautic_calendar_index {
  display: none;
}
table#leadListTable th:nth-child(3), table#leadListTable td:nth-child(3) {
  display: table-cell !important; 
}
table#leadListTable td:nth-child(2) small {
  white-space: normal;
}
");
include('media/css/app.css');
?>

Insert any custom CSS rules in the commented section. You may need to use quite specific selectors and !important flags to make sure they override the default Mautic CSS. As an example, I’ve included some CSS rules to:

  • hide the calendar from the main menu (we haven’t found the calendar very useful)
  • always show the blue “view x contacts” button on the segments list, even when viewing on mobile

This PHP file will output your custom CSS rules followed by the contents of Mautic’s standard app.css

Configure your web server to serve app.css.php instead of app.css. I use NGINX and added this to my server file:

        location /media/css/app.css {
                return 301 /app.css.php;
        }
5

Thanks a lot for sharing it with me, it does seems a bit risky at the moment and i also bypass javascript code at the system.

It also may cause problems if you move to different hosting so at the moment while it’s a pain in the ass i rather add 2 lines of code at each update than do that.

I kinda interesting that there is no plugin or something that does that.
If i know to to develop to mautic something like that should have taken few minutes, but i guess most people don’t think about changing the way the system works.