Skip to content

Instantly share code, notes, and snippets.

@eric1234
Created June 18, 2010 13:37
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save eric1234/443640 to your computer and use it in GitHub Desktop.
Save eric1234/443640 to your computer and use it in GitHub Desktop.
Basecamp theming for CKEditor
CKEDITOR.lang.load('en', 'en', function() {
CKEDITOR.lang['en']['numberedlist'] = 'Numbers';
CKEDITOR.lang['en']['bulletedlist'] = 'Bullets';
CKEDITOR.replace('project_description', {
toolbar: [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList']],
toolbarCanCollapse: false,
resize_enabled: false,
customConfig: '',
removePlugins: 'elementspath'
});
});
.cke_skin_kama .cke_focus {outline: none !important}
.cke_skin_kama {padding: 0 !important}
.cke_skin_kama .cke_wrapper {
background-image: none !important;
background-color: transparent !important;
padding: 0 !important
}
.cke_skin_kama .cke_contents {border: 1px solid #737373}
.cke_skin_kama {border-width: 0 !important}
.cke_skin_kama .cke_button a,
.cke_skin_kama .cke_button a.cke_off {
background-color: #eee !important;
border: 1px solid #eee;
}
.cke_skin_kama .cke_button a:hover,
.cke_skin_kama .cke_button a:focus,
.cke_skin_kama .cke_button a:active /* IE */
{
background-color: #eee !important;
border-color: #777;
}
.cke_skin_kama .cke_button a.cke_on,
.cke_skin_kama .cke_button a.cke_on,
.cke_skin_kama .cke_button a.cke_on /* IE */
{
background-color: #999 !important;
border: 1px solid #999;
}
.cke_skin_kama .cke_button a:hover.cke_on,
.cke_skin_kama .cke_button a:focus.cke_on,
.cke_skin_kama .cke_button a:active.cke_on /* IE */
{
background-color: #999 !important;
}
.cke_skin_kama .cke_button_bold span.cke_icon,
.cke_skin_kama .cke_button_italic span.cke_icon {
display:none !important;
}
.cke_skin_kama .cke_button_bold span.cke_label,
.cke_skin_kama .cke_button_italic span.cke_label,
.cke_skin_kama .cke_button_numberedlist span.cke_label,
.cke_skin_kama .cke_button_bulletedlist span.cke_label {
display:inline
}
.cke_skin_kama .cke_button_bold span.cke_label {font-weight: bold}
.cke_skin_kama .cke_button_italic span.cke_label {font-style: italic}
@eric1234
Copy link
Author

One more thing on this. If you use this you want to replace where it says 'project_description' with the ID of your field. Of course if you want to enable all text areas then you will need to read to CKEditor docs on how to do that.

@QasimQureshi
Copy link

This doesn't seem to work with the newer versions of CKEditor. Anyone have any idea bout what changes would need to be made(OR alternatively, which version of CKEditor this did target).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment