Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

My custom css don’t show in editor in backend

  • Try adding this selector:

    .editor-styles-wrapper .wp-block-post-content h4

  • It don’t work too

  • You seem to haven’t added it yet.

    The code should already be something like this:

    Replace this:

    	.editor-styles-wrapper #ftwp-postcontent h4,
    	.editor-styles-wrapper .editor-styles-wrapper h4,
    	.editor-styles-wrapper .entry-content h4 {
    	font-style: italic !important;
    	}

    With this:

    #ftwp-postcontent h4, .editor-styles-wrapper .wp-block-post-content h4 {
    	font-style: italic !important;
    }
  • I replaced in my main site, but it don’t work

  • Can you replace it in the Staging site as well? We’ll check what’s occurring.

  • I replaced in my stagging site, and it don’t work too

  • It didn’t update. This is what I see added: https://share.getcloudapp.com/rRuzPq48

    Can you try disabling all non-GP plugins first to ensure the CSS isn’t being altered by some plugin.

  • I disabled all non-generate plugins.

    Could you test, edit direct in my stagging site?

  • Frontend classes like: #ftwp-postcontent and entry-content are not present in the editor so they won’t work.
    And the code i provided here:

    https://generate.support/topic/my-custom-css-dont-show-in-editor-in-backend/#post-15847

    uses the block_editor_settings_all filter.
    And that filter automatically adds the editor wrapper class.
    So you do not need to include it in your CSS.

    You can simply do this for example:

    h4 {
    	font-style: italic !important;
    }

    NOTE: the staging URL you provided takes me to a wp.com sign up page

  • h4 {
    	font-style: italic !important;
    }

    I know the code above work. But I only want to change h4 style of my body content.
    The code above will change all h4 everywhere.

    Do you have any other method?

  • You can use this method to add the CSS only to the editor:

    
    add_filter( 'block_editor_settings_all', function( $editor_settings ) {
        $css = 'h4 {
            font-style: italic !important;
        }';
        $editor_settings['styles'][] = array( 'css' => $css );
    
        return $editor_settings;
    } ); 

    And then keep your current front end CSS as it is.

  • It worked, thanks

  • Glad to hear that

Viewing 14 posts - 17 through 30 (of 30 total)
  • You must be logged in to reply to this topic.