Skip to main content
Topic: Editor Theming Not Possible for Variants (Read 6705 times) previous topic - next topic - Topic derived from Re: Editor Theming
0 Members and 1 Guest are viewing this topic.

Editor Theming Not Possible for Variants

Moving(-ish) this to bug reports at Ant's suggestion.  Basically the css file to style the wysiwyg editor is hard coded to use the file from the default theme so variants can't style the wysiwyg editor.  Making a dark variant I have definitely hit this problem.

A snippet from the original thread in the theme area.

Here's where the css for styling the wysiwyg editor iframe is supplied to sceditor.  It could certainly be set up where it checks the variant for a local css file and not finding it uses the default.  Or simply just require a variant to have a version of this css file.

Code: (GenericControls.template.php) [Select]
 $("#', $editor_id, '").sceditor({
 style: "', $settings['default_theme_url'], '/css/jquery.sceditor.elk.css",

So that's why a changes the custom.css doesn't help.  It's not being passed to that iframe.

My suggestion would be that variants have a required fourth file to theme the the editor.  I guess it would be called jquery.sceditor.elk_{variant}.css or something like that to be like the current three required files.

Then the php above that hands over the css to sceditor can do and isset($settings[variantish stuff]) or $context, whichever is appropriate to load the variant one instead.

Alternatively you could do the file exists check like you do for the custom.css to see if a variant has a custom sceditor file if you don't want to require that variants that don't touch that file have a copy.

I would not suggest passing the existing custom.css file into the sceditor though, as all the settings on body and such in custom.css are probably not what you'd want in the editor iframe.

All the other elements of the editor like the bbc buttons and such can be styled like anything else in the variant so they are not a problem.

Adding the fourth file wouldn't be very complicated as for any existing variant that was working without this change all you have to do is copy it from the theme itself.

Re: Editor Theming Not Possible for Variants

Reply #1
Heh.  Ooops forgot to actually set the bug reports board in the drop down when I used the create new topic options. :P  Thanks for catching that for me.  :)

Re: Editor Theming Not Possible for Variants

Reply #2
It happens frequently to me as well... lol
Bugs creator.
Features destroyer.
Template killer.

Re: Editor Theming Not Possible for Variants

Reply #3
GitHub issue here: https://github.com/elkarte/Elkarte/issues/586
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Editor Theming Not Possible for Variants

Reply #4
Here's a fix that shouldn't break anything you have now as it does a file exists check just like Load.php does for the custom.css file.  If it exists it sends the custom file from the variant to sceditor.  Otherwise it sends the one from the theme's main css directory.  I also replaced the default_theme references with just theme.  I figure that's better for people who want to use the default theme as a starting point for a new one.  If only the default theme is installed the two variables are equal anyway.

I chose a naming convention of jquery.sceditor.elk{variant}.css which for the light them would be jquery.sceditor.elk_light.css.

Here is the change in linux patch format.

Code: [Select]
--- GenericControls.template.php	2014-03-28 17:44:09.481051383 -0700
+++ GenericControls_WithVariant.template.php 2014-03-28 17:46:14.870132650 -0700
@@ -28,6 +28,16 @@
 
  $editor_context = &$context['controls']['richedit'][$editor_id];
 
+ // Load a variant specific css file for the WYSIWYG Editor?
+ if (!empty($context['theme_variant']) && file_exists($settings['theme_dir'] . '/css/' . $context['theme_variant'] . '/jquery.sceditor.elk' . $context['theme_variant'] . '.css'))
+ {
+ $editor_style = $settings['theme_url'] . '/css/' . $context['theme_variant_url'] . 'jquery.sceditor.elk' . $context['theme_variant'] . '.css';
+ }
+ else
+ {
+ $editor_style = $settings['theme_url'] . '/css/jquery.sceditor.elk.css';
+ }
+
  echo '
  <textarea class="editor', isset($context['post_error']['errors']['no_message']) || isset($context['post_error']['errors']['long_message']) ? ' border_error' : '', '" name="', $editor_id, '" id="', $editor_id, '" tabindex="', $context['tabindex']++, '" style="width:', $editor_context['width'], ';height: ', $editor_context['height'], ';" required="required">', $editor_context['value'], '</textarea>
  <input type="hidden" name="', $editor_id, '_mode" id="', $editor_id, '_mode" value="0" />
@@ -37,7 +47,7 @@
  $(document).ready(function(){',
  !empty($context['bbcodes_handlers']) ? $context['bbcodes_handlers'] : '', '
  $("#', $editor_id, '").sceditor({
- style: "', $settings['default_theme_url'], '/css/jquery.sceditor.elk.css",
+ style: "', $editor_style, '",
  width: "100%",
  height: "100%",
  resizeWidth: false,

Re: Editor Theming Not Possible for Variants

Reply #5
And here's a patch for the other minor issue I mentioned.  The remove format button on sceditor should really be grouped with the font,size,color buttons as that's what it removes.  This mode moves it from the end of row 2 to being grouped with those buttons.

Code: [Select]
--- Editor.subs.php	2014-03-28 18:32:00.261297960 -0700
+++ Editor.subs.php.mod 2014-03-28 18:31:51.617196160 -0700
@@ -231,9 +231,14 @@
  'space',
  'left', 'center', 'right', 'pre', 'tt',
  'space',
- 'font', 'size', 'color',
- 'space',
- );
+ 'font', 'size', 'color');
+
+ // Show the wysiwyg clear format button?
+ if (empty($modSettings['disable_wysiwyg']))
+ $context['bbc_tags']['row1'][] = 'removeformat';
+
+ $context['bbc_tags']['row1'][] = 'space';
+
  $context['bbc_tags']['row2'] = array(
  'quote', 'code', 'table',
  'space',
@@ -248,11 +253,10 @@
  // Allow mods to add BBC buttons to the toolbar, actions are defined in the JS
  call_integration_hook('integrate_bbc_buttons');
 
- // Show the wysiwyg format and toggle buttons?
+ // Show the wysiwyg toggle button?
  if (empty($modSettings['disable_wysiwyg']))
  {
  $context['bbc_tags']['row2'] = array_merge($context['bbc_tags']['row2'], array(
- 'removeformat',
  'source',
  'space',
  ));

Re: Editor Theming Not Possible for Variants

Reply #6
I'm just wondering if it wouldn't be better to just serve the usual variant.css file after the jquery.sceditor.elk.css. That should keep things easier as far as customising goes, because the variant css would just need to contain any style overrides for the wysiwyg. That should be easier than trying to customise an entire editor file for each variant (I think).

Only catch is that it'd require a way to load both files sequentially. That's easy to do for old-style custom theming, where you just stacked up the file calls in <head>, but may be difficult with these files having to be called inside the script tags. Can this be done?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Editor Theming Not Possible for Variants

Reply #7
sceditor takes a "style" argument that tells it which style sheet to load.  I'm not sure if it can be given a list or not.

Re: Editor Theming Not Possible for Variants

Reply #8
Yeah that's what I was worried about. My js is pretty limited.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Editor Theming Not Possible for Variants

Reply #9
Could you look at the style sheet handed off to the editor and see if it even makes sense to try and combine with the rest of the css?  It starts of styling body and the body for the editor is rather different than the rest of the page.

Re: Editor Theming Not Possible for Variants

Reply #10
Good point. Hadn't given it much thought yet.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Editor Theming Not Possible for Variants

Reply #11
Ok, took a look at the jquery.sceditor.elk.css. It's actually a pretty simple file, so yeah I reckon your solution is probably the best.

I was a bit worried that it might be the sort of file that'd bambozzle beginners, but after looking at it I don't think they'd have any problem with it. I was probably thinking of the base jquery.sceditor.css, which is more complex.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Editor Theming Not Possible for Variants

Reply #12
Looking at the patch here:
http://www.elkarte.net/community/index.php?topic=1277.msg8647#msg8647
TBH, I would just load the variant file and that's all (that means if the theme doesn't have variants is just the "plain" css by default), otherwise I think it would be a bit of a mess (there may be two files and one is not loaded and so on).
Bugs creator.
Features destroyer.
Template killer.

Re: Editor Theming Not Possible for Variants

Reply #13
I also would prefer that you not do a file check and just load the one from the variant thus making it a required variant file.  But I didn't get any opinions from the elk crew about requiring another file in the variants directory so I went ahead and suggested a version that would not alter your current layout.

Re: Editor Theming Not Possible for Variants

Reply #14
Okay, then let's do it "variants-only". ;D

Then while reading your second patch I started wondering: does it (still) make sense the option to disable the WYSIWYG editor?

ETA: I think this can be considered fixed too, am I wrong?
Bugs creator.
Features destroyer.
Template killer.