Hestia CP Design and Front-end

Hi everyone.

For a long time I was a Vesta CP user. By coincidence, a few days ago, I met Hestia CP.
My server has been running for a long time and it was time to update it.
I was surprised to find out that Vesta had stoped it’s development. But I really glad that I found Hestia.
I ran my server on Debian 10 and Hestia.

The first thing that I noticed was UI. In my opinion is become worse. Typography became worse.

I was trying to fix it for myself and found out that there are a lot of work for improving not only design part but also in front-end development. Regarding that I have 2 propositions:
1 - I can help to improve existing version of design.
2 - I can help with development of new designs and front-end markup.

If you need my help we can start cooperating.

P.S. I have more than 15 years experience in design and web development.

2 Likes

Hi @arx,

Thanks for reaching out. If you’d like to contribute to the project in any way, please first read the contribution guidelines (CONTIRUBTING.md) on GitHub and submit your work via pull request for our team to review.

3 Likes

Hestia comes with 3 theme options, have you checked them out?
:8083/edit/server/ -> ‘Basic Options’ -> ‘Appearance’

1 Like

Thanks. I didn’t know about that option because I don’t have any options here)
Here is screenshot of my installed version of Hestia (1.2.1).

I made some minor changes to the top and stopped. I thought maybe I could bring my contribution to the community and share my experience.

Can you upload screenshots of each versions to see how it looks like?

1 Like

Default

Flat

Dark

2 Likes

Ok. Thanks.
Can anyone provide me source file of logo?

Hello Arx,

I can agree the current UI screams for a improvement… How ever as usual the most programmers are not the best UI/Web designers… (At least I am not)

If you have any ideas please go ahead and share them. Best way this is done via a pull request via Github.

Source file

This is “default.css”

If you want change from current themes

Download the https://github.com/hestiacp/hestiacp/blob/main/bin/v-list-sys-themes and release the current one. You are now able to change styles

1 Like

As it easier to read for every body and it no secret…

There are no specific reasons for the color coding of the letters except for the reason “it looks good”

If you have any ideas please share them.

I really like the UI its a breath of fresh air from the everyday flat bootstrap css framework with a sidebar in most of the apps you use today. Design trends do come and go but i’m not sure anyone knows whats the best design choice its all still experimental.

2 Likes

I do agree layout isn’t bad but still can use a lot of improvements. And as HestiaCP is opensource software everybody who is able to assist with it.

It doesn’t matter if you implement a new feature, fix a bug, help us with translating, help with testing or create a bug/feature request. All the help is appreciated it could take some time before we review your pull request but we try to check / review it as good as possible.

As long you have read the communities guidelines https://github.com/hestiacp/hestiacp/blob/main/CONTRIBUTING.md any good ideas can help us to improve and bring HestiaCP to a higher level…

The issue with design a lot of person can like it but there will be always x persons hate it. That hasn’t changed in the last 10 year and it won’t change in the future… What I have seen I think it will be a improvement. Just wait until he submits a pull request and hopefully I am surprised with the improvements…

1 Like

I am totally agree that always will be persons who will not like new look. In such of projects like this, changes should be made gradually. Users are used to the interface for a long time and switching to a new one can be harmful. So I think we should start with small improvements.

I would like to make changes to the markup of the pages. Because of this, the css code uses inappropriate and redundant conditions, for example “!important”. And it’s not mobile optimized.

Unfortunately, it will not be as fast as we would like because I work on other projects. But I will do my best. :slight_smile:

There is a lot of “legacy” code in it from Vesta. So nothing is a surprise for me. Last time I was crying in the corner because the I couldn’t get the tables working as I wanted…

1 Like

I saw your URL, the login page with username, then next step password is only when 2FA is enabled?

My v1.2.1 has normal login page, as you can see here: https://shorturl.at/boMOZ

I am running 1.2.2-alpha / 1.2.2-beta / I don’t know version. This server I am using takes the abuse from testing an development without damaging my production servers… For a few bucks a month I am happy to the risk of not damaging my main servers… And it happened already a few times I *** messed my test VM that a reinstall was the only option…

But this “New” login will be released in 1.2.2 The old system had some disadvantages with iOS / Safari and I could raise my server load to 80% with only 1 user trying to enter his username / randomly entering his username…

It will have 3 steps
Username -> Password -> 2FA Code -> CP
If 2FA code is not required it will go from Password to Control panel

It will also include some additional features as
“Session Limiting (Default 60 min)”
Logging all successful login attempt

See https://github.com/hestiacp/hestiacp/pull/1016

2 Likes

That’s amazing.