{"id":1186,"date":"2019-11-05T10:52:09","date_gmt":"2019-11-05T03:52:09","guid":{"rendered":"https:\/\/www.whplus.com\/blog\/?p=1186"},"modified":"2019-10-29T15:00:08","modified_gmt":"2019-10-29T08:00:08","slug":"customize-directadmin-evolution-skin","status":"publish","type":"post","link":"https:\/\/www.whplus.com\/blog\/2019\/11\/05\/customize-directadmin-evolution-skin.html","title":{"rendered":"Customize DirectAdmin Evolution Skin"},"content":{"rendered":"

In order to customize DirectAdmin Evolution Skin that looks like cpanel, Just do this step:<\/p>\n

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

    header.app-header,
    \n.header,
    \nhtml.vue-app body.--grid-layout .app-header{
    \nbackground:#293a4a!important;
    \ncolor:#fff!important;
    \nbox-shadow: 0 3px 3px rgba(0,0,0,0.5);
    \nborder-bottom: none!important;
    \n}<\/p>\n

    .ui-icon-counter{
    \nbackground: #0279ff;
    \nborder-radius: 50%;
    \nwidth: 30px;
    \nheight: 30px;
    \npadding: 2px;
    \nborder: 1px solid #ccc;
    \n}
    \n.userbar > .userbar-button .userbar-button-text {
    \ncolor:#fff!important;
    \n}<\/p>\n

    html.vue-app h3{
    \nbackground:#293a4a;
    \ncolor:#fff;
    \npadding: 12px;
    \nfont-size: 1.5rem !important;
    \n}<\/p>\n

    .icons-dashboard {
    \nbackground:#e7e7e7;
    \n}<\/p>\n

    .icons-grid-category{
    \nbackground: #fff;
    \n}
    \n.icons-grid-category-entry{
    \nbackground: transparent;
    \nborder:none!important;
    \n}<\/p>\n

    html.vue-app .dashboardTab.dashboardTab.mobile > .dashboardTabHeader{
    \nbackground:#293a4a !important;
    \ncolor:#fff;
    \npadding:8px 15px;
    \n}<\/p>\n

    thead > tr{
    \nbackground:#e0e0e0!important;
    \n}<\/p>\n

    @media only screen and (max-width: 960px) {
    \n.icons-grid-category-entry-icon {
    \nwidth: 64px!important;
    \nheight: 64px!important;
    \n}<\/p>\n

    html.vue-app.mobile .header-top{
    \nbackground:#293a4a!important;
    \n}
    \n}<\/p>\n

    @media only screen and (min-width: 960px) {<\/p>\n

    .icons-grid-category-entry-icon {
    \nwidth: 48px!important;
    \nheight: 48px!important;
    \n}<\/p>\n

    .icons-grid .icons-grid-category-entries .icons-grid-category-entry {
    \ndisplay:block!important;
    \nwidth: 25rem!important;
    \nborder:none;
    \n}<\/p>\n

    .icons-grid .icons-grid-category-entries .icons-grid-category-entry .icons-grid-category-entry-icon {
    \nfloat: left;
    \nmargin-right: 5px;
    \n}<\/p>\n

    .icons-grid .icons-grid-category-entries .icons-grid-category-entry .icons-grid-category-entry-name {
    \nfloat: left;
    \nmargin-left: 10px;
    \ndisplay: block;
    \npadding: 10px 0;
    \nheight: 50px;
    \nmargin-top: 10px;
    \nmax-width:15rem!important;
    \ntext-align:left!important;
    \n}<\/p>\n

    }
    \n<\/code><\/li>\n

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

    source: https:\/\/forum.directadmin.com\/showthread.php?t=58074&p=303371#post303371<\/p>\n","protected":false},"excerpt":{"rendered":"

    In order to customize DirectAdmin Evolution Skin that looks like cpanel, Just do this step: Access Your server with root access via SSH 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 Fill the wile with this CSS code:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1186","post","type-post","status-publish","format-standard","hentry","category-promo"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t