Change in color, template of the top banner/bar

[scdzaak]

Dear Forum / Developers,

In the picture you see the different between the (old) version 6.1.10 and the latest one.
The old view was nice in the headers of the relations name ( the gray background at 'Overzicht').

In the new view their is no color bar at the top of the page ..
Is their a possiblity to change this somewhere ?



Many regards,
Eric / SysCoData

[shalmaxb]

Hi,
you can create a custom css. How to do that, is described here: https://docs.espocrm.com/development/custom-css/

You can name that css-file as you like.
Next step is to find the css responsible for that part, which you can do by using the browser tools in Chrome or Firefox

body .panel-default>.panel-heading
color: var(--gray-soft);
background-color: #ffffff; <- I guess it is this part
border-color: transparent;
}

You put there a gray colour by HEX Code and put that css code into your custom css file. Rebuild and clear cache and browser cache. It should appear in the colour of your choice.

[yuri]

You can assign panel colors in layout manager. If you set Info, it will be violet. But do you really need it? The majority prefer new themes to the older one. I find the style of the old themes to be about 5-8 year outdated. Getting used to new ones won't take much time. I never find a need to customize themes of services I use. I just respect the style creators choose for their product and get used to it.

[shalmaxb]

I agree to that. I used hazyblue some years and I liked it. Recently I switched to violet an now I do not like hazyblue anymore.
But in the end it is always a matter of personal taste......

[yuri]

Hazyblue used to be more actual 5-8 years ago. Today, I find its color palette a bit sullen, saudade maybe

[scdzaak]

To All,
Many thanks for your reply.
I will check the custom CSS .. and yes it is from one of the old-days .. but next week we will migrate to the latest version.
So thatś why i see the difference between the old and new view ( on the test machine .. and not on the production ).
Regards, Eric

[scdzaak]

Dear Forum memebers,

It is hard to find the correct files and places ..
I have made an custom json file in:
custom/Espo/Custom/Resources/metadata/app/client.json

Inside the file I have made the code:

{
"cssList": [
"__APPEND__",
"client/css/espo/scherm.css"
]
}

In de folder client/css/espo/scherm.css I have written the changed code:

body .panel-default>.panel-heading
color: var(--gray-soft);
background-color: #ffffff; <- I guess it is this part
border-color: transparent;
}

But after clearing the cash and restarting the apache server .. nothing changed .. what will I do wrong ..

The file-rights are made the same as the others needed for EspoCRM.

Regards,
Eric

[rabii]

Hey,

this "client/css/espo/scherm.css" should be => "client/custom/css/espo/scherm.css"

You can even just put the file in client/custom/css/scherm.css - you don't need the extra folder espo. Clear cache and rebuild the system afterwards.

[scdzaak]

Sorry .. I'am stuck ..

Many thanks first for all the replies.

Is their anybody who will have made a custom.css file(s)
What I try it will not give the result I want .. nothing happen or the software hangs.

You will be helpfull =

Regards,
Eric

[rabii]

Follow these steps and it should work fine.

Create your custom.css file under client/custom/css/custom.css with the content as below: (Just copy and paste in code editor an remove any extra caracters)

body .panel-default > .panel-heading {
  color: var(--gray-soft);
  background-color: #6f94d7;
  border-color: transparent;
}​​ 

Then ass this code below to custom/Espo/Custom/Resources/metadata/app/client.json (Just copy and paste in code editor an remove any extra caracters)

{
    "cssList": [
        "__APPEND__",
        "client/custom/css/custom.css"
    ]
}​ 

If you follow the steps above it will work.