Archived topic
Global Colors Override for Subsite
14 replies · Started by Chris on December 3, 2021
Hey Team,
I've got the global colors snippet installed on a subsite via Script Organizer. The override appears to be working fine when in the admin or editing pages. When I go to the front end of the site the colors remain the old colors.
What am I doing wrong here? Why are these getting stuck?
Let me know what you need to get this sorted out.
Thanks.
Hi Chris,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Sure thing.
Hi Chris,
Can you share the exact code you were trying to run? To cross reference it with what reflects on the front-end.
I'm using this:
add_filter( 'option_generate_settings', function( $settings ) {
$settings['global_colors'] = [
[
'name' => __( 'contrast', 'generatepress' ),
'slug' => 'contrast',
'color' => '#8cff44',
],
[
'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '2' ),
'slug' => 'contrast-2',
'color' => '#29cc14',
],
[
'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '3' ),
'slug' => 'contrast-3',
'color' => '#c2cec7',
],
[
'name' => __( 'base', 'generatepress' ),
'slug' => 'base',
'color' => '#f0f0f0',
],
[
'name' => sprintf( __( 'Base %s', 'generatepress' ), '2' ),
'slug' => 'base-2',
'color' => '#f0f7ff',
],
[
'name' => sprintf( __( 'Base %s', 'generatepress' ), '3' ),
'slug' => 'base-3',
'color' => '#ffffff',
],
[
'name' => __( 'accent', 'generatepress' ),
'slug' => 'accent',
'color' => '#f1276a',
]
];
return $settings;
} );
When I am in the admin I can see the correct colors. But in the front end you still see this:
:root {
--contrast: #1d61ff;
--contrast-2: #1349c7;
--contrast-3: #b2b2be;
--base: #f0f0f0;
--base-2: #f0f7ff;
--base-3: #ffffff;
--accent: #f1276a;
}
I see now.
Your last array value doesn't have a comma. That's why it wasn't working.
Try this:
add_filter( 'option_generate_settings', function( $settings ) {
$settings['global_colors'] = [
[
'name' => __( 'contrast', 'generatepress' ),
'slug' => 'contrast',
'color' => '#8cff44',
],
[
'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '2' ),
'slug' => 'contrast-2',
'color' => '#29cc14',
],
[
'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '3' ),
'slug' => 'contrast-3',
'color' => '#c2cec7',
],
[
'name' => __( 'base', 'generatepress' ),
'slug' => 'base',
'color' => '#f0f0f0',
],
[
'name' => sprintf( __( 'Base %s', 'generatepress' ), '2' ),
'slug' => 'base-2',
'color' => '#f0f7ff',
],
[
'name' => sprintf( __( 'Base %s', 'generatepress' ), '3' ),
'slug' => 'base-3',
'color' => '#ffffff',
],
[
'name' => __( 'accent', 'generatepress' ),
'slug' => 'accent',
'color' => '#f1276a',
],
];
return $settings;
} );
Willing to look dumb, I was hoping that did the trick. I added the comma but still nothing. Did it work for you?
After editing the script directly and refreshing the site, the :root colors remain the same.
Here is what I did find out, if you go into the customizer it will load with the correct colors. If you exit they revert back. If you make any change, even not a color change, and click publish, the color will get "saved".
It appears that the theme isn't loading in the script, or it isn't taking priority.
Hi there,
you don't require and should not use the PHP Snippet for setting colors in the latest version of the theme ( GP 3.1 ).
Instead you simply create your pallet in the Customizer > Colors > Global Colors.
Those colors will be accesible in the customizer and the editor. And they are also CSS variables so you can refresh colors globally from the color pallet itself.
Hey David,
I appreciate the response but I am not sure you taking into consideration the point of what I am doing.
I want to use a ACF Options page to set the colors. When I click save on that page I am triggering an update of my colors. The reason I want to use the code is to lock the global colors. The admin should only be able to change the colors from my options page.
Sorry guys, but this is just broken.
Honestly, it just looks like Gp isn't quite aware of what is happening.
Trying to change the global colors with code doesn't work. What happens is it changes the pallets only. But the actual CSS generated for the :root colors is unaffected. And based on the responses here, your code is just broke or incorrectly explained.
Your code only changes the pallet.
If I add a CSS script to Scripts Organizer with my :root colors, the site changes accordingly.
Please fix your script.
The script you're using applies to the old color module. I have passed this topic over to Tom so he can cover how the new system works.
Sounds good.
I'll take a doc with the deets. So long as it works.
That looks like it should work.
Are you using the dynamic CSS cache option in "Customize > General"? If so, try turning that off.
If not, are you using the External file CSS print method in "Customize > General"? If so, you'll want to regenerate the file.
Let me know :)
Thank you, Tom.
That did it. Thanks to you and your team for troubleshooting this simple issue.
Glad I could help :)