Tom Christian Posted March 15, 2014 Share Posted March 15, 2014 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 Link to comment Share on other sites More sharing options...
Flitterkill Posted March 15, 2014 Share Posted March 15, 2014 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? Link to comment Share on other sites More sharing options...
Tom Christian Posted March 15, 2014 Author Share Posted March 15, 2014 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 ? Link to comment Share on other sites More sharing options...
Flitterkill Posted March 15, 2014 Share Posted March 15, 2014 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. Link to comment Share on other sites More sharing options...
Flitterkill Posted March 15, 2014 Share Posted March 15, 2014 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. Link to comment Share on other sites More sharing options...
Jori Design Posted March 15, 2014 Share Posted March 15, 2014 Nice work tom, You always seem to amuse :D Link to comment Share on other sites More sharing options...
OctoDev Posted March 15, 2014 Share Posted March 15, 2014 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 =) Link to comment Share on other sites More sharing options...
Tom Christian Posted March 16, 2014 Author Share Posted March 16, 2014 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. Link to comment Share on other sites More sharing options...
OctoDev Posted March 16, 2014 Share Posted March 16, 2014 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 Link to comment Share on other sites More sharing options...
Dmacleo Posted March 16, 2014 Share Posted March 16, 2014 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? Link to comment Share on other sites More sharing options...
Tom Christian Posted March 16, 2014 Author Share Posted March 16, 2014 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). Link to comment Share on other sites More sharing options...
Dmacleo Posted March 16, 2014 Share Posted March 16, 2014 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. Link to comment Share on other sites More sharing options...
Tom Christian Posted March 16, 2014 Author Share Posted March 16, 2014 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. Link to comment Share on other sites More sharing options...
David Ivashenko Posted March 16, 2014 Share Posted March 16, 2014 Link to comment Share on other sites More sharing options...
Tom Christian Posted March 16, 2014 Author Share Posted March 16, 2014 Haha, made me laugh ;) Link to comment Share on other sites More sharing options...
Heosforo Posted March 17, 2014 Share Posted March 17, 2014 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.. Link to comment Share on other sites More sharing options...
Tom Christian Posted March 17, 2014 Author Share Posted March 17, 2014 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 :). Link to comment Share on other sites More sharing options...
Dmacleo Posted March 17, 2014 Share Posted March 17, 2014 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. Link to comment Share on other sites More sharing options...
Tom Christian Posted March 17, 2014 Author Share Posted March 17, 2014 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: Link to comment Share on other sites More sharing options...
Flitterkill Posted March 18, 2014 Share Posted March 18, 2014 FYI that IPB.Chat loads the old RTE editor for applying styles to chat entries so this won't work there. Link to comment Share on other sites More sharing options...
Tom Christian Posted March 18, 2014 Author Share Posted March 18, 2014 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. Link to comment Share on other sites More sharing options...
Flitterkill Posted March 18, 2014 Share Posted March 18, 2014 Well to be fair all that is there is bold, italic, etc. Something like 5 options total. Link to comment Share on other sites More sharing options...
OctoDev Posted March 26, 2014 Share Posted March 26, 2014 Any update soon? These dropdown/Selections are quiet annoying to look at. Link to comment Share on other sites More sharing options...
Tom Christian Posted March 26, 2014 Author Share Posted March 26, 2014 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. Link to comment Share on other sites More sharing options...
wohali Posted March 30, 2014 Share Posted March 30, 2014 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? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.