Customising CSS in SCRM Version 8.6.2

👨‍💻 Development Help
1

Hi,

I have been looking through the documentation and forums and have found old posts relating to customising the CSS, but I have found nothing that relate to SuiteCRM v8.*.

Is there a directory where I can add a CSS file which can add/modify some styles?

So far, I have found that styl.css in suitecrm/public/legacy/themes/suite8/css/Dawn/ appears to be the main stylesheet, but any edits in here will be overwritten by an update.

Can someone please help me to find out the correct way to add CSS?

Thanks,

2

For upgrade safe create the folder structure like this.

suitecrm/public/legacy/custom/themes/suite8/css/Dawn

Create a file named style.css here for the changes

Quick repair and rebuild

3

After code changes, you may have to delete folder at the below location and do hard refresh & clear cache on the browser.

suitecrm/public/legacy/cache/themes

4

Thank you both for your replies.

I have created the stylesheet here:
/public_html/suitecrm/public/legacy/custom/themes/suite8/css/Dawn/style.css
but none of the styles are applied.

Do I need to somehow “tell” the theme that I am using a custom style sheet?

I have deleted the caches and run the Quick Repair and Rebuild etc. but to no effect.

5

Please try the following

  1. Delete cache/prod folder
  2. Run the following command from the root directory
    php bin/console cache:clear

Clear browser cache as well.

6

Thanks Harshad,

I deleted the cache/prod folder and cleared all the other caches, but I don’t have access top the command line.

At this point, the stylesheet I created at suitecrm/public/legacy/custom/themes/suite8/css/Dawn doesn’t seem to be called as the styles are not having an effect.

EDIT
I might add that any changes I make to suitecrm/public/legacy/themes/suite8/css/Dawn/style.css show up immediately with a simple refresh in the browser which is why I don’t think the custom stylesheet is even being called.

7

You just need to add custom code in the custom folder and suitecrm will merge your original code and custom code logically.

Can you share your custom style.css code here?

8

The only way I’ve been able to get custom CSS to show up in SuiteCRM 8 is to turn on developer mode. Not sure if it’s a caching issue in SuiteCRM or my browser cache. I’ve done a grep and change the CSS reference everywhere in SuiteCRM and it still doesn’t apply to the front end unless I turn on developer mode… watching, looking for a solution!

9

Hi rsp,

By means of a test, I have the following lines in
/public_html/suitecrm/public/legacy/custom/themes/suite8/css/Dawn/style.css

a.footer-link {
  color: #f00 ! important;
}

td.dashlet-title {
  background-color: #FBC788;      
  color: #000;
}

This does not seem to have an effect and I cannot find it when I check the CSS using the browser’s Dev Tools.

When I edit the core file at
/public_html/suitecrm/public/legacy/themes/suite8/css/Dawn/style.css
I can see the changes as show in the attached screenshot of the Dev Tools.

capture_2024-10-03_154519
capture_2024-10-03_1545191020Ă—223 17 KB

BTW, I have Developer Mode enabled and changes I make to the core CSS are visible immediately, but I cannot see the overrides from the custom stylesheet.

10

Did you remember to run a Quick Repair and Rebuild after adding the custom file?

11

Yes, I run it every time I save the custom stylesheet.

12

Are you using chrome browser? Now delete cache/themes folder and Click F12 on chrome window then right click on refresh icon and do empty cache and hard reload

13

@pgr, yes, LOL that’s my go to solution for all problems as a first step!

14

Is it possible that the issue is related to file permissions?

I installed using softaculous within cPanel and there are other issues including cron jobs not running even after following the instructions linked to by rsp in this thread.

I wonder if there are several issues that are related?

15

@Antonimo step #2 in my general problem solving is to reset all permissions and ownerships. I tried that too!

16

Make sure you’re you’re checking same instance on the browser that you’re updating :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue:

17

pstevens, I just made the connection - It’s a very helpful video.

I have removed everything and will begin a fresh, manual installation of the latest version 8.7.0, and not rely on softaculous.

18

It is easy to install, if you follow these docs: