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

[charles_i]

I don't see any css tab or option in the Control Panel. My site displays perfectly but in the Control Panel it just looks like one column of straight HTML with no div styling. I'm a bit concerned because I want to give access to a non-coder so they can update their website. Is there a way to display the HTML with the CSS?

Charles

[Connie]

I think you want to have the editor use the CSS of the theme, is that right?

For that there is a thread here in the forum, do a search!

[charles_i]

Correct, but after lots of searching I can't find anything on this. One post that looks like it is actually is about styling the WYSIWYG editor. Can this be done?

A bit more explanation. I have a home page divided into 2 columns with divs - edits perfectly in GetSimple but in the editor the content is not displayed with the CSS style sheet - which I have linked in template.php. So my two columns of divs are displayed as one long column and all the classes are not displayed. However, in View the live site looks perfect.

[Connie]

Charles,

you must accept that CKeditor is third party software and that the GetSimple forum is not the only source for information how to configure the editor

but we have a very detailled wiki (did you see the link above?) and there I spent a lot of time to explain as much as possible, so you can find one option to tame the editor to use your styles:

http://get-simple.info/wiki/how_to:edito...stylesheet

and here is a detailled step-by-step-explanation "how to do it" that the wysywig-area looks like your page

http://get-simple.info/forum/post/17981/#p17981

[charles_i]

Yes I saw both those links. I understand that the CKeditor is third party but I was thinking that the CKeditor was a separate issue from the way content is displayed in the editor (and of course would have to be configured to my CSS as well).

What I was doing was copying the code from my original website into the Source of each page (just to setup what is already there). The content is coded with divs and CSS classes - so I wasn't actually using the CKeditor. I wondered how I could link those classes to my CSS file so they would be visible in the editor HTML view.

[mvlcek]

I wondered how I could link those classes to my CSS file so they would be visible in the editor HTML view.

That is described in the post mentioned by Connie, too.

[charles_i]

I wondered how I could link those classes to my CSS file so they would be visible in the editor HTML view.

That is described in the post mentioned by Connie, too.

Thanks! I'll read through it all more carefully then. I thought it was all about CKeditor.

[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

[Connie]

Charles,

I do not know about which template you are writing here.

You must understand that the editor creates HTML, adds some styles et.
but:

if it is class or id, that is defined by the CSS

if it is style added directly to the element, it will be formatted like this

so: if there are conflicts with your 'CSS and the HTML-markup, show us the template + CSS which you use

your long posting tries to explain so much that it is hard to come to the point
I can not follow your discussion of a template which I do not know

[mvlcek]

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

}

I try to make this clear:

• In my template I mark my content part with id content thus all rules are like #content ... { ... }.
  
• In order to be able to use these rules in the editor, I have to add this id to the surrounding element of the editor's content, thus the setting bodyId: 'content'
  
• In my template I have some settings like a large left margin, which would make the editor unusable (well, I would have to scroll horizontally a lot), thus I add rules to correct this: body#content ... { }. These rules only match for the editor, but not my style sheet and they have a longer selector and thus take precedence to the other rules.
  
• Additionally I have rules for special classes like motto1, which I want to be selectable in the styles dropdown. However, to display the style as WYSIWYG in the dropdown, you have to specify a simple rule, thus all styles which should be selectable in the dropdown do not have the #content prefix, but are just .myclass { ... }. This is no problem for me, as I only use these classes within the content.
  

(Of course you can use a different id, this is just an example)
Hope this helps.

[Connie]

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.

I know no open source application where this is guaranteed and out of the box (I know a lot)

so if you find that connection which will fit with ALL templates and CSS, please help us, that will be the stone of wisdom ;=(

What you want is an ideal solution which we all want to acchieve

[charles_i]

Thanks for the feedback! I'm working on this. But to start I need to figure out why this connection doesn't work.

Code:

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

Are these correct and is the path correct?
stylesCombo_stylesSet:
contentsCss:

Are any of these specific to your example (other than 'Mine' which is the name of my theme)?

[mvlcek]

Thanks for the feedback! I'm working on this. But to start I need to figure out why this connection doesn't work.

Code:

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

Are these correct and is the path correct?
stylesCombo_stylesSet:
contentsCss:

Are any of these specific to your example (other than 'Mine' which is the name of my theme)?

Remove the slash in front of my_styles, which is a name, not a path.
stylesCombo_stylesSet must point to a javascript file (absolute, a full URL might work, too), which uses the same name, e.g.:

Code:

CKEDITOR.addStylesSet( 'my_styles',
[
    // Block Styles
    { name : 'Normal', element : 'p', attributes : { } },
    { name : 'Motto1', element : 'p', attributes : { 'class' : 'motto1' } },

    // Inline Styles
    { name : 'Code', element : 'span', attributes : { 'class' : 'code' } },
]);

[charles_i]

Thanks for the hint re: the slash mvlcek - you are right - this works - your forward slash in your origiinal example doesn't work:

Code:

contentsCss: 'theme/my_theme/style.css'

As for linking the Styles js for the dropdown menu, after hours of trial-and-error testing I've determined that of the 3 examples I've seen - none of them will work locally (ie using WAMP server). However two of them will work with absolute links:

Code:

stylesCombo_stylesSet: 'my_styles:http://www.mysite.com/ckeditorstyles.js',

Code:

stylesSet: 'my_styles:http://www.mysite.com/ckeditorstyles.js',

This example given in the Wiki does NOT work:

Code:

entities : false,customConfig: 'my_styles:http://www.mysite.com/ckeditorstyles.js',

And in the CKEditor.js file "you must instruct the editor to apply the newly registered style" by putting "config.stylesSet" AFTER (NOT before) CKEDITOR.stylesSet.add as in the example below:

Code:

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },

    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);

config.stylesSet = 'my_styles';

And finally, these definitions are of interest:

* 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.

Still working through the rest of it.
Charles

[charles_i]

Still struggling with the stylesheet issue. The link works to my stylesheet because it will style classes and <p> tag in the editor but only certain attributes of <a> will work. I can make anchor bold but can't change the colour or use text-decoration:none. In my CSS I've tried both ways:

Code:

a { font-family:Verdana, Geneva, sans-serif; font-size:11px; color:#5b6100; text-decoration:none; font-weight:bold; }

and

Code:

a#content { font-family:Verdana, Geneva, sans-serif; font-size:11px; color:#5b6100; text-decoration:none; font-weight:bold; }

only bold and the font face and size work. Any idea why?

Also, I tried completely removing all the themes and my content still shows up in the editor. Is there a hierarchy like in WordPress? Is there a file in GS that content will fall back on if there is no theme? I wonder if that is somehow overriding some of my styles.

[Connie]

Also, I tried completely removing all the themes and my content still shows up in the editor. Is there a hierarchy like in WordPress? Is there a file in GS that content will fall back on if there is no theme? I wonder if that is somehow overriding some of my styles.

no

did you clear the browser cache? Did you log out / re-log in?

[mvlcek]

Still struggling with the stylesheet issue. The link works to my stylesheet because it will style classes and <p> tag in the editor but only certain attributes of <a> will work. I can make anchor bold but can't change the colour or use text-decoration:none.

Make sure you don't have a more specific rule for a. You might need to also define a:hover, a:visited, etc. selectors. Are you sure that a#content is correct and it's not #content a?
You can also try to add !important as in text-decoration: none !important;.

[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.

[Connie]

Charles,

thank you so much for all these investigations!

If you find no plugins/toolbar, you can add that easily

the download-version of CKEditor contains a folder _source, and there is the plugin/toolbar available

I added the plugin as attachment here

when I will find time, I will study all your infos intensively!

I think all this info belongs to the wiki as well

cheers, Connie

[charles_i]

Thank you for the praise Connie, much appreciated - this has been hours of work but it will be worth it. GS is the best CMS out there. And I've been looking for years at them.

Anyway, I copied the toolbar plugin.js to the plugins folder from the _source folder (didn't realise it was only in there) but changing the code in it from "config.toolbar = 'Full';" to "config.toolbar = 'Basic';" has no affect (neither does "CKEDITOR.config.toolbar = 'Basic';"). Since this code works in gsconfig:

Code:

define('GSEDITOROPTIONS',
  " toolbar: [
            ['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', 'Outdent', 'Indent'],
      ['Table', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
      '/',
      ['Styles','Format'],
    ],

I tried something like this:
toolbar: 'admin/template/js/ckeditor/plugins/toolbar/plugin.js',

but it didn't work (disabled the toolbar entirely).

Can you give me another one of your great hints to get the toolbar to respond?

Or is there a way to add a parameter to NumberedList and BulletedList in gsconfig so they will use my style sheet? Currently they have no styling.

Thanks again.
Charles

[mvlcek]

Or is there a way to add a parameter to NumberedList and BulletedList in gsconfig so they will use my style sheet? Currently they have no styling.

If you make the editor use your style sheet as described earlier and you have defined styles for ul/ol/li, you will also see them in the editor.

[Connie]

Charles,

the path to the js, which you want to include, should be relative to the GetSimple root, I assume.

I defined a custom.js for get-simple.de and it was only read when I defined it in gsfconfig.php like this (as I placed that file in the /theme-folder:

Code:

define('GSEDITOROPTIONS', "customConfig : '../../../../theme/gs.js'");

check with a "long" path, does it work?

Cheers, Connie

[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

[Connie]

Charles,

this is really great. I will save your info to my todo and check it out next week, thanks so much for your effort!

[charles_i]

No problem. Let me know what happens. Here's a link to the "hidden" bullet menu info.
http://docs.cksource.com/FCKeditor_2.x/U...Properties

Charles