Reflect styles - also complex selectors

I use config.ContentsCss to load the live site's styles into the editor:

config.contentsCss = ['../css/reset.css','../css/screen.css'];

But, many elements have more complex selectors, such as #content h2, and since the editor handles only elements inside

<div id="content"> »» WHAT THE EDITOR SEES «« </div>

Example - H2 elements:

Inside screen.css I have this selector:

#content h2 { color: #76828A !important; text-decoration: none !important; }

In the live page it does show the element correctly, but since the editor loads only the text inside #content, it doesn't being shown correctly.

Fri, 06/29/2012 - 20:43

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Reflect styles - also complex selectors

You can try to use the bodyId and bodyClass options. They might not be the solution for all the situations, but usually it's enough for most of the usual cases
http://docs.cksource.com/ckeditor_api/s ... ml#.bodyId

Sun, 07/01/2012 - 14:10

nadavs

Joined: 29/06/2012

Posts: 3

Re: Reflect styles - also complex selectors

I have tried this but it didn't work because, the structure of the design is something like this:

<body class="light/dark">
    <div class="back">
        <div class="base">
            <div class="page">
                <div class="page_inside">
                    <div id="main">
                        »» content editable by the user ««
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Don't ask me why it's so complex, I don't know too. using config.bodyId or config.bodyClass doesn't really help, they even make it worse.

Is there any way to put all this ^^ code in a way that is visible by the editor, but not by the user?

Sun, 07/01/2012 - 22:31

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Reflect styles - also complex selectors

At the moment you can't put all of that and make it work correctly, but you should really look at your stylesheets. You might be able to spot that really for styling you just need one id and one or two classes and then you could apply them to the edited body.
Or you can really simplify the selectors, if they are too complex the page will have worse performance that simpler selectors and also it might be easier to break something unexpected.

Mon, 07/02/2012 - 11:10

nadavs

Joined: 29/06/2012

Posts: 3

Re: Reflect styles - also complex selectors

The design is a template. I know I can change it but I prefer not to modify the base of the template.

I have created a style.optimized.css file which I worked on alot to delete parts that the editor doesn't care of. I changed the selectors of the body as the selectors of the html, and the selectors of .light as the selectors of the body. I wrote some JS & PHP scripts which put #main inside the textarea.

It's not the best solution ever, but it works.