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

[charles_i]

OK I've been struggling with this all day but I can't get it to work. Its really difficult to piece together the thread of all those posts, and fragments of code into a working example. Someone should put this together in a Wiki when it's done with step-by-step instructions. (I'll even do it for you :-))

I understand now that CKEditor actually styles all of the HTML in GS editor - I thought it only applied the styles in its dropdown menu and that the HTML editor was part of GS. That part I've sorted out. Now to the code.

In template.php you are supposed to add id='content' to the body tag and/or to here:

Code:

<div id="content"><?php get_page_content(); ?></div>

and/or possibly here as well:

Code:

<div id="content" class="<?php echo return_page_slug(); ?>"></div>

That corresponds to your css file where the instructions are to use this for the editor:

Code:

body#content { /* for the editor */ }

but conflictingly it says also to use this for the editor (as well as the site):

Code:

#content p { /* for site and editor */ }

and then this for content outside of content - but why would you have any content that does not fall within the content of your site?

Code:

.motto1 { /* without #content */

}

The actual implementation of your style sheet is confusing as well:

Yes, you just have to make sure to have a simple rule (like .code or span.code) in your style sheet and not just a too specific one (like #content span.code which will not match).

OK so... a normal css p tag rule would be:

Code:

p {.... }

You're supposed to use this instead?

Code:

.paragraph {.... }

Not this:

Code:

#content p

And add it to the editor's js like this:

Code:

{ name : 'paragraph', element : 'p', attributes : { 'class' : 'paragraph' } },

In the js file the

my_styles

name is supposed to also be used here:

Code:

CKEDITOR.stylesSet.add( 'my_styles',

and you're supposed to also add this in the js - but it doesn't say where - is it part of CKEDITOR.stylesSet.add?

Code:

config.stylesSet = 'my_styles';

In gsconfig.php you are to add this to GSEDITOROPTIONS :

Code:

stylesCombo_stylesSet: '/my_styles:/theme/Mine/ckeditorstyles.js',
contentsCss: '/theme/Mine/style.css',
bodyId: 'content'

But this connection is not working for me. My js file and my css file have no affect on the GS editor. I even tried configuring GSEDITORTOOL for custom in case that made any difference.

I think GS is fantastic and I'm sticking with it no matter what, but even though this is technically 3rd party, it is being implemented into the GS framework through the template and the gsconfig.php file. I think it's necessary to configure this so that non-coders can update their website without seeing a different layout in the editor than their preview, which will only confuse them.

Thanks for your help.
Charles