-
-
Notifications
You must be signed in to change notification settings - Fork 112
Whitelabeling Manually
The whitelabeler does all of this work for you, but if for some reason you can't use it on your host, or you're just curious how it works, the files that are updated are show here.
In /app/bundles/CoreBundle/Views/Default/base.html.php
On lines 45-49:
<div class="col-xs-6 text-muted text-right small">v<?php
/** @var \Mautic\CoreBundle\Templating\Helper\VersionHelper $version */
$version = $view['version'];
echo $version->getVersion(); ?>
</div>Replace this with (or whatever else you'd like):
<div class="col-xs-6 text-muted text-right small">v<?php
© <?=date('Y');?> My Company Name
</divThe company name is loaded into the page titles on a couple of templates. Then it's changed via JavaScript as you click around to different sections in Mautic. Therefore, we have to update the templates and the JavaScript file responsible for this.
In /app/bundles/CoreBundle/Views/Default/head.html.php
On line 17, Replace "Mautic" with whatever you'd like:
<?php echo $view['slots']->get('pageTitle', 'Mautic'); ?>The company name also appears in the title tag of /app/bundles/UserBundle/Views/Security/base.html.php (the login screen), but that file also contains logos we want to replace, so we'll wait until that step for updating this.
In /app/bundles/CoreBundle/Assets/js/1a.content.js
On lines 118-121:
mQuery('title').html( currentModule[0].toUpperCase() + currentModule.slice(1) + ' | ' + currentModuleItem + ' | Mautic' );
} else {
//loading basic title
mQuery('title').html( mQuery('.page-header h3').html() + ' | Mautic' );Replace "Mautic" on line 118 and line 121 with whatever you'd like.
In /app/bundles/CoreBundle/Views/LeftPanel/index.html.php
On lines 15-54, there are two SVG tags you'll see:
<!-- brand -->
<a class="mautic-brand<?php echo (!empty($extraMenu)) ? ' pull-left pl-0 pr-0' : ''; ?>" href="#">
<!-- logo figure -->
<svg version="1.1" class="mautic-logo-figure" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path class="circle" d="M64,119.843c-30.937,0-56.108-25.17-56.108-56.108C7.893,32.799,33.063,7.629,64,7.629
c7.474,0,14.734,1.446,21.578,4.301c1.936,0.807,2.85,3.03,2.041,4.964c-0.805,1.937-3.029,2.849-4.963,2.043
C76.742,16.472,70.465,15.221,64,15.221c-26.751,0-48.514,21.763-48.514,48.514c0,26.752,21.763,48.516,48.514,48.516
c26.751,0,48.513-21.764,48.513-48.516c0-5.735-0.988-11.345-2.939-16.677c-0.723-1.968,0.289-4.149,2.258-4.869
c1.971-0.721,4.15,0.291,4.871,2.259c2.258,6.171,3.404,12.661,3.404,19.287C120.107,94.673,94.938,119.843,64,119.843"/>
<polygon class="m" points="88.545,57.987 79.807,67.055 84.664,87.332 95.621,87.332 "/>
<polygon class="m-arrow" points="84.982,31.157 88.004,34.176 63.933,59.605 43.446,38.475 31.664,87.332 42.621,87.332
49.122,60.198 63.933,76.399 95.699,41.815 98.738,44.875 101.75,27.784 "/>
</svg>
<!--/ logo figure -->
<!-- logo text -->
<svg version="1.1" class="mautic-logo-text mnl-3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 260 65" enable-background="new 0 0 260 65" xml:space="preserve">
<g>
<path class="m" d="M39.336,57.983V37.951c0-4.932-2.58-9.409-7.664-9.409
c-5.008,0-7.967,4.477-7.967,9.409v20.032h-9.258V20.498h8.575l0.683,4.553c1.972-3.794,6.298-5.16,9.864-5.16
c4.477,0,8.955,1.822,11.079,6.981c3.339-5.311,7.664-6.829,12.521-6.829c10.623,0,15.859,6.526,15.859,17.756v20.185H63.77V37.799
c0-4.932-2.049-9.106-7.057-9.106s-8.119,4.326-8.119,9.258v20.032H39.336z"/>
<path class="a" d="M109.031,20.574h8.879v37.41h-8.728l-0.456-5.464
c-2.124,4.402-7.967,6.527-12.14,6.604c-11.079,0.074-19.275-6.754-19.275-19.883c0-12.898,8.575-19.652,19.502-19.577
c5.01,0,9.789,2.352,11.913,6.07L109.031,20.574z M86.569,39.24c0,7.134,4.934,11.384,11.079,11.384
c14.569,0,14.569-22.689,0-22.689C91.503,27.935,86.569,32.108,86.569,39.24"/>
<path class="u" d="M133.101,20.574v19.578c0,5.69,3.11,10.016,9.03,10.016
c5.69,0,9.561-4.781,9.561-10.471V20.574h9.181v37.486h-8.27l-0.607-5.084c-3.871,3.794-7.437,5.614-12.672,5.614
c-8.954,0-15.48-6.754-15.48-18.363V20.574H133.101z"/>
<path class="t" d="M182.123,10.026V20.65h10.319v7.967h-10.396V44.78
c0,3.567,1.973,5.313,4.855,5.313c1.443,0,3.112-0.455,4.479-1.14l2.58,7.893c-2.656,1.062-4.857,1.518-7.664,1.594
c-8.12,0.303-13.432-4.326-13.432-13.659V28.617h-6.98V20.65h6.98v-9.637L182.123,10.026z"/>
<path class="i" d="M209.441,10.026c0,7.209-10.929,7.209-10.929,0 C198.513,2.818,209.441,2.818,209.441,10.026 M199.348,57.984h9.259V20.422h-9.259V57.984z"/>
<path class="c" d="M247.803,53.203c-4.326,4.249-8.879,5.92-14.418,5.92
c-10.853,0-19.881-6.526-19.881-19.807c0-13.279,9.028-19.805,19.881-19.805c5.312,0,9.409,1.518,13.507,5.54l-5.843,6.146
c-2.2-1.973-4.934-2.959-7.514-2.959c-6.221,0-10.773,4.553-10.773,11.078c0,7.133,4.855,10.927,10.623,10.927
c2.959,0,5.919-0.834,8.194-3.11L247.803,53.203z"/>
</g>
</svg>
<!--/ logo text -->
</a>You can replace these lines with this:
<a class="mautic-brand<?php echo (!empty($extraMenu)) ? ' pull-left pl-0 pr-0' : ''; ?>" href="#">
<img src="/images/sidebar_logo.png" style="width:100%; max-width:130px; margin:0px 0px 0px 0px;" />
</a>Replace the image with your own. Change the inline CSS image max-width to whatever you'd like. Update the margins if you need additional spacing (0px 0px 0px 0px are margins in this order: top, right, bottom, left).
First, let's update the page title that we mentioned earlier.
On line 17:
<title><?php echo $view['slots']->get('pageTitle', 'Mautic'); ?></title>Change "Mautic" to whever you'd like.
The logo is another SVG tag inside of a div tag on lines 33-44:
<div class="mautic-logo img-circle mb-md text-center">
<svg version="1.1" class="mautic-logo-figure" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<path class="circle" d="M64,119.843c-30.937,0-56.108-25.17-56.108-56.108C7.893,32.799,33.063,7.629,64,7.629
c7.474,0,14.734,1.446,21.578,4.301c1.936,0.807,2.85,3.03,2.041,4.964c-0.805,1.937-3.029,2.849-4.963,2.043
C76.742,16.472,70.465,15.221,64,15.221c-26.751,0-48.514,21.763-48.514,48.514c0,26.752,21.763,48.516,48.514,48.516
c26.751,0,48.513-21.764,48.513-48.516c0-5.735-0.988-11.345-2.939-16.677c-0.723-1.968,0.289-4.149,2.258-4.869
c1.971-0.721,4.15,0.291,4.871,2.259c2.258,6.171,3.404,12.661,3.404,19.287C120.107,94.673,94.938,119.843,64,119.843"/>
<polygon class="m" points="88.545,57.987 79.807,67.055 84.664,87.332 95.621,87.332 "/>
<polygon class="m-arrow" points="84.982,31.157 88.004,34.176 63.933,59.605 43.446,38.475 31.664,87.332 42.621,87.332
49.122,60.198 63.933,76.399 95.699,41.815 98.738,44.875 101.75,27.784 "/>
</svg>
</div>Replace it with this:
<div class="mautic-logo img-circle mb-md text-center" style="width:200px;">
<img src="/images/login_logo.png" style="width:200px; margin:0px 0px 0px 0px;" />
</div>Update the image, width CSS values, and margins.
While we're here, we also need to update the footer on the login page.
Line 55:
<?php echo $view['translator']->trans('mautic.core.copyright', ['%date%' => date('Y')]); ?>You can replace this line with:
© <?php echo date('Y');?> My Company NameOr whatever else you'd like!
Mautic colors are stored in two CSS files:
/app/bundles/CoreBundle/Assets/css/app.css
and
/app/bundles/CoreBundle/Assets/css/libraries/libraries.css
There are too many instances of CSS colors to list every single one here. Your best bet is to simply open these files (most styles are found in app.css) and do a search and replace for the colors you'd like to replace. You can also look at the template files in the repository for the whitelabeler and search for "{{" tags to see where the whitelabeler makes all of its changes. You'll see template tags like this:
.app-sidebar.sidebar-left {
width: 230px;
left: -230px;
background-color: {{sidebar_bg}};
...After you're done making all of these changes, you have to run the Mautic command line console in order to generate the production assets from the source assets (CSS and JavaScript that is optimized and minified).
Navigate into Mautic's "app" folder via SSH and enter this command:
sudo -u www-data php console mautic:assets:generate
Then:
sudo -u www-data php console cache:clear
Then:
sudo -u www-data php console cache:warmup
You're finished. And your changes should show up in Mautic (clear your browser's cache).
You can try replacing the CSS and JavaScript in these files instead of what was previously mentioned. This will be harder to do since the files are minified, but you can search for relvant tags and still find them:
/media/js/app.js
/media/css/app.css
/media/css/libraries.css