custom/themes/custom.less not parsed

I try to add our companies branding (colors, spacing, logo etc) to a sugarCRM v12 instance. I created a custom.less file in custom/themes and I tried to modify some of the predefined variables. Namely, like this:

@primaryContentBackground : linear-gradient(to right, #017588, #026f85);
@navbarBackground : @primaryContentBackground;

I did a quick repair, clear cache, refresh and.. nothing. No change, the file is simply ignored. What am I doing wrong (PS: in V12 the recomanded way of customizing CSS changed a bit compared to v10)

  • The navbar background is overrided by the value in styleguide/themes/clients/base/default/variables.php

    In Sugar 12 you can add a custom file to override its value for light mode:

    <?php
    #custom/themes/clients/base/default/variables.php
    $lessdefs = array(
        'colors' => array(
            'NavigationBar' => "#017588",
        )
    );

    I am not sure if you can make it works with a gradient (it failed on my first attempt).

    -------

    I am not sure why the @primaryContentBackground does not work, sorry, I usually changes css from javascript.
    Changing the light theme value does works but probably changes more backgrounds than the ones you are targeting.

    body.sugar-light-theme,
    .sugar-light-theme {
      // Indicate to the browser to use system colour scheme for radio buttons and dropdowns
      color-scheme: light;
    
      --primary-content-background: linear-gradient(to right, #017588, #026f85);
    }
    

  • AHHH you need to specify the entire hierarchy and  the fact you are changing the light scheme for the modification to kick in? I will try your way, until now I only specified the class/variable. Do you have a resource where I can see this hierachy? For example I had no idea I need $lessdefs and colors in variables.php (that is the second thing I will try)

  • So I have tried and in fact he reacts to my change BUT.. there is some sort of overlay (not my doing, sugar) over the actual navbar for that IOS like "blurry" / "hazy" effect that is rendered on top my greenish gradient and navbar background change is not shown, it appears like a very vague shadow

  • I feel you (this is what I dislike the most).

    Here we do not use anymore the custom css or variables.php files but just change styles with jQuery.

    It can be frustrating as you need to find the right selectors, but it works and you only need to repair once as you can first try your changes directly in the browser until you get it right.

  • Another twist. It turns it he really really dislikes linear gradient. If you look closely you can see the very feint greenish shade. BUT if I replace (same property as in the screenshot) linear gradient with a simple color the navbar gets colored as expected. But not OTHER bars. I would like every header-like bar to have that green thing. So the header that ends with the blue Save button, the dashlet headers, the subpanel header etc. Can you tell me which variables I need? I can let go of that *** linear gradient Smiley

  • Sorry I am not using that style system and do not know which style does what.
    Best of luck.