Archived topic
Custom Block Palette Text Colors Don't Apply On Front End Using This Code
35 replies · Started by Philip on September 7, 2020
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.
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?
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.
Well i leave it as is, for me is enough.
Thank you for your time.
No problems!
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.
Thanks for sharing your codes!!
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.
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.
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.
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 );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.
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. :D
But we try our best to patch things quickly. :D
Glad you got it sorted. No problem.
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.
Hi there,
in Customizer > Colors do you have the colors you require in the Global Color pallet ?