Suite Editor Themes by IPS Themes

[Tom Christian]

View File

Editor Themes by IPS Themes

---

Editor Themes is a tiny and lightweight (12kb) hook that completely re-styles Invision Power Board's built in CKEditor. This hook utilises the flexibility and efficiency of font icons by delivering all editor icons via a single HTTP request. As a result, this prevents the loading of a .PNG sprite file containing 40+ icons. Editor Themes relies on the CSS :before pseudo class which has support for the following browsers: Chome (all), Firefox 3.5+, Safari 1.3+, Opera 6+ and IE8+ (source).
 
Example

 
Themes
(These are just examples of what can easily be made via the style builder.)

 

 

 

 

 
Features [*]Light or Dark base style.^NEW  [*]Choose which groups can see your custom editor themes.^NEW [*]Custom style builder via the ACP hook settings.^NEW [*]Utilises the same icon library as seen in IPS4.^NEW
 
Coming Soon [*]Ability to customise the text input background colour.
 
Additional Information [*]Editor Themes was built and tested with the default IPB CSS framework. As most custom themes are built upon this same framework, the level of compatibility should be excellent.

• 
  
  
  
   

• 
   

• 
   

---

• Submitter
  Tom Christian
• Submitted
  03/15/2014
• Category
  User and Social Engagement
• Supported Versions

 

[Flitterkill]

Solid!

1) When choosing between light and dark styles when first installed the colors are the same for both options. Took me a minute to realize that and start changing the colors.

2) I see there is a background color applied on hover. Any chance of getting that added to the mix?

[Tom Christian]

Solid!

1) When choosing between light and dark styles when first installed the colors are the same for both options. Took me a minute to realize that and start changing the colors.

2) I see there is a background color applied on hover. Any chance of getting that added to the mix?

The light and dark styles apply to the font family / font size background and the drop down arrows. It's up to you to actually make it dark via the style builder. I'll make that more clear in the next update. Sure, I'll add a hover style in the next release as well :smile:.

Also - I'd love to see a screenshot of your finished style if you're happy sharing it ?

[Flitterkill]

I'm still fiddling with colors and stuff.

Couple more things. On the left-center-right align buttons the background isn't centered on the font. Seems to be about a pixel or two to the left of where it should be. The other thing is no spacing between the background elements when bold, italic, etc are selected together.

Is there a css for this installed in templates or buried in the directories somewhere? I'm thinking I might want to take a run at a few things (remove the rounded corners on the highlights, etc.)

EDIT: Found it. You know, I'm thinking you could also blow this thing wide open. With the build-your-own-icon-font services out there letting people create their own and just uploading it and then choosing it over FontAwesome might be an interesting thing. Would make the editor really skinnable - well, at least accessibly skinable from within IPB.

[Flitterkill]

Changing this:

.cke_skin_ips .cke_button a, 
.cke_skin_ips .cke_button a:hover, 
.cke_skin_ips .cke_button a:focus, 
.cke_skin_ips .cke_button a:active, 
.cke_skin_ips .cke_button a.cke_off {
	padding: 5px 9px 5px 4px !important;
	height: 20px !important;
	-moz-border-radius: 2px !important;
	-webkit-border-radius: 2px !important;
	border-radius: 2px !important;
}

To this:

.cke_skin_ips .cke_button a, 
.cke_skin_ips .cke_button a:hover, 
.cke_skin_ips .cke_button a:focus, 
.cke_skin_ips .cke_button a:active, 
.cke_skin_ips .cke_button a.cke_off {
	padding: 5px 10px 3px 3px !important;
	height: 20px !important;
	-moz-border-radius: 1px !important;
	-webkit-border-radius: 1px !important;
	border-radius: 1px !important;
}

Gets me this:

The buttons squared a bit and the font bits centered within the background effect.

[Jori Design]

Nice work tom, You always seem to amuse :D

[OctoDev]

Very nice my friend, however i do not like that the dropdown/select does not have same style, it looks horrible:

Not sure if the dropdown is the issue for my skin or what, send you a PM Regarding it. Hope to do more business =)

[Tom Christian]

Very nice my friend, however i do not like that the dropdown/select does not have same style, it looks horrible:

Not sure if the dropdown is the issue for my skin or what, send you a PM Regarding it. Hope to do more business =)

Thanks for letting me know. It looks like an incompatibility between your skin and the hook style. I'll try and override those styles in the next update.

[OctoDev]

Thanks for letting me know. It looks like an incompatibility between your skin and the hook style. I'll try and override those styles in the next update.

I guess !important should do the job, if you make it do that on all. I am using Villain, and I've had this issue in a while with other skins, it looks really horrible lol

[Dmacleo]

hmm watching this one for sure :0

good idea.

can the user, at some point, have option to choose a style that the admin has created?

eg admin sets up a few to match installed skins and user can choose whatever one they want. am I explaining my thought correctly?

or is there only one style that gets used on all skins?

[Tom Christian]

hmm watching this one for sure :0

good idea.

can the user, at some point, have option to choose a style that the admin has created?

eg admin sets up a few to match installed skins and user can choose whatever one they want. am I explaining my thought correctly?

or is there only one style that gets used on all skins?

No, there's no user interaction with this. The style is set only by the admin and that is then set for all users (within the groups selected to have access).

[Dmacleo]

ok, is it only one style or are you able to lock a style to a skin?

I have some dark and some light skins so whats best for one of course would not be good for another.

[Tom Christian]

ok, is it only one style or are you able to lock a style to a skin?

I have some dark and some light skins so whats best for one of course would not be good for another.

It's one style locked to all skins.

[David Ivashenko]

[Tom Christian]

Haha, made me laugh ;)

[Heosforo]

Once I finish my site I will get this.

Just in case, this should work fine with IP.Content? article entries, comments and stuff like that..

[Tom Christian]

Once I finish my site I will get this.

Just in case, this should work fine with IP.Content? article entries, comments and stuff like that..

Not tested but I'm very very confident it's fine :).

[Dmacleo]

its my next planned purchase too, and content was something I wondered about but I would expect no issues.

its a pretty darn cool idea.

[Tom Christian]

its my next planned purchase too, and content was something I wondered about but I would expect no issues.

its a pretty darn cool idea.

Thank you. I was actually in the process of re-designing the editor for my new theme framework (which I'll be porting all my existing themes to shortly) and realised that making the editor design a standalone plugin would be pretty neat :smile:

[Flitterkill]

FYI that IPB.Chat loads the old RTE editor for applying styles to chat entries so this won't work there.

[Tom Christian]

FYI that IPB.Chat loads the old RTE editor for applying styles to chat entries so this won't work there.

Why does it do that :S I'll see if I can do anything about it.

[Flitterkill]

Well to be fair all that is there is bold, italic, etc. Something like 5 options total.

[OctoDev]

Any update soon? These dropdown/Selections are quiet annoying to look at.

[Tom Christian]

Any update soon? These dropdown/Selections are quiet annoying to look at.

It's on my to do list.

I'm currently working on and will soon release another addon so once that's out, I'll look into releasing an update for Editor Themes.

[wohali]

Just bought this - looks fantastic! I'm having trouble with the Font and Size not showing in the dropdown, and non-centered selected icons:

Fixing the Font/Size dropdown is my top priority, I may have to tweak your CSS by hand on this one. The non-centered selected icon highlight is only a minor complaint :smile:

Edit: OK, by switching to a "Light" style from a dark one I was able to get the text to appear, but the boxes still don't correctly fill the space, hanging off the bottom instead. Suggestions?