Can you style (css) the Control Panel to look like the website?

[charles_i]

Hi guys, I'm back - Happy New Year. I've had some more time this week to do more research and testing. I've discovered a few of the configurations I documented earlier are incorrect.

You have to define your custom layout for CKEditor in GSEDITORTOOL in gsconfig - GS seems to override any configuration that you try to put in the ckeditor.js file. And you don't need to set the GSEDITORTOOL to 'advanced' to give control to ckeditor.js as I had written above.

While trying to figure out the styling of the dropdown menus (in the dropdowns - not your content) I discovered that using ‘stylesSet: my_styles:’ will only give you control of the Styles menu - in order to be able to style the Format, Font and Size dropdowns you have to add ‘customConfig :’.


‘styleSet’ is the only link that needs the full path in order to work (on my local PC anyway - I haven't tested this on a live site.)

BTW it took me awhile to figure out in gsconfig that this:
‘#WYSIWYG toolbars (advanced, basic or [custom config]) ‘
Does not mean that you use the words 'custom config' it means that the content goes in there. In my notes I change it to this:
‘#WYSIWYG toolbars (advanced, basic or [custom config - content goes between these brackets]) ‘
You might want to clarify that in future versions of GS.

Here are my updated notes - as mentioned there are some critical changes to what I wrote and posted originally:

To add control of the ckeditor .js file and your css file to the GS WYSIWYG editor:

gsconfig.php

Define your toolbar

#WYSIWYG toolbars (advanced, basic or [custom config - content goes between these brackets])

#To use the advanced toolbar:
define('GSEDITORTOOL', 'advanced');

# To create a custom toolbar, create each item in a list - ‘/’ means hard return to the next line:

define('GSEDITORTOOL',"['Cut','Copy','Paste','PasteFromWord','-','Undo','Redo','Find','Replace','-','SelectAll'],
['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList','JustifyLeft','JustifyCenter','JustifyRight',
'JustifyBlock', 'Table', 'Link','Unlink', 'Image', 'Anchor', 'Source'],
'/',
['Styles']
");

set the GSEDITOROPTIONS as follows:

- skin - set to an advanced skin karma, office2003, or v2 (skins are in admin\template\js\ckeditor)
- stylesSet - must contain an absolute path starting with http:// even if on a local server
- contentsCss - path to your css file (note no forward slash at the start)
- bodyID - gives control of the background only in the WYSIWYG editor
- ie to use a background colour on the website and se the editor background to white

# WYSIWYG Editor Options
define('GSEDITOROPTIONS', "skin: 'v2',
stylesSet : 'my_styles:http://localhost/serragetsimple/theme/Serra/ckeditorstyles.js',
contentsCss : 'theme/Serra/style.css',
bodyId : 'content'
");

If you want to style the dropdowns for Format, Font and Size add this link to GSEDITOROPTIONS
customConfig : 'theme/Serra/ckeditorstyles.js',


ckeditorstyles.js

Definitions:

* Block-level styles – applied to the text blocks (paragraphs) as a whole, not limited to the text selections. These apply to the following elements: address, div, h1, h2, h3, h4, h5, h6, p, and pre.

* Object styles – applied to special selectable objects (not textual), whenever such selection is supported by the browser. These apply to the following elements: a, embed, hr, img, li, object, ol, table, td, tr and ul.

* Inline styles – applied to text selections for style rules using elements not defined in other style types.


Styles Dropdown Menu

NOTE: ‘my_styles’ must be the same name as “stylesSet: 'my_styles:http://...” in 'GSEDITOROPTIONS' in gsconfg.php

Below is an example of one element - the heading:

CKEDITOR.addStylesSet( 'my_styles',
[
// element and its name
{ name : 'Heading', element : 'div',
//styles for the element
styles : { 'color':'#5b6100','font-family':'Arial, Helvetica, sans-serif','font-size':'14px','font-weight':'bold' },
//this is optional
attributes : { 'class' : 'heading' }},
]);

Basic Setup

The CKEditor config API lists numerous options all starting with ‘config.’ - these must be place in the function below. http://docs.cksource.com/ckeditor_api/sy...onfig.html

IMPORTANT NOTE: Some of these configurations will not work, or are not necessary because getSimple overrides them. For example, you do not need to add ‘config.addStylesSet = 'my_styles';’ below as per the API instructions in order to enable‘my_styles’ because it must be enabled in gsconfig.php using ‘stylesSet:’ as per instructions above.

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.toolbarCanCollapse = false; // hide toolbar collapse button

//remove Word styling
config.pasteFromWordRemoveFontStyles = false;

//Format dropdown
config.format_tags = 'p';

//Font dropdown
config.font_names = 'Arial';

//Size dropdown
config.fontSize_sizes = '12px';

};


style.css

All other styles can be defined in your .css file.
The link in gsconfig to your stylesheet controls the styles in the control panel
The link in template to your stylesheet controls the “view” or live layout

/* website background colour */
body { background-color:#5b6100; }

/* WYSIWYG editor background colour - must be the same name in bodyID in gsconfig.php */
body#content { background-color:#FFFFFF; }

/* !important must be used for color and text-decoration for the WYSIWYG editor */
a { color:#5b6100!important; text-decoration:none!important; }

Due to a documented bug in CKEditor the bullet point button will not add a class to the ‘ul’ tag. I have successfully formatted unordered and ordered lists - using a bullet image - flush to the left margin as follows:

ul {
list-style-type: none;
list-style-position:outside;
background: url(images/bullet.gif) left 7px no-repeat;
padding-left: 15px;
font-family:Verdana, Geneva, sans-serif; font-size:11px;
}

ol {
list-style-type: decimal;
list-style-position:outside;
padding-left: 15px;
font-family:Verdana, Geneva, sans-serif; font-size:11px;
}

One other note about bullet points. You can change the style of the ordered list (ie decimal or roman numerals) by right clicking anywhere within the bullet points you have already created. However, I noticed that when you try to do that (in FF anyway) what you get is the FF right click menu on top of the bullet point menu so you can't see that the bullet point menu is there. If you right click and HOLD the right mouse button down the FF right click menu will close after a few seconds and you can see the CKEditor bullet point options menu.

I think I'm nearly done configuring GS for my purpose. I might have a look at how images are imported and placed on the page and then I'm done.

Thanks for your help.

Charles