Announcement

Collapse
No announcement yet.

Change in color, template of the top banner/bar

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change in color, template of the top banner/bar

    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 ?

    Click image for larger version

Name:	image.png
Views:	214
Size:	90.3 KB
ID:	102259

    Many regards,
    Eric / SysCoData

  • #2
    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.​

    Comment


    • #3
      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.

      Comment


      • shalmaxb
        shalmaxb commented
        Editing a comment
        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
        yuri commented
        Editing a comment
        Hazyblue used to be more actual 5-8 years ago. Today, I find its color palette a bit sullen, saudade maybe

    • #4
      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

      Comment


      • #5
        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

        Comment


        • #6
          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.
          Last edited by rabii; 02-09-2024, 04:36 PM.
          Rabii
          Web Dev

          Comment


          • #7
            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

            Comment


            • #8
              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)
              PHP Code:
              body .panel-default > .panel-heading {
                
              color: var(--gray-soft);
                
              background-color#6f94d7;
                
              border-colortransparent;
              }
              ​​ 

              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)
              PHP Code:
              {
                  
              "cssList": [
                      
              "__APPEND__",
                      
              "client/custom/css/custom.css"
                  
              ]
              }
              ​ 

              If you follow the steps above it will work.
              Rabii
              Web Dev

              Comment

              Working...
              X