Home Forums Weaver Xtreme Theme Can the Theme Custom CSS be propagated to the WP editor to hep visualize changes in the editor

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #64279
    kiezels
    Participant

    Hi,

    Is it an option for you to change in the theme the default font-styling of the blockquote p from italic to normal?

    I overruled the styling by adding blockquote p {font-style:normal;} in the custom css, but the problem is that in the WordPress editor I still see the italics, which makes it almost impossible to apply italics to certain parts within the blockquote.

    I tried the option “<small>Disable Page/Post Editor Styling – <small>Checking this box will disable the Weaver Xtreme subtheme based styling in the Page/Post editor. If you have a theme using transparent backgrounds, this option will likely improve the Post/Page editor visibility. </small></small>
    but that does not work for the blockquote…

    #64280
    scrambler
    Moderator

    Actually, using the editor styling to make a piece of text italic  while the custom CSS is in place does work, but I do understand that it makes it hard to visualize in the Editor.

    I don’t know of any way to propagate the theme Custom CSS to the WordPress editor style sheet in a way that would survive WordPress Update.

    May be @weaver knows better, or would consider a way to do that in the future

    #64283
    Weaver
    Keymaster

    At some point, I spent a great deal of time trying to do this, but it really really difficult to do, and is unlikely to ever become an option.

    Weaver Xtreme does create editor specific classes for many elements of a page or post, but not down to specific elements with custom CSS.

    The WP block editor does provide a mechanism that can be used for many cases. When you edit any block, you have the option of applying a class to that block. Thus you can easily create custom CSS rules for specific classes to apply to individual blocks. It is difficult to get down to specific elements withing a block, but it might be possible to refine the custom CSS class to apply to specific elements withing a block if you look hat at the generated HTML for each block.

    This method has the advantage of not being theme specific. Such custom CSS can be copy/pasted in the the WP Custom CSS option avilable with most themes.

    #64284
    kiezels
    Participant

    Wouldn’t it be as simple as just removing the blockquote p {font-style:italic;} from the theme’s stylesheet “style-weaverx.min.css” (or changing ‘italic’ to ‘normal’ if needs be)?

    #64285
    scrambler
    Moderator

    No the rule you need to change is the one from the Visual Editor Stylesheet located in

    https://http://www.site.com/wp-content/themes/weaver-xtreme/editor-style.css

    You may be able to do that using the Worpdress theme editor, just know that you will have to redo the change after each Update.


    @weaver
    , does a child theme have a mechanism to override the Editor stylesheet?

     

    #64286
    scrambler
    Moderator

    It actually may not be possible with the Theme editor, on my test site it actually comes from

    https://www.mysite.com/wp-content/themes/weaver-xtreme/editor-style.css?wp-mce-4960-20190918

    I don’t see that file in the theme editor, and editing the theme editor Visual Editor Stylesheet (regular or .min) does not do anything

    #64324
    Weaver
    Keymaster

    Weaver does not generate editor specific style for blockquote.

    The next release of Weaver Xtreme (3.4.5) will add calls to filters that would allow a child to add custom editor styling. I don’t know when I will upload that because I just did a release recently.

    If this is really important, I can provide the code changes to add these filters to the existing version. If they were handmade, they would be included in the next release.

     

    #64326
    scrambler
    Moderator

    @weaver, I am confused.

    If I inspect my page editing page editor with the browser developer tool, it shows me the styling of the blockquotes comes from the file path I mentioned above, which is located in a weaver Xtreme folder.

    Can you tell me what this is about then?

    #64343
    kiezels
    Participant

    hi Weaver and Scrambler,

    I still don’t understand. There is this stylesheet style-weaverx.css and style-weaverx.min.css in the folder weaver-xtreme/assets/css. This stylesheet is loaded in the webpage. And in this stylesheet blockquotes are defined (with, among other things, the italics for the font-style).  So, my question is, can’t you just change the formatting in this stylesheet? Hence, I don’t understand the remark “Weaver does not generate editor specific style for blockquote” either…

    #64348
    Weaver
    Keymaster

    The stylesheet for the Editor (block or classic) is totally separate from the theme stylesheet (style-weaver.css). I suppose the styling for blockquotes could be added to editor-style.css in a child theme (and a editor-style.min.css version as well, which can either be a real minimized css file, or simply a copy of the non-minimized version) for the classic editor. But Weaver’s default styling for blockquotes IS in that style sheet. There just isn’t any way to add custom blockquote styling within the theme options that shows up on the editor.

    I’m not sure how that applies to the block editor.

    #64349
    scrambler
    Moderator

    @weaver.

    My question  / problem is as follow

    I tried using the WordPress Theme Editor to edit the file called Visual editor style sheet which gives access to editing the file named editor-style.css. I removed the italic styling property in there for the blockquote, saved, logged out, logged in, and although the style was gone from that file the editor was still showing them as Italic.

    So I used the Browser developer tools to check what was the name of the CSS file holding the styling rule for the blockquote in the visual editor, and I saw its name was actually

    …./wp-content/themes/weaver-xtreme/editor-style.css?wp-mce-4960-20190918

    unfortunately there is no access to that file from the WordPress Theme Editor.

    Given it is located in the Xtreme theme directory, I was wondering if you can explain the difference between the default file name editor-style.css and that one named editor-style.css?wp-mce-4960-20190918.

    #64353
    Weaver
    Keymaster

    The ?wp-mce-4960-20190918 is the method WP uses to pass the name of the theme editor-style.css file to the tiny mce classic editor. It really is the editor-style.css file in the theme root. I believe (but don’t know for sure – been a while since I messed with that) if a  child includes editor-style.css, it would be used instead. But this might not be correct.

    Weave Xtreme also passes an additoinal editor style file that is generated based on options that override the styling in the editor-style.css file. Since there are no options for blockquote, no extra CSS is generated for the the override editor style file.

    Weaver also includes an override file for the block editor, and generates a custom one based on options.

    This is the first time this issue has come up in my memory. There just has never been a request to add custom CSS rules for the editor styling before. I not inclined to add an “Editor Custom CSS” option, especially since such an option becomes significantly more complex to support the block editor.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.