[Resolved] Colors are displayed in Gutenberg, but not in the live page

[Samuel]

First of all: i read a lot of other topics like

https://generatepress.com/forums/topic/add-theme-support-editor-color-palette/
https://generatepress.com/forums/topic/customizing-generateblocks-color-palette/

But unfortunately, somehow it doesn’t work out.

My function.php:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#F2C42E',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#FD5A5C',
        ),
        array(
            'name'  => __( 'Light Brown' ),
            'slug'  => 'lightbrown',
            'color' => '#877F7A',
        ),
        array(
            'name'  => __( 'Brown' ),
            'slug'  => 'brown',
            'color' => '#423733',
        ),
		array(
            'name'  => __( 'Black' ),
            'slug'  => 'black',
            'color' => '#3d3d3d',
        ),
		array(
            'name'  => __( 'Grey' ),
            'slug'  => 'grey',
            'color' => '#7F7F7F',
        ),
		array(
            'name'  => __( 'Light Grey' ),
            'slug'  => 'lightgrey',
            'color' => '#E2E2E2',
        ),
		array(
            'name'  => __( 'White' ),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
    ) );
}, 50 );

And style.css

.has-orange-color {color: #F2C42E;}
.has-orange-background-color {color: #F2C42E;}

I’ve tried the orange one, but unfortunately it doesn’t work. In the editor the selected object is displayed in orange, but not in the Live Page.

[Tom]

Hi there,

Where are you trying to add the orange color? I looked through some elements but didn’t see any classes specific to orange.

[Samuel]

Hi Tom,

thanks for your support. Here is my setup: https://www.screencast.com/t/2ml00LlU

And the live page: https://baubeaver.de/bauen-renovieren/

[Tom]

Where did you add this CSS?:

.has-orange-color {color: #F2C42E;}
.has-orange-background-color {color: #F2C42E;}

I’m not seeing it applied.

GenerateBlocks might be worth checking out 🙂

[Samuel]

Yes that work. Lol.Thanks so much!!

I thought it was still in BETA mode. Is it ready for live operation yet?

[Tom]

It is still in beta – it will be fully released soon 🙂

[Samuel]

I can’t wait. If I install the beta now: Will the beta plugin be updated to the final release? Or do I have to uninstall the beta plugin?

[Tom]

It will be updated to the final released once it’s uploaded to WordPress.org 🙂

[Author]

Posts