DirectAdmin cPanel skin ?

[ddrhost]

Hello friends. I also created something similar, based on an Evolution subtheme.

Admin: https://prnt.sc/p5qzto
Clients: https://prnt.sc/p1vmop

 

[bestariwebhost]

Hello friends. I also created something similar, based on an Evolution subtheme.

Admin: https://prnt.sc/p5qzto
Clients: https://prnt.sc/p1vmop

Great job..

 

[jwn]

Share your icon please

 

[DewlanceVPS]

Share your icon please

Do not use that icons, cpanel can take action against you and bad for directadmin.

 

[itscoffetime]

Hello friends. I also created something similar, based on an Evolution subtheme.

Admin: https://prnt.sc/p5qzto
Clients: https://prnt.sc/p1vmop

Do you have any ETA for this? it looks sick

 

[apogee]

really nice, I'll buy it as soon as it is finished!

 

[jamesf]

I need this in my life.... any updates on completion?

 

[lolfust1]

any updateS?

 

[itscoffetime]

Any news? Or any other template avaliable?

 

[bestariwebhost]

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:

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

 

[HostinganID]

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:

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]

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:

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]

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]

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:

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]

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.

 

[bestariwebhost]

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

 

[aroiz]

Hello, the skin are in english, the ozPanel ?

 

[ricrey]

Any progress with this issue? It is very interesting to make customers feel that there are no major changes.

 

[factor]

Progress from the users above? I dont know.

If you think DA is making a cPanel look alike skin it really doubtful. Think about the legal ramifications.

there are no major changes

But there are major changes... I would be open and honest with your user base. Tell them what happened and why you left cPanel.

 

[ricrey]

Progress from the users above? I dont know.

If you think DA is making a cPanel look alike skin it really doubtful. Think about the legal ramifications.

But there are major changes... I would be open and honest with your user base. Tell them what happened and why you left cPanel.

My clients know that we are with directadmin, what I wish is that their experience in the panel be similar.

many open tickets asking where is such an option, and when they are told they say aaaa I could not find it by the icon .. etc ..