KeyHelp Themes

[pandogulf]

Greetings KH Community,

I tried looking for additional themes for the Panel. I managed to find one called minimal "currently broken" unfortunately.
https://github.com/iandk/keyhelp-theme

Although the default theme looks exccellent but one would like to change every now and then.

Are there any themes available for KH ? a grid/icons theme would be nice or the default theme with ability to change skin color

I hope we see more designers in the community to add more themes for KeyHelp.


I would participate in designing a new theme, the problem is that I suck in designing website and stuff. But I'll give it a try anyway, so is there a template/guidelines for that ?


Have a good day.

[Tobi]

Buy the Pro-Version and get a dark mode for keyhelp.
Or use the whitelabel CSS and do whatever you want.

[v3ng]

Hi,

I started designing this theme a few months ago but haven't had the time to maintain it unfortunately.
I might have a look at it again at some point

[pandogulf]

That would be appreciated v3ng

Thanks

[pandogulf]

Buy the Pro-Version and get a dark mode for keyhelp.
Or use the whitelabel CSS and do whatever you want.

I have the pro version, and I believe the whitelabel CSS only changes the colors/looks and doesn't touch the overall layout.

It would be interesting to see a new theme/layout with Grid style (like DirectAdmin and Cpanel) in the future update ( not necessary this year)

Pretty sure there is a plan for additional themes or why would we see Themes under configuration if the plan to have one forever

Is there a way for us as community to help with designing new themes ? is there a template that we can use to do so..

[pandogulf]

Hello All,

I started playing with the additional CSS and I made a free Dark Mode for Standard KeyHelp panel users. I call it the poor-man DarkMode




Instructions:

Settings>Configuration>White Label>(Edit)All Languages: Inside the Additional CSS box add this code...Then click SAVE and Enjoy

Code: Select all

.title {
    color: white;
}

html {
    background-color: black;
}

#header {
    background-color: #141415;
}

#user-menu {
    background-color: #1e1c1c;
}

#header a {
    color: #e0dada;
}

.dropdown-item {
    color: #cacaca;
}

.card-header {
    background-color: #00000040;
}

.card {
    color: #fff;
}

.card-content {
    background-color: #7b7b7b21;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
    background-color: #f0efef;
}

.card-footer {
    background-color: #b6b6bc;
}

.breadcrumb li + li::before {

    color: #fffafa;
}

.breadcrumb li.is-disabled a {
    color: #fff;
}

.breadcrumb a {
    color: #6fbcff;
}
.breadcrumb a:hover {
    color: #ffb96f;
}

.card {
    color: #2b2b2b;
}

.has-text-grey-light {
    color: #8e8e8e !important;
}

.tabs a {
    color: #ffffffbf;
}

.tabs.is-boxed li.is-active a {
    background-color: #d7d7d7;
}

.tabs.is-boxed a:hover {
    background-color: #ddd;
    border-bottom-color: #0f0f0f;
}
.select select, .textarea, .input {
    background-color: #fbfbfb;
    border-color: #dbdbdb;
    color: #363636;
}
input[disabled], input[readonly], textarea[disabled], select[disabled] {
    color: #0d0d0d !important;
    border-color: #999797 !important;
    background-color: #c7c7d2 !important;
}
.has-text-grey {
    color: #555 !important;
}
.table {
    color: #000;
}
.file.is-link .file-cta {
    background-color: #285bac;
    border-color: transparent;
    color: #fff;
}
.button.is-link {
    background-color: #285bac;
    border-color: transparent;
    color: #fff;
}

.button.is-danger {
    background-color: #a62c44;
    border-color: transparent;
    color: #fff;
}

body {
    color: #cecece;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
}

a {
    color: #0062ff;
}

Also you can make your OWN banner or upload the SVG img attached ZIP (extract the SVG file first then upload it at the Banner for internal area - in the same White label page).
DOWNLOAD HERE download/file.php?mode=view&id=1351

[Alexander]

Of course it is appreciated to design an own theme. You can even do this, without using the White-Label feature and offer an own stand-alone theme, by creating a sub-folder within the /theme/ directory (have a look how Olli uses this feature with his theme viewtopic.php?f=16&t=8961)

The reason why I am writing and as a gentle notice for you: You have modified the KeyHelp logo. KeyHelp and all of its assigned logos / images are a registered trademark of the Keyweb AG company. You may not want to change the KeyHelp logo as you did with your preview images .

You can of course rename the control panel to the name you prefer, and also use an own logo.

[pandogulf]

Of course it is appreciated to design an own theme. You can even do this, without using the White-Label feature and offer an own stand-alone theme, by creating a sub-folder within the /theme/ directory (have a look how Olli uses this feature with his theme viewtopic.php?f=16&t=8961)

The reason why I am writing and as a gentle notice for you: You have modified the KeyHelp logo. KeyHelp and all of its assigned logos / images are a registered trademark of the Keyweb AG company. You may not want to change the KeyHelp logo as you did with your preview images .

You can of course rename the control panel to the name you prefer, and also use an own logo.

Sorry, and above post updated

Sure , I'll create my own theme soon and for now this would be an easy guide for a quick dark mode through WL.

Thanks Alex.

[hzm120]

if u need help let me know I can see I can make it more Ajax type -- or if u have a idea on what u want I can do my best to get it rolling