[Resolved] Edit Page colours

Home Forums Support Edit Page colours

This topic contains 15 replies, has 4 voices, and was last updated by  Tom 1 month, 1 week ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1241463

    M

    I am using GeneratePress for creation of a camera club website from an existing site created many years ago. The colour and structure will remain the same. The background colour of all screens is back with white text (#cccccc). In Edit page if the colours have been set though Customise, Colours, Content then the Edit Page is largely okay although the contrast is weaker than on the viewed display. My question is that Block separators are used between sections and should be coloured as the text but in Edit Page they are always nearly black and cannot be seen. How can this be changed?

    #1242203

    Tom Lead Developer

    Hi there,

    Any chance you can show us a screenshot of the issue? It may be something we need to tweak in the theme.

    Let me know 🙂

    #1242644

    M

    I must confess I struggled with working out how to send you a screenshot of all things!! I have placed 2 images on Amazon “https://www.amazon.co.uk/photos/share/6oUBDejfG8s5V8hLZX51WIWrCPd2XApO0eO4RqFaIDz”
    The first is in Edit Mode with actual screen colors set via Customise, Colours, Content with the separator selected and clearly not visible because its default color must be a dark one. This is the problem finding any separators while editing and not wanting to manually set them all. The secong shot is after customising the separator to #cccccc. I set the separator to be color #cccccc via additional css which works but this doesn’t show in edit mode and there isn’t a route via Customise, Colours, Content to set the color either. Hope this helps

    #1243254

    Tom Lead Developer

    Ah, the Additional CSS isn’t added to the editor by default.

    Try this:

    add_action( 'enqueue_block_editor_assets', function() {
        $css = 'body .editor-styles-wrapper .wp-block-separator{border-bottom: 1px solid #cccccc;}';
        wp_add_inline_style( 'generate-block-editor-styles', $css );
    } );

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know 🙂

    #1243340

    M

    Thanks for the speedy reply. Sorry, where is the code to be included? For clarity my comment “via additional css” was for the site under Customize, Addional css.

    #1243344

    Leo Customer Support

    Tom’s code should be added using one of these methods:
    https://docs.generatepress.com/article/adding-php/

    #1244016

    M

    I have tried the methods suggested and none influence my problem in any way. Also I think there is a syntax eoor in the code supplied. I think there is a missing semicolon on line 2. Should it be:-

    add_action( ‘enqueue_block_editor_assets’, function() {
    $css = ‘.wp-block-separator{border-bottom: 1px solid #cccccc;}’;
    wp_add_inline_style( ‘generate-block-editor-styles’, $css );
    } );

    #1244494

    Tom Lead Developer
    #1244580

    M

    Thanks for your reply. I had tried the code with the correction I suggested and it had no impact on the block separator colors at all in Block Edit mode. I think I must be missing something.

    #1244807

    Tom Lead Developer
    #1245103

    M

    I have tried the updated function and it still doesntset the separator colour to #cccccc in Block Editor. Thanks.

    I was using:-

    add_action( ‘enqueue_block_editor_assets’, function() {
    $css = ‘body .editor-styles-wrapper .wp-block-separator{border-bottom: 1px solid #cccccc;}’;
    wp_add_inline_style( ‘generate-block-editor-styles’, $css );
    } );

    #1245151

    David Customer Support

    Hi there,

    try this for your CSS variable:

    $css = 'body .block-editor-block-list__block hr{border-bottom: 1px solid #cccccc;}';

    #1245658

    M

    Hi David

    I believe I did what you suggesed and replaced the line in the most recent code that defines the $css variable as below:-
    add_action( ‘enqueue_block_editor_assets’, function() {
    $css = ‘body .block-editor-block-list__block hr{border-bottom: 1px solid #cccccc;}’;
    wp_add_inline_style( ‘generate-block-editor-styles’, $css );
    } );
    This also didnt change the separator color in Block Edit mode.

    #1245950

    Tom Lead Developer

    Just tested this one, it should do the trick:

    add_action( 'enqueue_block_editor_assets', function() {
        $css = 'body .block-editor-block-list__block hr{background-color: #cccccc;}';
        wp_add_inline_style( 'generate-block-editor-styles', $css );
    }, 100 );
    #1246340

    M

    Hi Tom

    Yes that works just fine. Thanks so much. Although it is such a small change it will have a big impact on what I need to complete – documenting how to maintain the site!

    Once again thanks for you patience and support.

    Martin

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.