[Resolved] Edit Page colours

[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?

[Tom]

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 🙂

[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

[Tom]

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 🙂

[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.

[Leo]

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

[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 );
} );

[Tom]

Ah, sorry about that! Fixed it here: https://generatepress.com/forums/topic/edit-page-colours/#post-1243254

[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.

[Tom]

Can you try the updated function?: https://generatepress.com/forums/topic/edit-page-colours/#post-1243254

[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 );
} );

[David]

Hi there,

try this for your CSS variable:

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

[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.

[Tom]

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 );

[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

[Author]

Posts