Leaderboard

Hey there Webflakians, Today I spent hours trying to figure out how to manually edit the Font, Size, and Text Color dropdown menus that is included with IPB's ckeditor. I have tried searching the world wide web, but after some browsing I couldn't find a single tutorial. So I decided to make one through trial and error. To make it a little easier to understand why someone would want to do this I will be using the hook Editor Themes V1.0.0 by IPS Themes. It's available for download here: After installing the hook I setup it up like so With the hook active and setup the dropdown menus looked horribly ugly and blocky The Text Color dropdown stood out to me like a sore thumb Also if you want to use for example the paste option, it's practically impossible to see without having your nose 2 inches from your monitor Lets start by making our paste tool easy to see and practical. Under Look & Feel find and open ipb_ckeditor.css Once you have your ipb_ckeditor.css file open, search for this .cke_skin_ips .cke_dialog_contents, .cke_skin_ips .cke_dialog_footer{ border-top: 1px solid #333 !important; background: #222222 !important; } Now all we need to do is simply change the background color. I chose to go with the this color .cke_skin_ips .cke_dialog_contents, .cke_skin_ips .cke_dialog_footer{ border-top: 1px solid #333 !important; background: #adadad !important; } What we get is something that is easy to see and not so straining For the Font and Size dropdown menus you'll have to have FTP access. You'll need to simultaneously edit 2 files in order for the changes to take effect. Editor.css and Panel.css. You can find both by navigating to this folder: /public/js/3rd_party/ckeditor/skins/ips. We'll start by change this background. Find this bit of code (remember to make these edits in both files) ul.cke_panel_list { list-style-type: none; margin: 3px; padding: 0; white-space: nowrap; } And change it to ul.cke_panel_list { list-style-type: none; margin: 0; padding: 0; white-space: nowrap; } Next Find .cke_panel_listItem a { padding: 2px; display: block; border: 1px solid #fff; color: inherit !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; } Tweak it like so .cke_panel_listItem a { padding: 2px; display: block; border: none; color: inherit !important; background-color: #595959; text-decoration: none; overflow: hidden; text-overflow: ellipsis; } About half way there. Find and edit this .cke_panel_grouptitle { font-size: 11px; font-family: 'Microsoft Sans Serif' , Tahoma, Arial, Verdana, Sans-Serif; font-weight: bold; white-space: nowrap; background-color: #dcdcdc; color: #000; margin:0px; padding:3px; } End result should match this .cke_panel_grouptitle { font-size: 11px; font-family: 'Microsoft Sans Serif' , Tahoma, Arial, Verdana, Sans-Serif; font-weight: bold; white-space: nowrap; background: #dcdcdc url('{style_images_url}/highlight_faint.png') repeat-x 0 1px !important; color: #000; margin:0px; padding:3px; } You are now done with your Font and Size dropdown menus and they should look similar to what I currently have Much, much better right? Well alas I think so. Ok now we just have the Text Color dropdown. The edits are still in the same 2 files so don't close them yet. Find .cke_colorblock { padding: 3px; font-size: 11px; font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif; } And change it to .cke_colorblock { padding: 3px; font-size: 11px; font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif; background: #595959; } Now Find span.cke_colorbox { width: 10px; height: 10px; border: #808080 1px solid; float: left; } And edit it like so span.cke_colorbox { width: 10px; height: 10px; border: none; float: left; } Basically all we are doing is removing all of the borders. Find a.cke_colorbox { border: #fff 1px solid; padding: 2px; float: left; } Change it to a.cke_colorbox { border: none; padding: 2px; float: left; } Find a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox { border: #316ac5 1px solid; background-color: #dff1ff; } Change to a:hover.cke_colorbox, a:focus.cke_colorbox, a:active.cke_colorbox { border: none; background-color: #dcdcdc; } Find a.cke_colorauto, a.cke_colormore { border: #fff 1px solid; padding: 2px; display: block; cursor: pointer; } Change to a.cke_colorauto, a.cke_colormore { border: none; padding: 2px; display: block; cursor: pointer; } Last, but not least find a:hover.cke_colorauto, a:hover.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore { border: #316ac5 1px solid; background-color: #dff1ff; } And get rid of the border a:hover.cke_colorauto, a:hover.cke_colormore, a:focus.cke_colorauto, a:focus.cke_colormore, a:active.cke_colorauto, a:active.cke_colormore { border: none; background-color: #fff; } Finally a conclusion to this simple yet long tutorial. your Text Color dropdown should now look like this For those of you who have read this whole tutorial I hope it has helped you in some way.

Really good and useful!

I have use it for 2 weeks and I have to say that is awesome...