Change Login Page Colors

[dodom2]

Hello. Where is the header color controlled from on the login page? I need to update the header color and button color to match the theme after logging in.

Thanks

[telecastg]

Hi,

The login panel header background color is set by the theme. I don't recommend that you modify the theme unless you really know what you are doing and consider also that any changes made there will be wiped out by the next upgrade.

What you can do instead is write come some custom css to override the theme for specific DOM elements like this:

1) create a css file (the name of the is not important, you can call it anything that you want, but the location is) with your custom specifications:
client/custom/lib/css/myCustomStyles.css

/* set the background color for the login panel heading element, the !important statement will override any other directives for the same element */
#login .panel-heading {
    background-color: yellow !important;
}

2) create a metadata file to let Espo know that there is a custom css script that needs to be included: (here the name of the file and the location are important)
custom/Espo/Custom/Resources/metadata/app/client.json

{
    "cssList": [
        "__APPEND__",
        "client/custom/lib/css/myCustomStyles.css"
    ],
    "developerModeCssList": [
        "__APPEND__",
        "client/custom/lib/css/myCustomStyles.css"
    ]
}

Clear cache and rebuild.

If you would like to learn how to set a custom landing (login) page with additional modifications, check this post: https://forum.espocrm.com/forum/deve...n-landing-page

Also for future reference, for those who might not know yet, you can find the specific css directives for any DOM element by using the browser console like this:
a) hover over the element that you interested on.
b) right click and choose "inspect"
This will bring up the console and in the right side of the screen you can look for the css directive controlling your element. (see the attached screen shot)