New ProcessWire admin theme on dev branch

[ADONIS]

Problem solved

Instead I add the text field in AdminThemeDefault.module file, I added it in AdminThemeTest.module

Now everything works ok

phew :)

[Jonathan Lahijani]

I think Kongondo has it mostly right. But for the sake of keeping it simple, maybe ignore the part about making a copy of the AdminThemeDefault for the moment, and just make your edits to AdminThemeDefault. Once you've got them in place, you can always copy it to a different admin theme in /site/modules/ if you want to. But lets get down how to add color themes first. 

1. Add your new color theme option to the AdminThemeDefault.module file like Kongondo mentioned. 

2. Go into /wire/modules/AdminTheme/AdminThemeDefault/styles/sass/ and copy _vars.scss to _colors-pete.scss. The _vars.scss is based around the Warm color theme. If you prefer to use a different one as a starting point, then copy _colors-classic.scss (for example) to _colors-pete.scss instead.

3. In the same directory, edit the main.scss file and add your new colors file, making sure the others (except 'vars') are commented out:

@import 'vars';
@import 'mixins';
//@import 'colors-classic';
//@import 'colors-modern';
//@import 'colors-futura';
@import 'colors-pete'; // ADD THIS LINE

4. Make edits to your _colors-pete.scss file as you see fit. You don't need to know Sass to do this, as everything is predefined with Sass variables that you can just insert new color values into it. However, read the following steps first, as you may want to setup your Sass watch to keep an eye on the changes for you as you go, so that you can see them take place in your browser as you make them. 

5. Compile the styles/sass/main.scss file to styles/main-pete.css using whatever method you prefer. The standard method would be to use Sass watch. If you were currently in your styles/ directory, you could type this at the command line to automatically compile changes to main-pete.css. 

sass --watch sass/main.scss:main-pete.css

This will keep running indefinitely, monitoring for changes and compiling them to main-pete.css every time a change is made to any one of the scss files. If you only wanted it to run once, then you'd just omit the "--watch" part. 

6. Before or while you are making changes to your _colors-pete.scss file, go ahead and login to PW admin and go to Modules > Core > Default Admin Theme. Click "Settings" and change the color theme to "Pete", so that you can see your changes as you go. 

Is this still the recommended way (in relation to the current dev branch... 2.4.14) to make a color variation based on the default admin theme?  Doesn't this approach keep files in /wire/ which would be deleted upon an upgrade (bad practice)?

[diogo]

An interesting post about the use of system fonts on Medium https://medium.com/@mwichary/system-shock-6b1dc6d6596f#.i0mjpd3zk

It's for sure a better alternative to "Arial", "sans-serif"

Edit: I just ruined my beautiful likes=posts score

[Martijn Geerts]

@diogo: Corrected