Custom Design

[asebaste]

Hi, I use EspoCRm for about 5 years, it is a grate tool. Thank you.
To make my instance of espo crm a little more personal, I change a few colors in the css file hazyblue.css. That works so far. But my question is, if there is a general possibility to create a completely own design. Essentially, I just want to be able to change the colors for the menu, buttons, etc.
Thank you and kind regards, Alessandro

[yuri]

Hi,

You can add your custom CSS file and set custom values to CSS variables.

Find variables in the console.

[asebaste]

Thanks for the tip, that helps.
Let's say I would copy your hazyblue.css, say to QSoft_EspoCRM.css, and I would then customize this file accordingly, would this survive the updates? I mean, would I have problems with an update sooner or later?
I don't currently have the confidence to create a completely custom CSS file. I would need to know what elements are available. That's why I think it would be best to build on an existing one. What do you think?

[shalmaxb]

all files in the custom folders (custom and client/custom) will be untouched by updates. You can freely add your custom css (besides other files in those folders), which is always called in priority to the default css.
I do it that way, that I copy a whole css-theme file to the custom folder and make my customization in that file.
Also untouched will be the upload folder in data, the config.php and the config-internal.php, as these files contain your configuration and uploaded assets.

CORRECTION: As yuri stated in the following post, you should put into the custom-css only your customizations. In fact I do it that way.

[yuri]

I highly do not recommend to copy and modify a CSS file. Add an empty CSS file and add needed styling modifications.

[shalmaxb]

in fact I do it that way (I guess I remembered, how I did it in the beginning). Now I have a custom-css containing only my customizations. I corrected that in the thread before.

[asebaste]

Thanks to everyone too. That all sounds very good. I will do it like this.

If I have understood this correctly, then I will create my own CSS file, according to https://docs.espocrm.com/development/custom-css/
In this file I then only enter all the things that I want to have differently.
I would like to do an example here.

If I would like to have this colour:
--navbar-inverse-bg:#00e6b0;

Would this then simply mean that my CSS file (QSoft.css) contains exactly this entry and nothing else?
Kind regards

[shalmaxb]

right

[asebaste]

I did some changes.
1. I create a file custom/Espo/Custom/Resources/metadata/app/client.json (see attachement)
2. Than I createt my own CSS File and put it here: client/custom/css/QSoft_Espo_CRM.css (see attachement, QSoft_Espo_CRM.txt)

I cleared the cache.

But I don't see a new deisgn:

And I can verify, that it ist working.
Probabliy i did a mistake in the CSS file (body {--navbar-inverse-bg:#00e6b0;})
Or in the path to the files.

Any idea?

Kind regards

[shalmaxb]

It won`t appear in that dropdown list. You will see your customization after clearing cache in Administrator and clearing browser cache and refresh page. Sometimes it is necessary to close the browser completely and open again.
You see your customization only as changing on the page itself.

If I want to change anything css related, I use the browser tools (F12), search the respective code and try my customizations there. On achieving what I wanted, I copy the code from the browser tools and use as my customized code.
Only beware of one thing: There are many code parts, which are used in different places and changing them could lead to undesireable changings in places you will only see later.

[asebaste]

OK. It work very fine.
Thank you so much.
Kind regards