Custom Block Palette Text Colors Don't Apply On Front End Using This Code

This topic has 35 replies, 4 voices, and was last updated 1 week, 5 days ago by David.

Viewing 15 posts - 16 through 30 (of 36 total)

← 1 2 3 →

Author

Posts

September 29, 2020 at 8:33 am #1464033

David

Staff

Customer Support

I am not seeing any CSS properties for the background colors on the front end.
For example one of your elements has this CSS Class: has-blue-background-color

But there is no CSS rule for that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

September 30, 2020 at 6:45 am #1465240

omTesla

But i created the colors, remember the codes in Functions for Back-End and the colors in CSS for Front-End, it pics up only black color from CSS to use as background the others work only for text color but not background.
Why then black color is applied even as background if the codes in CSS are same for each color?

September 30, 2020 at 7:19 am #1465286

David

Staff

Customer Support

As i said i cannot see any CSS in your frontend style sheet for those other background colors. Impossible for me to tell with the optimized CSS if its in there and just not applying – but when i looked yesterday i could not see those styles.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

October 1, 2020 at 9:52 am #1467683

omTesla

Well i leave it as is, for me is enough.
Thank you for your time.

October 1, 2020 at 10:33 am #1467770

David

Staff

Customer Support

No problems!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

July 4, 2021 at 3:37 am #1843774

omTesla

Hello, just come to share my premade colors, they are taken from Adobe Illustrator, the swatch is named System Windows.
Also I told to GB developers to add them by default in GB but no luck until today.
First add this code to Functions,php file, this code will add custom colors on backend of post editor.

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Blue' ),
            'slug'  => 'blue',
            'color' => '#0000ff',
        ),
        array(
            'name'  => __( 'Green' ),
            'slug'  => 'green',
            'color' => '#00ff00',
        ),
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#ff7f00',
        ),
		array(
            'name'  => __( 'Light Orange' ),
            'slug'  => 'light-orange',
            'color' => '#ff9f00',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#ff0000',
        ),
		array(
            'name'  => __( 'Light Red' ),
            'slug'  => 'light-red',
            'color' => '#ff1f55',
        ),
        array(
            'name'  => __( 'Purple' ),
            'slug'  => 'purple',
            'color' => '#ff00ff',
        ),
        array(
            'name'  => __( 'Cyan' ),
            'slug'  => 'cyan',
            'color' => '#00ffff',
        ),
        array(
            'name'  => __( 'Yellow' ),
            'slug'  => 'yellow',
            'color' => '#ffff00',
        ),
		array(
            'name'  => __( 'Golden' ),
            'slug'  => 'golden',
            'color' => '#ffdf00',
        ),
		array(
            'name'  => __( 'Gold' ),
            'slug'  => 'gold',
            'color' => '#fbc926',
        ),
		array(
            'name'  => __( 'Dark Pink' ),
            'slug'  => 'dark-pink',
            'color' => '#ff7faa',
        ),
		array(
            'name'  => __( 'Pink' ),
            'slug'  => 'pink',
            'color' => '#ffccff',
        ),
		array(
            'name'  => __( 'Dark Green' ),
            'slug'  => 'dark-green',
            'color' => '#009f00',
        ),
		array(
            'name'  => __( 'Sky Blue' ),
            'slug'  => 'sky-blue',
            'color' => '#00bfff',
        ),
		array(
            'name'  => __( 'Cherry' ),
            'slug'  => 'cherry',
            'color' => '#ff00aa',
        ),
		array(
            'name'  => __( 'Plum' ),
            'slug'  => 'plum',
            'color' => '#d49fff',
        ),
		array(
            'name'  => __( 'Ether' ),
            'slug'  => 'ether',
            'color' => '#aa00ff',
        ),
		array(
            'name'  => __( 'Violet' ),
            'slug'  => 'violet',
            'color' => '#7f3fff',
        ),
		array(
            'name'  => __( 'Royal Blue' ),
            'slug'  => 'royal-blue',
            'color' => '#557fff',
        ),
		array(
            'name'  => __( 'Sea Water' ),
            'slug'  => 'sea-water',
            'color' => '#00bfaa',
        ),
		array(
            'name'  => __( 'Olive' ),
            'slug'  => 'olive',
            'color' => '#808000',
        ),
		array(
            'name'  => __( 'Sour Cherry' ),
            'slug'  => 'sour-cherry',
            'color' => '#800080',
        ),
		array(
            'name'  => __( 'Dark Sea Water' ),
            'slug'  => 'dark-sea-water',
            'color' => '#008080',
        ),
		array(
            'name'  => __( 'Brown' ),
            'slug'  => 'brown',
            'color' => '#800000',
        ),
		array(
            'name'  => __( 'Salad' ),
            'slug'  => 'salad',
            'color' => '#d4ff00',
        ),
		array(
            'name'  => __( 'Salada' ),
            'slug'  => 'salada',
            'color' => '#00ffaa',
        ),
		array(
            'name'  => __( 'Navy' ),
            'slug'  => 'navy',
            'color' => '#000080',
        ),
		array(
            'name'  => __( 'GND' ),
            'slug'  => 'grays',
            'color' => '#9ea0a4',
        ),
		array(
            'name'  => __( 'Solder' ),
            'slug'  => 'gray',
            'color' => '#d2d1d4',
        ),
		array(
            'name'  => __( 'Black' ),
            'slug'  => 'black',
            'color' => '#000000',
        ),
		array(
            'name'  => __( 'White' ),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
		array(
            'name'  => __( 'oran' ),
            'slug'  => 'oran',
            'color' => '#d49f00',
        ),
				array(
            'name'  => __( 'bluan' ),
            'slug'  => 'bluan',
            'color' => '#a6caf0',
        ),
				array(
            'name'  => __( 'grian' ),
            'slug'  => 'grian',
            'color' => '#c0dcc0',
        ),
    ) );
} );

Second code must be added in style,css file.
Now this code will apply the colors to work on front end.

.has-blue-color {
    color: #0000ff;
}

.has-green-color {
    color: #00ff00;
}

.has-orange-color {
    color: #ff7f00;
}

.has-light-orange-color {
    color: #ff9f00;
}

.has-red-color {
    color: #ff0000;
}

.has-light-red-color {
    color: #ff1f55;
}

.has-purple-color {
    color: #ff00ff;
}

.has-cyan-color {
    color: #00ffff;
}

.has-yellow-color {
    color: #ffff00;
}

.has-golden-color {
    color: #ffdf00;
}

.has-gold-color {
    color: #fbc926;
}

.has-dark-pink-color {
    color: #ff7faa;
}

.has-pink-color {
    color: #ffccff;
}

.has-dark-green-color {
    color: #009f00;
}

.has-sky-blue-color {
    color: #00bfff;
}

.has-cherry-color {
    color: #ff00aa;
}

.has-plum-color {
    color: #d49fff;
}

.has-ether-color {
    color: #aa00ff;
}

.has-violet-color {
    color: #7f3fff;
}

.has-royal-blue-color {
    color: #557fff;
}

.has-sea-water-color {
    color: #00bfaa;
}

.has-olive-color {
    color: #808000;
}

.has-sour-cherry-color {
    color: #800080;
}

.has-dark-sea-water-color {
    color: #008080;
}

.has-brown-color {
    color: #800000;
}

.has-salad-color {
    color: #d4ff00;
}

.has-salada-color {
    color: #00ffaa;
}

.has-navy-color {
    color: #000080;
}

.has-grays-color {
    color: #9ea0a4;
}

.has-gray-color {
    color: #d2d1d4;
}

.has-white-color {
    color: #ffffff;
}

.has-black-color {
    color: #000000;
}

.has-oran-color {
    color: #d49f00;
}

.has-bluan-color {
    color: #a6caf0;
}

.has-grian-color {
    color: #c0dcc0;
}

Hope this helps anyone who looks for beautiful colors to be premade.
Have a good day.

July 4, 2021 at 5:43 am #1843858

David

Staff

Customer Support

Thanks for sharing your codes!!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

November 16, 2021 at 8:31 am #2006693

omTesla

Hello
After latest updates not sure of WP or GPress the colors on backend don’t display, instead I see the ones from WP and add custom color link, but none of my custom premade colors display, however on front end they are displaying, so now I have a vice versa situation.
Did something change in the codes? I still have the old codes in Functions,php and I did not touch them.
Thank you.

November 16, 2021 at 6:14 pm #2007192

Elvin

Staff

Customer Support

Hi there,

The latest version of GP implemented a Global color palette.
https://generatepress.com/generatepress-3-1-global-colors-dynamic-typography/

This likely displayed over your palette on the backend but was overriden on the front-end because your elements kept the selectors(.has-xxxx) and its associated hex colors.

To put your palette back up, you can change the priority of your after_setup_theme. Example:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Blue' ),
            'slug'  => 'blue',
            'color' => '#0000ff',
        ),
        array(
            'name'  => __( 'Green' ),
            'slug'  => 'green',
            'color' => '#00ff00',
        ),
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#ff7f00',
        ),
		array(
            'name'  => __( 'Light Orange' ),
            'slug'  => 'light-orange',
            'color' => '#ff9f00',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#ff0000',
        ),
		array(
            'name'  => __( 'Light Red' ),
            'slug'  => 'light-red',
            'color' => '#ff1f55',
        ),
        array(
            'name'  => __( 'Purple' ),
            'slug'  => 'purple',
            'color' => '#ff00ff',
        ),
        array(
            'name'  => __( 'Cyan' ),
            'slug'  => 'cyan',
            'color' => '#00ffff',
        ),
        array(
            'name'  => __( 'Yellow' ),
            'slug'  => 'yellow',
            'color' => '#ffff00',
        ),
		array(
            'name'  => __( 'Golden' ),
            'slug'  => 'golden',
            'color' => '#ffdf00',
        ),
		array(
            'name'  => __( 'Gold' ),
            'slug'  => 'gold',
            'color' => '#fbc926',
        ),
		array(
            'name'  => __( 'Dark Pink' ),
            'slug'  => 'dark-pink',
            'color' => '#ff7faa',
        ),
		array(
            'name'  => __( 'Pink' ),
            'slug'  => 'pink',
            'color' => '#ffccff',
        ),
		array(
            'name'  => __( 'Dark Green' ),
            'slug'  => 'dark-green',
            'color' => '#009f00',
        ),
		array(
            'name'  => __( 'Sky Blue' ),
            'slug'  => 'sky-blue',
            'color' => '#00bfff',
        ),
		array(
            'name'  => __( 'Cherry' ),
            'slug'  => 'cherry',
            'color' => '#ff00aa',
        ),
		array(
            'name'  => __( 'Plum' ),
            'slug'  => 'plum',
            'color' => '#d49fff',
        ),
		array(
            'name'  => __( 'Ether' ),
            'slug'  => 'ether',
            'color' => '#aa00ff',
        ),
		array(
            'name'  => __( 'Violet' ),
            'slug'  => 'violet',
            'color' => '#7f3fff',
        ),
		array(
            'name'  => __( 'Royal Blue' ),
            'slug'  => 'royal-blue',
            'color' => '#557fff',
        ),
		array(
            'name'  => __( 'Sea Water' ),
            'slug'  => 'sea-water',
            'color' => '#00bfaa',
        ),
		array(
            'name'  => __( 'Olive' ),
            'slug'  => 'olive',
            'color' => '#808000',
        ),
		array(
            'name'  => __( 'Sour Cherry' ),
            'slug'  => 'sour-cherry',
            'color' => '#800080',
        ),
		array(
            'name'  => __( 'Dark Sea Water' ),
            'slug'  => 'dark-sea-water',
            'color' => '#008080',
        ),
		array(
            'name'  => __( 'Brown' ),
            'slug'  => 'brown',
            'color' => '#800000',
        ),
		array(
            'name'  => __( 'Salad' ),
            'slug'  => 'salad',
            'color' => '#d4ff00',
        ),
		array(
            'name'  => __( 'Salada' ),
            'slug'  => 'salada',
            'color' => '#00ffaa',
        ),
		array(
            'name'  => __( 'Navy' ),
            'slug'  => 'navy',
            'color' => '#000080',
        ),
		array(
            'name'  => __( 'GND' ),
            'slug'  => 'grays',
            'color' => '#9ea0a4',
        ),
		array(
            'name'  => __( 'Solder' ),
            'slug'  => 'gray',
            'color' => '#d2d1d4',
        ),
		array(
            'name'  => __( 'Black' ),
            'slug'  => 'black',
            'color' => '#000000',
        ),
		array(
            'name'  => __( 'White' ),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
		array(
            'name'  => __( 'oran' ),
            'slug'  => 'oran',
            'color' => '#d49f00',
        ),
				array(
            'name'  => __( 'bluan' ),
            'slug'  => 'bluan',
            'color' => '#a6caf0',
        ),
				array(
            'name'  => __( 'grian' ),
            'slug'  => 'grian',
            'color' => '#c0dcc0',
        ),
    ) );
},1 );

I’ve added priority 1.

A wise man once said:
"Have you cleared your cache?"

November 17, 2021 at 6:36 am #2007686

omTesla

I have set to 1 as in your example at the end of the code but no luck, colors don’t show in backend.
Did you mean something else, to replace “after_setup_theme” with 1 number?
Thank you.

November 17, 2021 at 4:40 pm #2008604

Elvin

Staff

Customer Support

Can you try value > 10?

Example:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name'  => __( 'Blue' ),
            'slug'  => 'blue',
            'color' => '#0000ff',
        ),
        array(
            'name'  => __( 'Green' ),
            'slug'  => 'green',
            'color' => '#00ff00',
        ),
        array(
            'name'  => __( 'Orange' ),
            'slug'  => 'orange',
            'color' => '#ff7f00',
        ),
		array(
            'name'  => __( 'Light Orange' ),
            'slug'  => 'light-orange',
            'color' => '#ff9f00',
        ),
        array(
            'name'  => __( 'Red' ),
            'slug'  => 'red',
            'color' => '#ff0000',
        ),
		array(
            'name'  => __( 'Light Red' ),
            'slug'  => 'light-red',
            'color' => '#ff1f55',
        ),
        array(
            'name'  => __( 'Purple' ),
            'slug'  => 'purple',
            'color' => '#ff00ff',
        ),
        array(
            'name'  => __( 'Cyan' ),
            'slug'  => 'cyan',
            'color' => '#00ffff',
        ),
        array(
            'name'  => __( 'Yellow' ),
            'slug'  => 'yellow',
            'color' => '#ffff00',
        ),
		array(
            'name'  => __( 'Golden' ),
            'slug'  => 'golden',
            'color' => '#ffdf00',
        ),
		array(
            'name'  => __( 'Gold' ),
            'slug'  => 'gold',
            'color' => '#fbc926',
        ),
		array(
            'name'  => __( 'Dark Pink' ),
            'slug'  => 'dark-pink',
            'color' => '#ff7faa',
        ),
		array(
            'name'  => __( 'Pink' ),
            'slug'  => 'pink',
            'color' => '#ffccff',
        ),
		array(
            'name'  => __( 'Dark Green' ),
            'slug'  => 'dark-green',
            'color' => '#009f00',
        ),
		array(
            'name'  => __( 'Sky Blue' ),
            'slug'  => 'sky-blue',
            'color' => '#00bfff',
        ),
		array(
            'name'  => __( 'Cherry' ),
            'slug'  => 'cherry',
            'color' => '#ff00aa',
        ),
		array(
            'name'  => __( 'Plum' ),
            'slug'  => 'plum',
            'color' => '#d49fff',
        ),
		array(
            'name'  => __( 'Ether' ),
            'slug'  => 'ether',
            'color' => '#aa00ff',
        ),
		array(
            'name'  => __( 'Violet' ),
            'slug'  => 'violet',
            'color' => '#7f3fff',
        ),
		array(
            'name'  => __( 'Royal Blue' ),
            'slug'  => 'royal-blue',
            'color' => '#557fff',
        ),
		array(
            'name'  => __( 'Sea Water' ),
            'slug'  => 'sea-water',
            'color' => '#00bfaa',
        ),
		array(
            'name'  => __( 'Olive' ),
            'slug'  => 'olive',
            'color' => '#808000',
        ),
		array(
            'name'  => __( 'Sour Cherry' ),
            'slug'  => 'sour-cherry',
            'color' => '#800080',
        ),
		array(
            'name'  => __( 'Dark Sea Water' ),
            'slug'  => 'dark-sea-water',
            'color' => '#008080',
        ),
		array(
            'name'  => __( 'Brown' ),
            'slug'  => 'brown',
            'color' => '#800000',
        ),
		array(
            'name'  => __( 'Salad' ),
            'slug'  => 'salad',
            'color' => '#d4ff00',
        ),
		array(
            'name'  => __( 'Salada' ),
            'slug'  => 'salada',
            'color' => '#00ffaa',
        ),
		array(
            'name'  => __( 'Navy' ),
            'slug'  => 'navy',
            'color' => '#000080',
        ),
		array(
            'name'  => __( 'GND' ),
            'slug'  => 'grays',
            'color' => '#9ea0a4',
        ),
		array(
            'name'  => __( 'Solder' ),
            'slug'  => 'gray',
            'color' => '#d2d1d4',
        ),
		array(
            'name'  => __( 'Black' ),
            'slug'  => 'black',
            'color' => '#000000',
        ),
		array(
            'name'  => __( 'White' ),
            'slug'  => 'white',
            'color' => '#ffffff',
        ),
		array(
            'name'  => __( 'oran' ),
            'slug'  => 'oran',
            'color' => '#d49f00',
        ),
				array(
            'name'  => __( 'bluan' ),
            'slug'  => 'bluan',
            'color' => '#a6caf0',
        ),
				array(
            'name'  => __( 'grian' ),
            'slug'  => 'grian',
            'color' => '#c0dcc0',
        ),
    ) );
},15 );

A wise man once said:
"Have you cleared your cache?"

November 17, 2021 at 5:56 pm #2008645

omTesla

I have try add 10 but still was not working, then I put 15 as in your code and it worked.
So case solved.
Thank you.
P.s. hope no future issues will appear, and too bad that Tom decided to add only those small selection of colors, instead he could made my colors predefined in the theme, so we do not play with codes or creating custom colors, it would save a bunch of time.

November 17, 2021 at 6:04 pm #2008647

Elvin

Staff

Customer Support

P.s. hope no future issues will appear, and too bad that Tom decided to add only those small selection of colors, instead he could made my colors predefined in the theme, so we do not play with codes or creating custom colors, it would save a bunch of time.

As much as we’d like to prevent issues, it can’t be guaranteed as WordPress itself may do changes on future versions that may cause undesirable results. 😀

But we try our best to patch things quickly. 😀

Glad you got it sorted. No problem.

A wise man once said:
"Have you cleared your cache?"

January 21, 2023 at 7:43 am #2503923

omTesla

Hello
Again colors don’t apply on front end, what has changed now?
Maybe now I have to create all colors with WP and remove all codes?
Thanks.

January 21, 2023 at 8:27 am #2504089

David

Staff

Customer Support

Hi there,

in Customizer > Colors do you have the colors you require in the Global Color pallet ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

Author

Posts

Viewing 15 posts - 16 through 30 (of 36 total)

← 1 2 3 →

You must be logged in to reply to this topic.

[Resolved] Custom Block Palette Text Colors Don’t Apply On Front End Using This Code

Popular Articles

Start building better websites today.