Jump to content

Community

Editor Themes by IPS Themes


Tom Christian
 Share

Recommended Posts

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
RJClXzY.png
 
Themes
(These are just examples of what can easily be made via the style builder.)
1DvWHas.png
 
PtuRyVd.png
 
pZU1n99.png
 
kcAMAhT.png
 
3FD64Mc.png
 
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.





  •  

  •  

  •  

 

Link to comment
Share on other sites

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

post-147067-0-34125400-1394909599_thumb.

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

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:

post-147067-0-08788900-1394911032_thumb.

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

Link to comment
Share on other sites

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

fL2N8YB.png

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

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

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

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

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

  • 2 weeks later...

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

post-358893-0-40267700-1396206366_thumb.

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy