DirectAdmin cPanel skin ?

bestariwebhost

Verified User
Joined
Aug 17, 2019
Messages
28
Location
Indonesia
Hello All,
If you interrested to Skin thats 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/bestariwebhost.css
3. Fill the wile with this CSS code:

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/bestariwebhost.css" or any file name regarding to step 2
11. Click Save

Hope this can help to get cpanel skin in your Directadmin without traditional theme
 
Last edited:

HostinganID

Verified User
Joined
May 5, 2016
Messages
14
Location
Indonesia
Hello All,
If you interrested to Skin thats 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/bestariwebhost.css
3. Fill the wile with this CSS code:

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/bestariwebhost.css" or any file name regarding to step 2
11. Click Save

Hope this can help to get cpanel skin in your Directadmin without traditional theme
Thanks!
Anyway already try this way, very usefull
 

pkwebhost

Verified User
Joined
Jul 2, 2019
Messages
36
Hello All,
If you interrested to Skin thats 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/bestariwebhost.css
3. Fill the wile with this CSS code:

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/bestariwebhost.css" or any file name regarding to step 2
11. Click Save

Hope this can help to get cpanel skin in your Directadmin without traditional theme
Hi

Thanks for this great css code , its completly like Cpanel ,

can you please also provide css coding for reseller like cpanel whm ?
 

bestariwebhost

Verified User
Joined
Aug 17, 2019
Messages
28
Location
Indonesia
Hi

Thanks for this great css code , its completly like Cpanel ,

can you please also provide css coding for reseller like cpanel whm ?
Hi,
Directadmin totally Different with WHM cPanel
Directadmin have the same GUI both user and Reseller level,
and cPanel WHM have different GUI between Reseller (using WHM) and users (using cPanel)
 

DewlanceVPS

Verified User
Joined
Oct 3, 2016
Messages
84
Hello All,
If you interrested to Skin thats 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/bestariwebhost.css
3. Fill the wile with this CSS code:

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/bestariwebhost.css" or any file name regarding to step 2
11. Click Save

Hope this can help to get cpanel skin in your Directadmin without traditional theme

Any difference between your modification and "Traditional" sub theme. (Provided by DirectAdmin) ?
 

bestariwebhost

Verified User
Joined
Aug 17, 2019
Messages
28
Location
Indonesia
Any difference between your modification and "Traditional" sub theme. (Provided by DirectAdmin) ?
Traditional Subtheme modified via localhost and should set /usr/local/directadmin/directadmin set check_referer 0. Not good for Production server (Security issue), but good for development server.

My Modification, modified directly via customize evolution skin. you doesn't need to install nodejs and traditional subtheme on your localhost. You can roll back to default evolution skin by removing external css.
 

webhostingux

Verified User
Joined
Oct 29, 2019
Messages
18
Hem...why we're keep trying cPanel skin in Directadmin instead create better one? Directadmin is really great and simply already.
 

bestariwebhost

Verified User
Joined
Aug 17, 2019
Messages
28
Location
Indonesia
Hem...why we're keep trying cPanel skin in Directadmin instead create better one? Directadmin is really great and simply already.
For those of us who are familiar with all web panel platforms and are familiar with the command line, maybe changing the Directadmin GUI to look like cpanel is not important. But if we are a hoster who previously used cPanel and then switched to directadmin, then most clients will feel confused with the Directadmin GUI because they have been using cPanel for years. Changing the appearance of Directadmin to look like cPanel is one way to reduce client confusion so that they more easily find the features they want.

If changing the directadmin icon to the cpanel icon is not a violation of copyright, it could be that this will make it easier for clients to find the menu they want. if possible the arrangement of icons is also made similar so that they are not confused when using directadmin
 
Top