Over the past year, we've been working hard to create a new look for DirectAdmin. We've called this new skin Evolution. This new skin has a similar feel to our directadmin.com website.

The changes brought forward with this new skin are far more than just the skin itself, but also how it communicates with DirectAdmin. We've added almost 100% JSON support in DirectAdmin, allowing for in-page editing. This should also open up many options for plugin/script designers as they no longer need to rely only on the CMD_API calls. The GUI CMD_ calls can be used by simply adding json=yes to the request.

I want to use the Evolution skin

Evolution is the default skin in new installations of DirectAdmin. If you have another skin set to be the default one, and would like to change the default to Evolution, including the login page, login as admin, switch to reseller level, go to > Reseller Tools > Skin manager, select the 'evolution' skin and click 'Set Global'.

To change a skin just for you (admin), click the 'Apply to me'. To change a skin for your users (under admin reseller), click on 'Apply to All users'.

Change everyone on the server to Evolution

The following commands will change every admin/reseller/user and all the packages to use the evolution skin instead of enhanced:

cd /usr/local/directadmin/data/users
perl -pi -e 's|skin\=enhanced|skin=evolution|g' ../admin/packages/*.pkg
perl -pi -e 's|skin\=enhanced|skin=evolution|g' */packages/*.pkg
perl -pi -e 's|skin\=enhanced|skin=evolution|g' */user.conf
perl -pi -e 's|docsroot\=./data/skins/enhanced|docsroot=./data/skins/evolution|g' */user.conf
1
2
3
4
5

Evolution skin customizations

Evolution skin has an extensive customization support. This allows administrators and resellers to change how Evolution looks for themselves and their users.

All supported customizations can be managed in the Admin Tools / Customize Evolution Skin section.

Evolution customizations follows a limited inheritance structure:

All changes made by reseller accounts are visible for:

  • the reseller account itself
  • all user accounts that belongs to this reseller account

All changes made by admin accounts are visible for:

  • the admin account itself
  • all user accounts that belong to this admin account
  • all reseller accounts that belong to this admin account, unless they have their own customizations (local reseller customizations takes precedence)
  • all user accounts that belongs to resellers that belongs to this admin account, unless resellers have their own customizations (local reseller customizations takes precedence).

Customizing main colors

This section allows to change key colors used throughout the Evolution skin. Colors are grouped into two categories Component Colors and Theme Colors.

Component colors are colors used in the inner pages for text, links, tables, and small UI elements.

Theme Colors are used by evolution layouts for menus headers and other big layout related elements.

Customizing logos

Customizing user level

If you are using your own technical support system, you might want to provide a URL to it. This can be done by in Support & Help -> Manage Tickets -> Ticket System Settings, just untick 'Ticket System Enabled' and it will let you input the URL there.

If you have any other external systems you wish to add to the menu, you may do this using the Customize Evolution Skin > Menu: User > Support & Help > [Click on section title] > Add Entry on the right. Just change the radio button from 'Route' to 'Link', then provide a link to your external system, name it, and add an icon.

CSS Customizations

In this section you can add extra CSS rules that will be included in Enhanced skin. There is a section for styles that will be included always, and separate sections for individual layouts.

When writing custom CSS to make it more portable it is possible to use pre-defined variables for colors and images. Writing portable styles will allow you to utilize color and image customizations supported by Evolution without having to update your styles.

Here is a list of pre-defined CSS variables that could be used in custom styles:

VariableComment
--img-logoURL of logo image (light or dark depending on active mode)
--img-logo-lightURL of light mode logo image
--img-logo-darkURL of dark mode logo image
--img-symbolURL of symbol image (light or dark depending on active mode)
--img-symbol-lightURL of light mode symbol image
--img-symbol-darkURL of dark mode symbol image
--classicTheme color for classic layouts
--refreshedTheme color for refreshed layout
--primaryPrimary component color
--safeSafe component color (for confirmations)
--dangerDanger component color (for warnings)
--neutralNeutral component color

There is also scopes system that allows styles to be applied conditionally. Scopes are special classes that will be applied on the root html element if some conditions are met. Adding scopes to styles allows to controlling when particular style will be used.

Here is the list of predefined scope values:

Style selector for scopeStyle will be used when
html.mode\:lightEvolution is in light mode
html.mode\:darkEvolution is in dark mode
html.dir\:ltrSelected language uses left to right writing direction
html.dir\:rtlSelected language uses right to left writing direction
html.media\:small-phoneDevice screen width is 480px or lower
html.media\:phoneDevice screen width is between 480px and 768px
html.media\:tabletDevice screen width is between 768px and 1024px
html.media\:desktopDevice screen width is 1024px or higher
html.device\:mobileUsed on mobile phone
html.device\:desktopUsed on desktop browser

Starting DA 1.642 Evolution no longer supports sub-themes, if you have used traditional sub-theme it is possible to create same look and feel by adding this custom CSS block for Grid layout:

/* Styles to for 'traditional' sub-theme */
html.layout\:grid .app .app-header {background: var(--classic);color: white;}
html.layout\:grid .app .app-header .header-logo {background-image: var(--img-logo-dark); }
html.layout\:grid .app .app-header .userbar {margin-left: 1rem;}
html.layout\:grid .app .app-header .userbar>.userbar-button>.userbar-button-text {color: white;}
html.layout\:grid .app .app-header .userbar>.userbar-button>.ui-icon-counter .roundBadge {background: var(--classic-l90);color: var(--classic);}
html.layout\:grid .app .app-header .userbar .userbar-button-caret>svg>path {fill: white !important;}
html.layout\:grid .app .app-header .nav-grid-trigger svg {color: white !important;}
html.layout\:grid .app .app-header .nav-grid-trigger svg:hover {color: white !important;opacity: 0.8;}
html.layout\:grid .app .app-header .domainsDropdown .Select>.Select__Button {border-color: var(--classic-l10);background: transparent;}
html.layout\:grid .app .app-header .domainsDropdown .Select>.Select__Button>.Select__Button__Label {color: white;}
html.layout\:grid .app .app-header .domainsDropdown .Select>.Select__Button>.Select__Button__Caret>svg {color: var(--classic-l10);}
html.layout\:grid .app .app-header .domainsDropdown .Select>.Select__Button>.Select__Button__Search {background: transparent;color: white;}
html.layout\:grid .app .app-header .domainsDropdown .Select>.Select__Button>.Select__Button__Search::placeholder {color: var(--classic-l30);}
html.layout\:grid .app .app-header .search input[type="text"] {background: transparent;color: white;border-color: var(--classic-l10);}
html.layout\:grid .app .app-header .search input[type="text"]::placeholder {color: white;opacity: 0.9;}
html.layout\:grid .app .app-header .search .search-icon>.icon>svg, html.layout\:grid .app .app-header .search .options-icon>.icon>svg {color: var(--classic-l10);}
html.layout\:grid .app .app-header .ui-toggle-switch {background: var(--classic);color: #fff;border-color: var(--classic-l10);}
html.layout\:grid .app .app-header .ui-toggle-switch>.label {background: var(--classic);color: #fff;}
html.layout\:grid .app .app-header .ui-toggle-switch>.options>.slider {background: var(--classic-l30);}
html.layout\:grid .app .icons-grid .filters-bar>.filters-bar-search {flex-grow: 1;margin-right: 1rem;}
html.layout\:grid .app .icons-grid .icons-grid-category {border: 1px solid #e5e5e5;border-radius: 4px;}
html.layout\:grid .app .icons-grid .icons-grid-category .icons-grid-category-title {padding: 1rem 1rem;background-color: var(--classic);border-top-left-radius: 4px;border-top-right-radius: 4px;color: white;}
html.layout\:grid .app .icons-grid .icons-grid-category .icons-grid-category-entries .icons-grid-category-entry {border-width: 0;}
html.layout\:grid .app .dashboard-mobile>div {padding: 1.5rem;padding-left: 1rem;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab {padding: 0 !important;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab .dashboardTabHeader {padding: 1rem 1rem;font-size: 1.3rem;font-weight: 600;letter-spacing: 0.5px;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab .dashboardTabHeader .icon svg {width: 16px !important;height: 16px !important;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab.-is-active {border: 1px solid #e5e5e5;border-radius: 4px;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab.-is-active .dashboardTabHeader {background: var(--classic);color: white;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab p.type\:h6 {padding: 0 1rem;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab .dashboardTab-more {margin-left: 1rem;}
html.layout\:grid .app .dashboard-mobile>div section.dashboardTab.dashboardTab .widget-content {padding: 1rem;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

This section allows adding or removing or reordering menu elements.

How to translate the evolution skin

Evolution skin has an independent sets of translations. It is managed in a separate translation management system at translate.directadmin.comopen in new window.

Languages that covers > 80% of all translations strings will be bundled with new Evolution builds.

IF you have a full new language translation file we can help you import it into the translations system. Please contact us in the formopen in new window or open a support ticketopen in new window.

Last Updated: 8/4/2022, 12:43:26 PM