custom CSS possible

[shalmaxb]

Hi, does anybody know, if it is possible to have custom css, which will not be affected by updates?

[eymen-elkum]

Hi,

https://github.com/espocrm/documenta.../custom-css.md

[shalmaxb]

Thank you very much

[esforim]

This thread might interested you shalmaxb , Nishan is also working on his theme if you perhaps want to do a collab.

https://forum.espocrm.com/forum/general/37330-espopro-theme

[shalmaxb]

@eymen-elkum

Hi, I followed the instructions mentioned in the github link, but the system still uses the default css for the template. I deleted the cache (also in browser), but no result.
Do you have a clue, why?

[telecastg]

Hi,

This is how I have added custom css scripts to our application:

Step 1: Create your custom css file, for example: client/custom/lib/css/my-own-styles.css

Step 2: create a metadata json file to let espo know that there is an additional css script that needs to be loaded as follows:
custom/Espo/Custom/Resources/metadata/app/client.json

{
    "cssList": [
        "__APPEND__",
        "client/custom/lib/css/my-own-styles.css"
    ],
    "developerModeCssList": [
        "__APPEND__",
        "client/custom/lib/css/my-own-styles.css"
    ]
}

Step 3: Clear cache, rebuild and reload.

[shalmaxb]

Hi, your approch differ a little bit from the precedure on github, but I did not get ist to work. Maybe, because I am on local installation with laragon?

[telecastg]

Hi, I tested our implementation in a local installation (xampp) first and then at the remote web server and it has been working fine for over a year.

I am not familiar with laragon but it could be some kind of issue with the permissions to access the css file.

As far as Espo is concerned, once you append the new script to the list of scripts to be loaded it will load it with the page.

First thing I would do is make sure that the script is loaded, you can check this by looking at the "page source" of your Espo webpage (mouse right click and select "view page source" in your browser) then go to the top of the document and make sure that your css script file is included.

If the script is there, then the issue has to do with your webserver having the correct permissions to access the file, if the script is not there it means that Espo did not load it most likely because there is a typo error in the script full path at custom/Espo/Custom/Resources/metadata/app/client.json

Another possibility could be that your style is in conflict with some css class specification that has precedence, in that case use the !important directive in your custom css class definition to override any other competing css directives.

Hope this helps

[esforim]

That view source tip is useful! Should be added to "Troubleshoot" in documentation.

[shalmaxb]

Hello, the tip with the source brought me to the solution. My css file was not implemented because of a wrong path, where I put the client.json. Now it works