vps header 1200x200

8.4 Customize the Appearance of your Hestia Control Panel

There is a relatively easy way to change the appearance of your Hestia Admin and User Control Panels. In this article, we will review how to create a custom Hestia theme.

Hestia comes with 4 themes which you can choose from by logging into the Admin Control Panel, then clicking on Settings, Configuration, Basic Options, Appearance. The options are dark, default, flat and vestia. To see the four CSS files that determine the appearance of these four themes, select the Admin user and click Edit. Then Advanced Options. Make sure the SSH Access is set for bash. Then save and close the admin user settings. Then click on Files, Usr, local, hestia, web, css, src, themes:

01

Note that flat.css is only 4 kb while default is 80kb. Click on each of these two see how they are written. Flat has about 200 lines. Vestia has about 700 lines. Dark has about 1500 lines and Default has 4247 lines. You can copy the CSS from any or all of these. Because default is the most comprehensive, we will copy that. Then paste it into an empty bluefish document and save it as my_theme.css.

Note, however, that you can not directly edit any of the four Hestia default themes. They are protected from editing as any edits would be over-written during the next update.

Create a Custom Hestia Theme

We have four specific goals in making our new theme:

#1 Increase the font size of small text to at least 1.0rem.

We will add lines intended to increase the font size of small text by about 20% to make the text easier to read and improve our Hestia Tutorial screen shots.

#2 Darker the font color from 777 to 223

This will also make the text easier to read and improve our Hestia Tutorial screen shots.

#3 Change the page background color from white to light blue.

We will change the background color when possible from white to light blue to make the contrast a little easier on the eyes.

#4 Change the Hestia logo images to white label images

This includes changing the image type from svg to png to make the images easier to edit and replace with custom logos. This will allow businesses to brand their own Control panels. Joomla 4 has also introduced the ability to white label their control panel.

We can also use Firefox Tools Web Developer Inspector to determine the class names of items we want to change. This file will then be copy pasted into the beginning of the flat theme.

Changes from the default CSS below are in bold.

body {

letter-spacing: 0;

margin: 0;

background-color: #eef

font-family: Exo, Arial;

overflow-x: hidden;

font-size: 1.0rem;

height: 100%;

color: #222;}

small { font-size: 100%;}

.text-small { font-size: .99em;}

.l-logo {

background-image: url(/images/logo-header.png);

background-repeat: no-repeat;

float: left;

height: 28px;

margin-top: 5px;

width: 54px;}

.l-header {

background: linear-gradient(to bottom, rgba(104, 145, 196, 1) 0, rgba(69, 114, 181, 1) 50%, rgba(65, 90, 149, 1) 100%);

background-color: #69c;

border-bottom: 2px solid #ccf;

overflow: hidden;

position: fixed;

width: 100%;

z-index: 900;

height: 38px;

text-shadow: 1px 1px rgba(0, 0, 0, .25);

box-shadow: 0 4px 10px rgba(100, 100, 100, .4);}

.l-header a { font-size: .99rem;}

.l-menu__item.l-menu__item--active a {

color: #4686b8;

font-size: .99rem;

background: linear-gradient(to bottom, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, .75) 30%, rgba(255, 255, 255, 1) 95%);

text-shadow: 0 1px rgba(255, 255, 255, .8);

border-left: 1px solid rgba(255, 255, 255, .98);

border-right: 1px solid rgba(255, 255, 255, .98);}

.l-stat__col a {

display: inline-block;

padding-bottom: 36px;

min-height: 70px;

width: 136px;

border-bottom: 4px solid #fff;

overflow: hidden;

background-color: #eef;

padding-top: 3px;

margin-top: -3px;

padding-left: 5px;}

.l-stat__col ul {

list-style-type: none;

font-size: .99rem;

padding-left: 0;

line-height: 14px;}

.l-stat__col li {

color: #222;

margin-bottom: 8px;

text-transform: lowercase;}

.l-stat__col-title {

text-transform: uppercase;

font-weight: 600;

color: #222;

min-height: 21px;

font-size: 18px;}

.context-menu li {

border-bottom: 1px solid #ddd;

color: #2e2e2e;

cursor: pointer;

font-size: .99rem;

padding: 12px;}

.subtitle {

color: #c36;

font-size: .99rem;

font-weight: 600;

margin: 20px 0 18px 129px;

text-transform: uppercase;}

.lang-bg .l-stat__col-title {

font-size: .99rem;

font-weight: 700;}

.lang-bg .l-stat__col .fas,

.lang-bg .l-stat__col--active .fas { font-size: .99rem;}

.l-unit {

color: #222;

padding: 0 0 0 14px;

overflow: hidden;

font-size: .99rem;

border-radius: 0;

border-left: 1px solid transparent;

border-right: 1px solid transparent;}

.l-unit .subtitle,

.l-unit-ft .subtitle { color: #c36; font-size: .99rem;

font-weight: 600; margin: 20px 0 18px 129px;

text-transform: uppercase;}

.l-unit.l-unit--outdated .l-unit__date { color: #d24c4c; font-size: 14px; text-transform: uppercase; font-weight: 600;}

.l-unit__servername { color: #222; font-size: 24px; margin-bottom: 10px; font-weight: 300; letter-spacing: -.01em;}

.l-unit__name.small { font-size: 18px;}

.l-unit__name span { color: #444; margin-left: 30px;

font-size: .99rem; font-style: italic;}

.l-unit__name span { color: #444; margin-left: 30px;

font-size: .99rem; font-style: italic;}

.l-unit__ip { margin-bottom: 26px;

font-size: .99rem; color: #222;}

.display-ip { font-size: .99rem;}

.units.active .l-unit.focus .l-unit-toolbar .shortcut {

display: block;

background-color: #69a298;

border-radius: 13px;

color: #fff;

cursor: pointer;

display: block;

font-size: .99rem;

font-weight: 600;

line-height: 25px;

padding-left: 7px;

padding-right: 9px;

position: absolute;

right: 3px;

top: 3px;}

.units.active .l-unit.focus .l-unit-toolbar .shortcut.delete {

font-size: 14px;

padding-left: 2px;

padding-right: 5px;

text-transform: capitalize;}

.l-unit__stat-col.volume {

font-size: .99rem;

line-height: 17px;

float: right;}

.actions-panel__col a {

color: #222;

font-weight: 600;

font-size: .99rem;

display: inline-block;

cursor: pointer;}

.lang-ru .actions-panel__col a {

font-size: .99rem;

padding-top: 1px;}

.lang-tw .actions-panel__col a { font-size: .99rem;font-weight: 400;}

.lang-ar .actions-panel__col a {font-size: .99rem; font-weight: 400;}

#vstobjects .l-center {padding-top: 20px; padding-bottom: 30px; font-size: .99rem;}

.title,

.title b { color: #c36; font-size: .99rem; font-weight: 600;

padding: 0 30px 0 73px; line-height: 30px;

text-transform: uppercase;}

.vst-ok { color: #53ba55; overflow: hidden; max-width: 500px;

text-overflow: ellipsis; white-space: nowrap; font-size: .99rem;}

.vst-input {

background-color: #eef;

border: 1px solid #cfcfcf;

border-radius: 4px;

color: #222;

font-family: Exo, Arial, Arial, Helvetica, sans-serif;

font-size: .99rem;

height: 20px;

margin: 2px 6px 0 0;

padding: 8px 3px 8px 14px;

width: 360px;

font-weight: 400;

box-shadow: 0 1px 4px rgba(0, 0, 0, .15);}

.vst-list {

background-color: #eef;

border: 1px solid #ccc;

border-radius: 4px;

color: #222;

font-family: Exo, Arial, Helvetica, sans-serif;

font-size: .99rem;

font-weight: 400;

height: 36px;

cursor: pointer;

margin: 2px 6px 0 0;

min-width: 380px;

padding: 4px 1px 4px 10px;

background-image: url(/images/arrow.png);

background-position: 360px;

background-repeat: no-repeat;

width: 380px;

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

text-shadow: 0 0 0 #4b4b4b;

box-shadow: 0 1px 4px rgba(0, 0, 0, .15);}

.vst-textinput {

background-color: #eef;

border: 1px solid #cfcfcf;

border-radius: 4px;

color: #222;

font-size: .99rem;

padding: 5px;

width: 560px;

height: 60px;

font-family: Exo, Arial, Helvetica, sans-serif;

padding: 7px 1px 3px 14px;

font-weight: 400;

box-shadow: 0 1px 4px rgba(0, 0, 0, .15);}

.vst-textinput.console {

font-size: .99rem;

width: 630px;

height: 300px;

font-family: Inconsolata, "Lucida Console", Monaco, monospace;

white-space: pre;}

.vst-advanced {

border-bottom: 0 solid #326b9b;

color: #326b9b;

font-size: .99rem;

padding: 2px 2px 0;

text-decoration: none;

text-transform: none;}

.login-box .vst-advanced:hover {

color: #c36;

background-color: transparent;

border-color: transparent;

font-size: .99em !important;

box-shadow: none !important;

background: 0 0 !important;

border: none !important;}

.login-box .vst-advanced:active {

color: #eef;

background-color: #f7d616;

border-color: #f7d616;

text-decoration: none;

font-size: .99em !important;

box-shadow: none !important;

background: 0 0 !important;

border: none !important;}

.vst-advanced:active { font-size: unset;}

.login-box .vst-advanced {

border-bottom: none;

color: #326b9b;

font-size: 12px;

padding: 2px !important;

text-decoration: none;

text-transform: uppercase;

font-size: .99em !important;

box-shadow: none !important;

background: 0 0 !important;

border: none !important;}

.vst-checkbox { font-size: .99rem; margin: 2px 6px 0 3px;

padding: 5px;}

.additional-control {

color: #326b9b;

border-bottom: 0 solid #326b9b;

font-size: .99rem;

cursor: pointer;

text-transform: uppercase;

font-weight: 600;

padding: 2px 2px 0;

text-decoration: none;}

.ftp-path-value,

.hint,

td.hint { color: #222; font-size: .99rem;

font-style: italic; font-weight: 400;}

.ftp-path-prefix {padding-top: 12px; font-size: .99rem; color: #222;}

.ui-dialog .ui-dialog-buttonpane button span.ui-button-text {

padding: 2px !important;

font-size: .99rem !important;}

.optional {font-size: .99rem; padding: 0 0 0 6px; font-weight: 400;}

.data-active b {color: #3b9de8; font-size: .99rem; text-transform: uppercase;}

.data-suspended b { color: #a3a3a3; font-size: .99rem;

font-weight: 600; text-transform: uppercase;}

.data-date { font-weight: 400; color: #777; font-size: .99rem;

line-height: 23px;}

.mail-infoblock {

font-size: .99rem;

color: #222;

border: 1px solid #d9d9d9;

padding: 6px 6px 6px 18px;

margin-top: 97px;

min-width: 320px;

overflow: hidden;

box-shadow: 0 1px 4px rgba(0, 0, 0, .15);

border-radius: 4px;}

.mail-infoblock td { color: #222; font-size: .99rem;

height: 20px; font-weight: 400;}

.additional-info td { font-size: .99rem; height: 20px;

font-weight: 400; line-height: .95rem; min-width: 70px;}

p {color: #222; font-size: .99rem; }

.userlist-email { font-size: .99rem; white-space: nowrap; text-overflow: ellipsis; }

Rather than trying to insert these values to the 4200 lines of the default file, we will simply add them at the very end of my_theme.css. This will cause them to override any competing earlier values.

Add your new theme to Hestia

To add your new new theme, you first need to go to themes where you will find minimized versions of the 4 default themes:

02

Click New and create a new folder called custom.

03

If you have trouble creating this folder with the Hestia File Manager, you can create it in the terminal by starting an SFTP session:

sftp This email address is being protected from spambots. You need JavaScript enabled to view it.

Then copy paste this Linux make directory command

mkdir /usr/local/hestia/web/css/themes/custom

Then exit the SFTP session. Then in the Hestia File Manager, go to the Home /temp folder and click Add files. Add my-theme.css

Then start an SSH session:

ssh This email address is being protected from spambots. You need JavaScript enabled to view it.

Open Midnight Commander with the command mc. Then navigate to the / temp folder and select the my-theme.css file. Click File, Rename/Move.

Delete the word root/ and add the path

/usr/local/hestia/web/css/themes/custom

04

Then click OK.

05

Now click Exit to Control Panel. Click Settings, Configure, Basic Options, Appearance.

06

Change the theme to my-theme. Also, below the box Appearance, check the box “Set as Selected Theme for All Users” then click Save. Then click Back.

07

What's Next?

In our last chapter, we will explain how to set up a Fullhost VPS account and migrate existing websites to your new VPS.