To create a new admin theme, you would copy the default admin-templates directory (/wire/templates-admin/) to here:
When ProcessWire sees /site/templates-admin/, it will use it instead of the default one.
Now you can modify any of those files in /site/templates-admin/ and your changes should be reflected in the admin control panel.
To distribute it to other people, you would just zip up the dir and then anyone else can unzip it to /site/templates-admin/ and have it work. I will be glad to setup a directory of admin themes on the site if anyone else decides to make one.
That is all there is too it. But here are some other details and recommendations you may find helpful:
Why not just edit the files in /wire/templates-admin/ ?
You certainly could do this, but you should consider everything in /wire/ specific to ProcessWire, and everything in /site/ specific to your installation. If you were to modify the files in /wire/templates-admin/, then your changes would get overwritten every time you upgraded ProcessWire. Whereas, /site/templates-admin/ is not overwritten during upgrades.
What if I only want to change stylesheets and images?
If you only need to change stylesheets and images, then I would recommend having your /site/templates-admin/default.php just include the one in /wire/templates-admin/, i.e.
And likewise for any other files in there that have markup that you don't want to modify. This includes notices.inc and debug.inc. You'll also see a controller.php file there, but that is already just a placeholder so no need to make any changes to it.
What are all the files in ProcessWire's admin theme and what do they do?
Files you can edit:
- debug.inc - An HTML/PHP file that is included when $config->debug is true. It outputs general debugging information in the admin.
- default.php - The main HTML/PHP container template. All admin output goes through this file.
- notices.inc - Generates the markup for admin messages and error notices that appear at the top of the screen.
- styles/ - Directory containing CSS files/stylesheets
- styles/main.css - Initial layout and styling for the admin control panel.
- styles/reset.css - Resets all browser styles
- styles/ui.css - User interface override styles. This is the last stylesheet loaded so it can more easily modify styles that came before it as needed.
- styles/JqueryUI/ Directory containing jQuery UI specific stylesheets and images. You can use jQuery UI's themeroller for these if you prefer. http://bit.ly/eTVbDC
- styles/ie.css - Styles specific to IE
- styles/ie7.css - Styles specific to IE7 and below. Because we don't support those, this basically just turns off IE7 support.
- styles/images/ - Images used by any of the above stylesheets.
Files you shouldn't bother editing:
- controller.php - This is just a placeholder that includes a controller in /wire/core/. You should leave this file as-is.
- install-head.inc - These HTML files are used by the installer. You can edit them, but ProcessWire will still use the one in /wire/templates-admin/ since they are only used before installation. As a result, you can delete them from your /site/templates-admin/ if you prefer.
- install-foot.inc - See above.
- scripts/install.js - See above.
- styles/install.css - See above.
Modifying form widgets with jQuery UI
Most of the form inputs in ProcessWire are based on a jQuery UI theme. It is located in this file /wire/templates-admin/styles/JqueryUI/JqueryUI.css (and the images directory below it). Like the other CSS files, that can be edited directly. But since this was originally built using JQuery UI's Themeroller, you can continue to modify it with that if you'd prefer. Here is a link to it with ProcessWire's admin styles already pre-populated: http://bit.ly/eTVbDC
Copyrights and Logo
You should leave existing copyright notices, links to processwire.com and the name ProcessWire in place. You should also add a notice indicating "[Admin theme name] copyright [your name]", i.e. "Widget admin theme copyright Gonzo Deutschdeung". We also prefer that you keep a copy of the ProcessWire logo somewhere in your design, but it's up to you. A photoshop file of the logo at high resolution is attached to this message.