Customize DirectAdmin Evolution Skin

In order to customize DirectAdmin Evolution Skin that looks like cpanel, Just do this step:

1. Access Your server with root access via SSH
2. Create a CSS File in /usr/local/directadmin/data/skins/evolution/assets/css
   For the example /usr/local/directadmin/data/skins/evolution/assets/css/myskin.css
3. Fill the wile with this CSS code:
   

   header.app-header,
.header,
html.vue-app body.--grid-layout .app-header{
background:#293a4a!important;
color:#fff!important;
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
border-bottom: none!important;
}

   .ui-icon-counter{
   background: #0279ff;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   padding: 2px;
   border: 1px solid #ccc;
   }
   .userbar > .userbar-button .userbar-button-text {
   color:#fff!important;
   }

   html.vue-app h3{
   background:#293a4a;
   color:#fff;
   padding: 12px;
   font-size: 1.5rem !important;
   }

   .icons-dashboard {
   background:#e7e7e7;
   }

   .icons-grid-category{
   background: #fff;
   }
   .icons-grid-category-entry{
   background: transparent;
   border:none!important;
   }

   html.vue-app .dashboardTab.dashboardTab.mobile > .dashboardTabHeader{
   background:#293a4a !important;
   color:#fff;
   padding:8px 15px;
   }

   thead > tr{
   background:#e0e0e0!important;
   }

   @media only screen and (max-width: 960px) {
   .icons-grid-category-entry-icon {
   width: 64px!important;
   height: 64px!important;
   }

   html.vue-app.mobile .header-top{
   background:#293a4a!important;
   }
   }

   @media only screen and (min-width: 960px) {

   .icons-grid-category-entry-icon {
   width: 48px!important;
   height: 48px!important;
   }

   .icons-grid .icons-grid-category-entries .icons-grid-category-entry {
   display:block!important;
   width: 25rem!important;
   border:none;
   }

   .icons-grid .icons-grid-category-entries .icons-grid-category-entry .icons-grid-category-entry-icon {
   float: left;
   margin-right: 5px;
   }

   .icons-grid .icons-grid-category-entries .icons-grid-category-entry .icons-grid-category-entry-name {
   float: left;
   margin-left: 10px;
   display: block;
   padding: 10px 0;
   height: 50px;
   margin-top: 10px;
   max-width:15rem!important;
   text-align:left!important;
   }

   }
   

4. Save CSS file
5. Login to your directadmin dashboard with admin access
6. Navigate to menu “Customize Evolution Skin”
7. Click “Misc Options” Tab
8. Choose “Default layout” to icons grid
9. Checked in “Forbid users changing the skin layout on user level “
10. Fill “External CSS URL” with “/assets/css/myskin.css” or any file name regarding to step 2
11. Click Save

source: https://forum.directadmin.com/showthread.php?t=58074&p=303371#post303371