Keystone-classic: How to add a complete custom Admin UI theme

[chrisformula]

Is it possible to override the default UI in the admin panel with your own custom css and how can you change the view elements thereof?

For ex: Id:=Nav to change to id=CusNav and pull through the css styles as well?

[chrisformula]

Anyone?

[ghuroo]

regarding the first question, you can apply your own CSS rules with LESS by placing the following instruction in your index.js file:

keystone.set('adminui custom styles', 'path_to_sass_files/_adminui.less');

[chrisformula]

@ghuroo Awesome and changes the layout?

[ghuroo]

unfortunately I haven't touch any of the react html elements, since I believe it's bad politics to ever touch the source code of a framework/library.

I suppose by "change the view elements" you mean to add custom actions/buttons/DOM elements to views in Admin UI.

That was also one my first necessities, I suggest you to add workarounds with all possible means without ever touching the keystone source code.. like hooks, for e.g.

[chrisformula]

@ghuroo Yeah I basically have a admin template I did in HTML and would like my backend to look like that. Do you have any examples of how I can change the .hbs views for admin ui perhaps?

Or how I can go about it?

[chaitanyagiri]

@chrisformula did you got your answer? Actually, I need to do the same only option I can think of is editing source keystone file and republishing it is there any other way possible.

[chrisformula]

@chaitanyagiri No unfortunately not, have you perhaps figured it out?

[chaitanyagiri]

I didn't find anyway to do it hence I had to resort to editing the source file. That worked just fine for me but I kinda wished that they had an easier way to do it.

[chrisformula]

@chaitanyagiri Yes me too. And can you update keystone without any effect on your source file changes?

[chaitanyagiri]

I don't know what you mean by source file changes but I'd like to confirm that I changed the source file and got the desired result without even breaking the code.