- This topic has 35 replies, 4 voices, and was last updated 1 year, 3 months ago by David.
-
AuthorPosts
-
September 29, 2020 at 8:33 am #1464033DavidStaffCustomer 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.
September 30, 2020 at 6:45 am #1465240PhilipBut 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 #1465286DavidStaffCustomer SupportAs 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.
October 1, 2020 at 9:52 am #1467683PhilipWell i leave it as is, for me is enough.
Thank you for your time.October 1, 2020 at 10:33 am #1467770DavidStaffCustomer SupportNo problems!
July 4, 2021 at 3:37 am #1843774PhilipHello, 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 #1843858DavidStaffCustomer SupportThanks for sharing your codes!!
November 16, 2021 at 8:31 am #2006693PhilipHello
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 #2007192ElvinStaffCustomer SupportHi 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
.November 17, 2021 at 6:36 am #2007686PhilipI 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 #2008604ElvinStaffCustomer SupportCan 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 );
November 17, 2021 at 5:56 pm #2008645PhilipI 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 #2008647ElvinStaffCustomer SupportP.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.
January 21, 2023 at 7:43 am #2503923PhilipHello
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 #2504089DavidStaffCustomer SupportHi there,
in Customizer > Colors do you have the colors you require in the Global Color pallet ?
-
AuthorPosts
- You must be logged in to reply to this topic.