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

[charles_i]

Firstly, regarding Connie's post I'm using Firefox and I always clear the cache with SHIFT CTRL DEL which works well. Clearing the cache is essential as often the editor doesn't reflect changes properly.

Next, regarding my question about a heirarchy. I'm really glad GS doesn't use this as it's a huge pain in WordPress - its very difficult for a developer to figure out where their code is being displayed. I solved my problem with the CSS. I had forgotten that it's connected in the gsconfig file - not in the template.

As for the anchors - again thanks for the help. The only thing that worked was using !important for the colour and the text-decoration. Without it, I could see the editor applying the style for about a second and then it would switch to the default blue and underlined. Something overrides it somewhere but the !important works.

My next problem was to remove the body background green colour that I use on the live site but does not appear over the content section - which is white. As your instructions indicate putting bodyId: 'content' in gsconfig and then adding a rule in CSS for the editor works. So this will set the background of the site to green and the background of the editor to white:

Code:

body { background-color:#5b6100; }

body#content { background-color:#FFFFFF; }

Interestingly, I did NOT need to put any reference to content in my template.php file as your instructions indicate. It works without an id=content anywhere in the template.

I also solved my problem with the ckeditor.js file not working locally in WAMP. It just needs an absolute URL so it will work like this:

Code:

stylesSet: 'my_styles:http://localhost/getsimple/theme/my_theme/ckeditorstyles.js

You need the complete path with http://localhost for it to work.

I'm now onto the CKEDITOR. The instructions you give work for the dropdown Styles and adding code to the gsconfig file adds buttons to the button bar but I would prefer to do this in ckeditor.js because that will allow me to add my classes from my style sheet. On the ckeditor site it says you can configure the toolbar in
plugins/toolbar/plugin.js but there is no folder by that name in the 3.0 version.

http://docs.cksource.com/ckeditor_api/sy...l#.toolbar - I posted the question on their site yesterday but no answer yet.

I am documenting all of this for you and me. These are the instructions I have so far:

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

gsconfig.php

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'
");

To give control of the dropdowns to the ckeditor.js file set the GSEDITORTOOL to advanced:

#WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL', 'advanced');

style.css

/* 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; }

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.