szabesz Posted January 31, 2018 Share Posted January 31, 2018 Hi, I've been searching for the answer but could only find some hacky "solutions" from the distant past. What drives me crazy is the "preview" feature of the dropdown menus: Is it possible to force the dropdowns not to apply the styles of the editor but use the styles of the button of the editor, or at least use the default styles? I need readable menu items, not those cut-off an useless styled ones. Also, only a few menu items fit in the tiny dropdown area. This is bad UX 3 Link to comment Share on other sites More sharing options...
SamC Posted January 31, 2018 Share Posted January 31, 2018 Was looking at this: https://docs.ckeditor.com/ckeditor4/latest/guide/dev_format.html#custom-block-level-text-formats-definition Might be useful but possibly only affects the output rather than the actual dropdown. Link to comment Share on other sites More sharing options...
BitPoet Posted January 31, 2018 Share Posted January 31, 2018 I've been looking for a solution to that years ago, and it seems the answer hasn't changed What I use as a workaround is to add larger styling for the combos in question with AdminCustomFiles, applying width and height to div.cke_combopanel__format and div.cke_combopanel__styles. 1 Link to comment Share on other sites More sharing options...
SamC Posted January 31, 2018 Share Posted January 31, 2018 How are the headings different sizes in the first place? Been searching through the ckeditor code and can't find anything that seems to control it. You can change the rendered label (Heading 1, Heading 2...), use custom classes for each item, change the html tag that gets output but damned if I can find the part that controls the font in the select list itself. The format dropdown is a plugin which you can download and add to ckeditor. I can't find this plugin in my PW install so not sure how the format dropdown even exists on my body field. 1 Link to comment Share on other sites More sharing options...
szabesz Posted January 31, 2018 Author Share Posted January 31, 2018 14 minutes ago, BitPoet said: applying width and height to div.cke_combopanel__format and div.cke_combopanel__styles. I've been thinking of hacking it too but as a last resort. The trouble with such workarounds is obvious, when they change the names of the classes, we need to make changes too and I already use some of these admin overwrites. Thanks for the tip though, at least I know where to look at 53 minutes ago, SamC said: Might be useful but possibly only affects the output rather than the actual dropdown. This is just the definition, I cannot see how this can "help". Others were trying to solve this too, eg: https://ckeditor.com/old/forums/CKEditor/Disable-preview-in-format-dropdown https://www.drupal.org/project/ckeditor/issues/2534462 Link to comment Share on other sites More sharing options...
szabesz Posted January 31, 2018 Author Share Posted January 31, 2018 (edited) 7 minutes ago, SamC said: I can't find this plugin in my PW install. I did not add it I just use the Input config of the TextArea inputfield: Format Tags Semicolon-separated list of selectable tags shown in the "format" dropdown. Edited January 31, 2018 by szabesz typo Link to comment Share on other sites More sharing options...
BitPoet Posted January 31, 2018 Share Posted January 31, 2018 1 minute ago, szabesz said: I've been thinking of hacking it too but as a last resort. The trouble with such workarounds is obvious, when they change the names of the classes, we need to make changes too and I already use some of these admin overwrites. This is one of the few cases where I don't care that much since getting the new CSS selectors isn't difficult, so I just make sure to document these small UI hacks in a dedicated place in the admin area. 16 minutes ago, SamC said: I can't find this plugin in my PW install so not sure how the format dropdown even exists on my body field. The format and styles plugins (as well as some other basic widgets that are internally realized as plugins) are already included in the main ckeditor.js. 2 Link to comment Share on other sites More sharing options...
szabesz Posted January 31, 2018 Author Share Posted January 31, 2018 5 minutes ago, BitPoet said: so I just make sure to document these small UI hacks in a dedicated place in the admin area. I've been trying to do it too, for years not too much success so far, even though I know how useful it is because it always makes me very happy when I find that I did not forget to document something... Link to comment Share on other sites More sharing options...
SamC Posted February 1, 2018 Share Posted February 1, 2018 15 hours ago, szabesz said: 16 hours ago, BitPoet said: applying width and height to div.cke_combopanel__format and div.cke_combopanel__styles. I've been thinking of hacking it too but as a last resort. The trouble with such workarounds is obvious, when they change the names of the classes, we need to make changes too and I already use some of these admin overwrites. Thanks for the tip though, at least I know where to look at How are you overriding styles in the admin? Never done this before. Link to comment Share on other sites More sharing options...
szabesz Posted February 1, 2018 Author Share Posted February 1, 2018 8 minutes ago, SamC said: How are you overriding styles in the admin? Never done this before. As @BitPoet said, there is AdminCustomFiles module (I've never used it), and AdminOnSteroids module can do it too. Also in config.php something like this: $config->scripts->add($config->urls->templates . "admin/admin_global.js"); $config->styles->append($config->urls->templates . "admin/admin_global.css"); A related good read: http://soma.urlich.ch/posts/custom-js-in-processwire-admin/ 2 Link to comment Share on other sites More sharing options...
SamC Posted February 1, 2018 Share Posted February 1, 2018 13 minutes ago, szabesz said: As @BitPoet said, there is AdminCustomFiles module (I've never used it), and AdminOnSteroids module can do it too. Also in config.php something like this: $config->scripts->add($config->urls->templates . "admin/admin_global.js"); $config->styles->append($config->urls->templates . "admin/admin_global.css"); A related good read: http://soma.urlich.ch/posts/custom-js-in-processwire-admin/ Awesome, thanks! 1 Link to comment Share on other sites More sharing options...
Robin S Posted February 1, 2018 Share Posted February 1, 2018 22 hours ago, szabesz said: Is it possible to force the dropdowns not to apply the styles of the editor In /site/modules/InputfieldCKEditor/contents.css: .cke_panel_list h1, .cke_panel_list h2, .cke_panel_list h3, .cke_panel_list h4, .cke_panel_list h5, .cke_panel_list h6, .cke_panel_list pre, .cke_panel_list address { font-family:sans-serif, Arial, Verdana, "Trebuchet MS"; font-weight:normal; font-style:normal; font-size:14px; } Do likewise for any custom styles you have added to the Styles dropdown. 4 Link to comment Share on other sites More sharing options...
szabesz Posted February 1, 2018 Author Share Posted February 1, 2018 Thanks Robin! Looks promising. Is there anything I need to do to make it load? So far no success, as this contents.css does not seem to be included this way, I cannot find it... Link to comment Share on other sites More sharing options...
szabesz Posted February 1, 2018 Author Share Posted February 1, 2018 2 minutes ago, szabesz said: Thanks Robin! Looks promising. Is there anything I need to do to make it load? So far no success, as this contents.css does not seem to be included this way, I cannot find it... My bad... I already have that file but I named it differently, sorry for this I added the rules to the end of the css and it does the trick indeed. I just need to refine it a bit! Thank you! Link to comment Share on other sites More sharing options...
Robin S Posted February 1, 2018 Share Posted February 1, 2018 Actually, you can shorten the CSS override to this: .cke_panel_list * { font-family:sans-serif, Arial, Verdana, "Trebuchet MS"; font-weight:normal; font-style:normal; font-size:14px; } 3 Link to comment Share on other sites More sharing options...
szabesz Posted February 1, 2018 Author Share Posted February 1, 2018 Thanks once more! I think I start with this one and see how it goes: .cke_panel_list * { font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; font-weight: normal; font-style: normal; font-size: 14px; margin: 0; } .cke_panel_listItem a { padding: 2px 7px; } padding: 2px 7px; makes the list more compact vertically. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now