- This topic has 35 replies, 4 voices, and was last updated 1 week, 5 days ago by
David.
-
AuthorPosts
-
September 29, 2020 at 8:33 am #1464033
David
StaffCustomer SupportI 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 #1465240omTesla
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 #1465286David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 9:52 am #1467683omTesla
Well i leave it as is, for me is enough.
Thank you for your time.October 1, 2020 at 10:33 am #1467770David
StaffCustomer SupportNo problems!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 4, 2021 at 3:37 am #1843774omTesla
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 #1843858David
StaffCustomer SupportThanks 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 #2006693omTesla
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 #2007192Elvin
StaffCustomer 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
.A wise man once said:
"Have you cleared your cache?"November 17, 2021 at 6:36 am #2007686omTesla
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 #2008604Elvin
StaffCustomer 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 );
A wise man once said:
"Have you cleared your cache?"November 17, 2021 at 5:56 pm #2008645omTesla
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 #2008647Elvin
StaffCustomer 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.
A wise man once said:
"Have you cleared your cache?"January 21, 2023 at 7:43 am #2503923omTesla
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 #2504089David
StaffCustomer SupportHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.