Great CRM but a little Design Question

[Gardenuser]

Hello Users,

I´m currently elaborating some CRM Systems for our Company. The Types of Systems are massive and after some testing I stuck to EspoCRM, because it has a GOOD German translation and is very easy to work with.

Sadly I have some "Problems":
- How can I change the Colors of the Template?

On the Company Detail Page:
It currently looks like this:


The Space between the Boxes are great, but why not with all the boxes?
It should look like this:


I can get it, when I change

<div class="left col-md-8">
<div class="middle">

to

<div class="left col-md-8">
<div class="bottom">

But where is the source file to edit it? I can´t find it.

Another question:
In the Layout Manager I can change the Style of my own Boxes with the 6 Standard Items. Is there any way to add more or change the current things?
Picture:



I hope you can help me, because those are the only Points that drive me crazy. The rest of the CRM is simply said: Awesome.

[telecastg]

Hello,

Regarding your first question, the class that controls the detail "body" section which you want to modify is https://github.com/espocrm/espocrm/b...cord/detail.js and the template used to render the view is https://github.com/espocrm/espocrm/b...ord/detail.tpl

If you are new to Espo please don't forget that any modification to these core files will be lost on any update. In order to make your changes "upgrade safe" you will need to create a custom view, a custom template and a custom clientDefs file.

For example, assuming that you want to modify the display for the Account entity, you would need to do the following:

1) Create file: custom/Espo/Custom/Resources/metadata/clientDefs/Account.json where you will specify a custom view class to render the body section instead of the core view class

{   
    "recordViews" : "[COLOR=#8e44ad]custom:views/account/record/detail[/COLOR]"
}

2) Create file: client/custom/src/views/account/record/detail.js that will specify a custom template, which you can modify as necessary

Espo.define('custom:views/account/record/detail', 'views/detail', function (Dep) {

    return Dep.extend({

        template: '[COLOR=#8e44ad]custom:record/detail[/COLOR]'  

    });
});

3) Create file: client/custom/res/templates/record/detail.tpl which will be your customized template

Copy the code from client/res/templates/record/detail.tpl and modify as required.

4) Clear cache and rebuild

To find more hints about gui script location, I suggest that you check this post https://forum.espocrm.com/forum/deve...hing#post61406

In regards to your second question I do not use the Admin GUI very much for customization so I can't help you, but perhaps other members that have more experience with the Layout Manager can answer it for you.

Welcome to the forum

[eymen-elkum]

First of all, many thanks to telecastg.

The solution that provided by telecastg is the best solution in general for front-end changes because this way is safe upgrade, means that you define new files instead of changing the core files.

But I think it is not correct to change the class from middle to bottom, because the class will used as reference to where the panels will be located, so this will cause unexpected errors.

I suggest to add custom css file following this doc: https://docs.espocrm.com/development/custom-css/


Create a file custom/Espo/Custom/Resources/metadata/app/client.json.

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

The content of "client/custom/css/my-styles.css" can be:

/* for detail form panel */
.middle > .panel {
     margin-top: 19px;
}

.middle > .panel:first-child {
     margin-top: 0;
}
/* for stream panel */
.bottom .panel.panel-stream.sticked {
     margin-top: 0;
}

Then clear cache.

Please tell me if any issue to update the post for incoming readers

[telecastg]

Nice solution eymen-elkum ! I completely agree with you, making cutom css changes will work for all entities without having to modify every entity.

[Gardenuser]

Please tell me if any issue to update the post for incoming readers

Thank you very much telecastg. This can help us, if we need a complete new Design.

Thank you also very much eymen-elkum. This Solution seems the best for our case. I have tryed it and after the cleared Cache and and Strg + F5 reload of the Page in Chrome it works perfectly. Great Solution.

Well I say it so: We will use EspoCRM. Currently it runs in a Testing Environment. But thanks to this Support I think it will leave the Testing shortly. When I look to other Solutions... Well let me say it so: When I setup a normal Testing Environment and the Installer of other Products freaks out because of some "sql mode" things that are no problems with ANY other Software. This Product is removed from our List.

Thank you all again for your help.

[eymen-elkum]

welcome to espocrm!