CSS improvements: Use a style reset for the admin, and prefix widget styles properly

[chrisv2]

Another frequent issue I experience when working with pre-made templates is that often global styles bleed over into the admin.

Example:

input { color: FFF; }

(in a template using a dark background for inputs) will let the admin UI look funny, but hardly usable. To make this work until Web Components finally arrive, I suggest prefixing the markup properly and using a sensible CSS reset for the admin (an example for this can be found in tinyMCE: https://github.com/tinymce/tinymce/blob/master/js/tinymce/skins/lightgray/Reset.less)

Likewise, IP stylesheets should not contain global styles, only prefixed ones (ip_content.css, for example, contains a lot of global styles).

[maskas]

Might be useful http://www.x-tags.org/

[jankus]

The problem is well known. When two systems (in our case website and administration) mix together there are always a problem that one will override or break the other.

In recent v3.x versions we offered theme developers to keep their styles in .theme scope (with LESS it's pretty easy to do that). But we see it as too complicated.

With v4.0 we're trying to solve it from a different angle - to leave the freedom for designers/developers to keep their global styles or do whatever they want. We're gonna scope all admin styles in '.ip' class and do a similar reset as in your example with tinyMCE. There are still issues to solve: using global elements (like overlay) for admin purposes, define the minimum specificity for admin styles (to keep them safe from accidental theme overrides but having simple enough options to override if needed).

[chrisv2]

@jankus: glad to hear that, please let me know if I can help with that.

@maskas: This is in fact interesting. I wonder whether we could have x-tags inside of tinyMCE Rich Text, then we could convert IP widgets to x-tags and use them inside of any RichText, thus having much more flexible editing.

[eazuka]

@chrisv2: doesn't the whole essence of IP content editor and the widgets serve as a wysiwyg editor in it own right, with extra the benefit of not having element as static which a RichText editor does by placing a width/height in pixel.

If you really do need to have widgets in RichText, maybe CKEditor 4.3 would interest you as it supports widget. http://ckeditor.com/demo#widgets You could create a RichText plugin based on CKEditor 4.3 with widget feature.

Just curious, why would you want to convert IP widget and use them in RichText editor?

[jankus]

All admin styles are now being reset under ".ip" selector scope. It should be safe now to use global styles in your own theme and don't worry about breaking the admin.

Please test it and see how it goes now. If something breaks, please open separate issues.