Futura Remixed Admin Theme

[nikola]

I've been quite busy last few months (and still am), but I managed to squeeze new admin theme called Futura Remixed (successor to my Futura theme).

So let's get started:

• complete rewrite of the theme
  
• complete new graphics, includin PageList tree icons etc.
  
• full multi-language support (except "You are logged in as", "Latest updates" and "Newest added" title (could be done by implementing those in language packs I suppose)
  
• complete new TinyMCE theme with Fugue icons (that was pain in the ass)
  
• integrated CodeMagic TinyMCE plugin that uses CodeMirror to highlight the code and HTML beautifier to beautify the code (unlike plain TinyMCE HTML editor)
  
• AdminBar theme
  

How to install:

1. Unpack FuturaRemixed.zip to your /site/ directory
   
2. Replace /wire/modules/Inputfield/InputfieldTinyMCE directory with InputfieldTinyMCE directory contained in the attached InputfieldTinyMCE.zip file
   
3. Extract AdminBar.zip to your /site/modules/AdminBar directory (if you use it)
   

I've tested the theme thourougly but errors may still show up. So if you find them, please let me know, so I can fix them.

When I get time, I'll update this theme with colors from original Futura theme so you could choose between them.

Let's look at the screenshots:

Enjoy the theme as much I've enjoyed making it.

AdminBar.zip

FuturaRemixed.zip

InputfieldTinyMCE.zip

[Pete]

Wow! That all looks awesome! Can't wait to try it out

[Adam Kiss]

Sweet updates! While this theme isn't completely my taste (I don't really like geometric bauhaus-like fonts or big red search bar), I love that you're keeping this theme up to date and on top in terms of quality and thoroughness.

[nikola]

Thanks guys!

[ryan]

Awesome work Nikola! Just tested out here and it works great. Really beautiful admin theme and great details. A few questions/comments:

How do I get the codemagic plugin to work?

I worry a little about having people replace their /wire/Inputfield/InputfieldTinyMCE/ dir because it'll get wiped out whenever they upgrade. Can you think of any ways I can adjust the current TinyMCE setup to support the additions you've made without having to place/replace files in /wire/? Another strategy is that you can just create your own InputfieldTinyMCE_Futura like this:

InputfieldTinyMCE_Futura.zip

Place it in /site/modules/InputfieldTinyMCE_Futura/ and install from the Modules tab. Then change all your TinyMCE fields in PW to use that one instead, as the two won't work together at the same time. But I think putting in another TinyMCE may not be ideal as a long term solution either, just because there's lots of duplication. So ideally I'd like to find a way to support admin theme authors with more customizability to to our existing InputfieldTinyMCE. If you can let me know all the things you had to change, we may be able to take it from there.

I ran into an issue as I scaled down the window that made me think it might just need a min-width set somewhere. This is in Firefox 11.

I find the design of this theme really appealing and inviting with great use of color. There are only two things:

1) The search box is always pulling in my eye like a black hole when I'm trying to look at something else, becoming a bit of a distraction, but I can get used to it.

2) Very minor point, but the p.notes fields look very bold with the green background. It looks like they are the most import info in the field, when they are supposed to be the least important. The intention behind the text in those elements is that p.notes are meant to be secondary/small/faded.

3) Another minor one, but I think TinyMCE is a little hard to use when there is no padding between the edge of it and the text that you are typing. I know they bundle it like that, so I'm probably alone in this.

Thanks again for your great work with this theme!

[diogo]

I worry a little about having people replace their /wire/Inputfield/InputfieldTinyMCE/ dir because it'll get wiped out whenever they upgrade

I think tinyMCE needs some love in PW maybe having more options for it on the module edit page, and not only when assigning it to fields. It could be possible to link to a new skin, to add customized buttons, etc etc. I know this is a lot of work, but maybe it would be worth it, giving the high demand

[nikola]

Ryan,

Unfortunately it's a copy/paste/configure scheme, as for codemagic you could integrate it in you PW distro, some might it find helpful (at least I did ).

Here are the instructions for manual installation for TinyMCE theme and plugin.

Theme installation

1. Unzip futuraremixed-tinymce-theme.zip to /wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/themes/advanced/skins/ directory

2. Change option "skin" to "skin: "futuraremixed" in InputfieldTinyMCE.js located in /wire/modules/Inputfield/InputfieldTinyMCE/ directory

CodeMagic plugin installation

1. Unzip codemagic-plugin.zip to /wire/modules/Inputfield/InputfieldTinyMCE/tinymce-3.4.7/plugins

2. Go to Setup - Fields and edit your Body field or some other field that uses TinyMCE

3. Select Input tab, select TinyMCE Advanced Configuration Options

4. Under theme_advanced_buttons1 or theme_advanced_buttons1 add codemagic

5. Under plugins add codemagic at the end of the plugins line (separated with comma)

I plan to make improvements as you have suggested, search box annoys me sometimes also

codemagic-plugin.zip

futuraremixed-tinymce-theme.zip

[ryan]

Thanks Nikola, I got it working and definitely going to add CodeMagic to the core. The current HTML button is pretty much useless in my opinion, and it's one of those things that causes me trouble almost every day. I wish I'd known about CodeMagic much sooner, this completely solves it.

Diogo I'd like to give more lovin’ to TinyMCE, but I lack the expertise and time to do all the things we'd like to do with it in the short term. Though learning about CodeMagic from Nikola just brightened my day a lot. I'm hoping that eventually we'll find others that wants to help with or take over development of the TinyMCE Inputfield in ProcessWire. Taken on it's own, TinyMCE is a bigger and more complex software that ProcessWire itself. Since TinyMCE is 1 Inputfield of many in ProcessWire, I have to be careful not to let it take over too much time from the rest of PW. TinyMCE will gladly take a full day to figure out a very small thing. I'm certain there are others that can do the TinyMCE stuff better than I can. But I'm going to do my best to keep mastering it either way, and put in incremental improvements as we go.

[Adam Kiss]

I would totally switch the TinyMCE for CK Editor. Sorry for offtopic