Themes and editor styles

[ronm123]

Hi all as you know I've been looking at the default list of styles that are available in the editor and working on adding new options to appear in the styles menu. Also how best to include this in all themes and templates with minimal need to add to each template separately unless required for customisation. e.g. I don't want to have to retrofit to all the older themes separately. I'm working on a set of 6 for each type where the variation between each is mostly just the colours e.g. Panel 1- 6, Highlight 1-6 as shown in these two screenshots:

There are others too but this has thrown up a few questions and challenges...

1. I'd like to add this to the default theme for each project and then just tweak the colours for the newer themes. This will mean that it will work for all themes old and new but requires some changes to the default themes for each project template so that I can use SASS for this. So first question: Ok if I add a SASS structure to \modules\site\parent_templates\site\common\css\, \modules\xerte\parent_templates\Nottingham\common_html5\css, and \modules\decision\parent_templates\decision\common\css so that Nottingham themeStyless.css, Site custom.css and Decision styles.css are controlled via SASS and therefore can include _editor_styles and other imported SASS files as needed?

2. The other main challenge is that some of the styles I would like to add to the editor menu, so that when an author selects some existing text, need a div to be wrapped around the selecting text without removing the p tags that text contains. Unfortunately as far as I can see if I add a div style to the editor styles.js when some text is selected that div replaces rather than wraps the existing p tags. You can see this by selecting some text and then selecting the 'special container' styles from the existing styles menu. I searched around for a solution and did find reference to using wrap:true, but couldn't get that to work and perhaps that only works with a later version of the editor? Or I was doing something wrong. So second question: anyone got a solution for this?

3. Actually this is really 2b because I did test an option for re-enabling the 'Create Div Container' button in the toolbar and that does work e.g. retains whatever tags are in the existing selection and provides a style dropdown to select. However that style dropdown is populated from the styles with element set as div from styles.js so those styles also appear in the styles menu not just the create div container style menu which would be too confusing and lead to users applying the div style from the styles menu and therefore losing the p tags etc. So 3rd question: if there isn't a solution to 2. is there a way to add styles that only appear in the Create div container style menu and not in the styles menu?

4. The other challenge that Tom was going to investigate is to how to dynamically populate the correct .css based on the template chosen. That might be a longer term task which is why I'm thinking about including the _editor_styles in the default templates so even if the colours change with the theme chosen at least the list of editor styles remains consistent. @torinfo Did you get any further looking at this?

5. Any other thoughts/comments about this? Other styles you would like to see added to the styles menu?

Cheers Ron

[torinfo]

@ronm123

1. It's OK with me. It does make setting up the dev environment a bit more complicated, but it is a really convenient way to maintain css.

2. I'll look into that wrap:true thing. If a new version of the editor is needed, I can do that as well.

3. Don't know…

4. I have not yet looked into that.

5. • Block quote ?
   • Code block

[ronm123]

@torinfo ok thanks for your comments...

1. Great I agree but will check with others during our meeting tomorrow - hope you can still make that?
2. That would definitely be the best option and although I found a few examples of people wanting to do the same thing e.g. wrap a div around selected tags just with a style selection, I couldn't find a definite solution apart from the additional Create Div Container as I mentioned in 3 above.
3. I might have to leave out the styles that require a div and p tags until we can find a solution. That would be a shame but at the moment I an't get it to work in a way that I;m happy with e.g. for a set of balloon styles.
4. Ok hopefully discuss when you are back from the conference.
5. Blockquote is already done - should have mentioned that. But code block there's at least one or two plugins for that we should consider including.

Hopefully speak tomorrow. Ron

[FayCross]

1. yes. I have used sass for some themes I've done recently & it's a much better way of doing things.

2. looks great. I can't think of any other styles to add now but I guess it's not too hard to add some as & when we think of useful ones?

[torinfo]

@ronm123

ad 4. Done.... with a caveat See what you think. So, the theme css is loaded last, and has the same issue you mentioned regarding background of body. I included a (static) xerteeditor.css file in the editor/js/vendor/ckeditor folder, where we can override things again, but it's not perfect.

For example, choose the Blue Grey theme, and hover over a link... :-(

But, I think it's definitely an approvement. See editor/js/vendor/ckeditor/config.js for how I did that.

[ronm123]

@torinfo looks good! Have also been changing and committing stuff as you will have noticed. Committed the Future Teacher theme and now that you've made the styles dynamic I need to change the editor style colours in some of the newer themes so that the colours match those themes rather than the future teacher colours. I'll do that tomorrow.

[ronm123]

@torinfo I've been through all the themes for all the projects and tweaked the editor styles colours for the panels, highlights, and blockquotes and one or two other tweaks too and committed all of that. Three things outstanding with this I think:

• [x] 1. the wrap:true issue or another solution for adding a div style without removing the existing tags in whatever is selected e.g. p tags. I'd really like to add a set of bubble styles if we can find a solution.
• [x] 2. You mentioned the bluegreay theme and hover over a link - I see the hover effect but I'm not sure what the issue is there?
• [x] 3. You mentioned a style for code block previously - I think a plugin would be a better solution for that?
• [x] 4. The Django theme doesn't currently show the default panel colours (highlights and blockquotes are ok)

[torinfo]

@ronm123

Do you still have some links for where you found information about 1. (wrap:true) so I can have a look at that?

[ronm123]

@torinfo This isn't the reference I viewed previously but a quick search found this... https://success.mindtouch.com/Legacy/MindTouch_TCS/Administration/Create_inline_styles_(TCS) Any use?

[torinfo]

@ronm123 That link was spot on :-)

It turns out that the wrap:true is an extension, implemented through a plugin. The plugin is called wrapstyle and implemented by mindtouch.

I needed to fix some issues (it was written in 2010) but it seems to do what you want.

I've added a test style called Tom's test (which obviously needs to be removed again).

Let me know what you think, and if it solves your issue for issue 1.

[ronm123]

@torinfo That does indeed seem to work! Bizarre that it isn't core functionality but great that you've managed to update it. Will add some balloon styles and remove your Tom's test style as soon as I can. Cheers Ron

[ronm123]

@torinfo I've added and committed the speech bubble styles for the default themes for each project. This seems to work well but 3 small issues...

• [x] a: I wanted to change the width and height of the styles menu and so tried the following in various places: .cke_combopanel { width:200px !important; }.cke_combopanel { height:300px !important; } but could only get that to work by adding to \editor\js\vendor\ckeditor\skins\moono\editor.css. (which then didn't need !important) I guess that's not ideal but couldn't get it to work anywhere else.
• [x] b: Although the order of the bubble styles in styles.js is correct for some reason Speech Bubble 2 appears in the menu after Speech Bubble 6 and not between 1 and 3. That's very odd and I can't work out why? Also see c. below.
• [x] c: Ideally I wanted the Speech Bubble styles to appear after the Panel and Highlight styles so named them Speech Bubble rather than Bubble but those panel and Highlight styles have changed order now too. Is that a result of the wrapstyle plugin and if so can the order be alphabetical?
• [x] d: Noticed another issue - at least two style-wrap style-wrap class names are being added and at one point I ended up with 8! I don't think that will break anything but obviously it's messy.

I don't think these are major issues (apart from perhaps d. just added) and I think the design improvements will make all this very popular but ideally it would be good to resolve these 3 small issues? Cheers Ron

[ronm123]

@torinfo noticed another issue with wrap style so added to the previous comment/list as item d

[torinfo]

@ronm123 I'll look into these.

I don't think the order should have changed by the wrap-style pugin, but I noticed that too. If possible, I'll disable that functionality, and I'll look into d. as well....

[FayCross]

This is the issue I see with some themes, such as your modern themes & some UoN themes too:

I'm using up to date develop code

[ronm123]

@FayCross @torinfo can we list specific steps to replicate this e.g. specific theme, specific page types etc? Not all of the modern themes have a body or page background colour set but some do like dark blue grey etc and I'm not seeing a problem but probably because there are so many different combinations too.

[FayCross]

I am using Modern: Autumn Orange & the plain text page (but it's any page with a text area in)

[FayCross]

Do you see this issue too @torinfo ?

[torinfo]

@ronm123 @FayCross Yes. I see this also (only checked Modern: Autumn Orange theme)

[ronm123]

@FayCross @torinfo I was just going to investigate this but now I've got a far more fundamental issue. Select a plain text page in the editor and no textpane appears: If I view the console there are quite a few errors...

[torinfo]

@ronm123 Oops. That means that I inadvertently committed part of the change for the link button. Let me fix that.

[ronm123]

@torinfo I'm guessing that you've worked on the featherlight stuff and added a new or revised plugin called link2 but haven't committed that? e.g. if I remove link2 from the list of extra plugins my install works again and link2 doesn't exist in my list of plugins. Did you forget to add?

[torinfo]

@ronm123 Ehmm, kind of. I updated ckeditor to latest version, but already inadvertently committed that. That was not my intention, just now. I'll fix it. if you remove link2 from config.js, the editor works agan, but you will not have any link buttons.

Like I said, I'll fix this

[ronm123]

@torinfo @FayCross I think I found and applied a fix for the themes where body background colour is set but now I'm seeing a different problem when viewing LO's where themes are not displaying correctly. I don't think that's due to the change and commits I made but there's definitely a problem with the link2 plugin missing and I think there's a problem with the featherlight code and I think it's one or oter of those issues that is having a knock on effect on LO theme display. Happy to have a quick online screenshare to demo/unpick?

[ronm123]

@torinfo yeah I removed link2 from config temporarily and also commented out 1996 and 1997 from xenith because those featherlight bits were breaking things too.

With those things removed I think I've fixed the editor background colours for each of the XOT themes and committed those changes but with the link2 and featherlight lines still enabled in the commits.

I'll check the other template themes next...

[torinfo]

@ronm123 I fixed the link2 issue.

What is going wrong with the featherlight changes?

[ronm123]

@torinfo those two lines re featherlight were breaking display of LO's. But they aren't now so could that have been associated with the link2 code?

How is the featherlight functionality meant to work? I can see an advanced tab in the link window now which I don't think was there before but are you still working on the rest?

[torinfo]

@ronm123 The advanced tab was alwyas hidden (I just commiited a change to hide it again) The featherlight code is enabled now, and if you know what you're doing, you can just use it in source view

I am still working on the link dialog

[ronm123]

@torinfo @FayCross my solution for the themes not displaying body color in the editor window wasn't working after all :-( Actually it appeared as though it was working in the editor but only because the :not was stopping it working in the LO itself too. I've committed a working fix for that now and instead of doing :not just setting .cke_editable background to the themes page background. Simple when you think about it! ;-)

[FayCross]

I've just tried this & it's working now. Thanks @ronm123

[ronm123]

Thanks for confirming @FayCross obviously the editor specific css I've added to relevant themes e.g. .cke_editable { background: $defaultpagebackground; } Is only needed in themes where there is a difference between the body background colour and the xerte page background colour. So the fix for themes that have a difference between the two is to set the editor background colour to the page colour after the body colour even though that class only applied to the editor.

@torinfo any joy with the style-wrap issue yet?

[ronm123]

@torinfo I'm going from memory here but I'm sure we made a change that meant that the ditor styles menu was wide enough to show the full names of the styles. I can definitely achieve that by adding .cke_combopanel { width:200px !important; }.cke_combopanel { height:300px !important; } to the end of \editor\js\vendor\ckeditor\skins\moono\editor.css. Perhpas that's what I did previously and it has been overwritten by a later update. Should I make and commit that change again or is there a better way to achieve that? I'm also checking how the font size of the lables in that menu changes with different themes but this can be changed with css in the theme itself so I might set that in the default theme so that it's consistent throughout.

[FayCross]

@ronm123 I've just updated the version of ckeditor we use & manually changed the size of the editor styles menu as you mention in comment above. Looking back at old commits I think this was how it's always been done but as you say ideally we shouldn't do it that way as it'll get overwritten by any new updates.

Incidentally - should the block quote themes be styled on the styles menu? They just appear as normal text at the moment (& did before my update too). Was this always the case or has something been overwritten previously that styled them? I can't find anything

[FayCross]

@ronm123 I'm going to close this as the editor styles have been in the release for years now. Your last comment mentions a possible issue with editor styles menu width - if you still think this is an issue then probably best to open a new issue as I don't think it will be ever picked up from the end of the comments on this issue