- This topic has 12 replies, 3 voices, and was last updated 1 year, 6 months ago by
.
-
Posts
-
Hi there,
I believe I discovered a small bug in the color settings of the free GeneratePress theme.
So in the customizer you are able to set your color scheme. For the most part this works fine. I’m able to select and apply the colors in the editor and in the front-end of the website they turn up as expected.However, I discovered the colors are not fully equipped. When I apply the colors in for example Newsletter Glue, all appears to be fine when I preview the letter in the website editor preview, but the colors do not turn up in the newsletter (preview) itself. When I enable a different theme, all works fine. When I add the color by entering a hex code, it also works fine.
What I was able to discover so far: When I click on the color itself in the editor I see #000000 when GeneratePress is enabled. When a different theme is applied (Seedlet for example), the colors are also shown in hex. So there might be the issue in relation with other blocks depending on global color selection.
Is there a code snippet that I can use to get this working or any other tips? Thanks in advance. Bianca
Customer Support
Hi there,
Is Newsletter Glue creating an email or its own templates ?
Hi David,
Thanks for your quick reply. I’m not quite sure. Newsletter Glue Pro creates posts (as in CPT) that can be sent via Email(through Mailchimp API or similar). It uses the block editor to compose the email. There are two kind of previews. The one from the Gutenberg editor itself(top right dropdown with three options) and one from Newsletter Glue which shows a preview similar to what you see when viewing a newsletter in the browser.When I look at the preview through the Gutenberg preview, the colors show up, when I preview through the preview function of Newsletter Glue (and also when I send out a test email), the color does not turn up if it is a global color. If I enter the color as hex, there is no problem. If I use a different theme (Mcluhan in the video) then it also shows up as it should.
I managed to make a testvideo which I include in private.
Although I can’t supply proof, I do not believe this problem is isolated to Newsletter Glue alone.
I refer to the image from my first post which is not made in newsletter glue. You can see that when clicked on the color, the GeneratePress theme shows #000000 and the other theme (Seedlet) shows #378427.Maybe I’m wrong, but I think it’s related.
Yeah, you will need to use static #hex or RBGA Colors when it comes to styling your Newsletter glue templates.
The reason for that is the template won’t store the CSS Variables used to load the GP Global colors.To cover, when you add a Global color in GP it writes some CSS variables to
<head>of the site.
They look like this::root { --contrast: #222222; --contrast-2: #575760; --contrast-3: #b2b2be; --base: #f0f0f0; --base-2: #f7f8f9; --base-3: #ffffff; --accent: #1e73be; }When you select a block or a theme element and apply one of those colors the CSS uses the variable eg.
.some-block { color: var(--accent); }The browser swaps the
var(--accent)for its variable value eg.#1e73be;However, it looks like Newsletter Glue doesn’t support CSS Variables. And for good reason:
1. The email wont have the list of CSS variables to load in its HTML
2. Email clients have terrible support for CSS Variables. ( i think only Apple Mail does it well ).So you must type in the #hex colors in the color field provided.
Hey David,
Not quite sure if I understand. How does this explain that when another theme is enabled I am able to set the global colors?
Also, how does it explain the situation in the image, which is not related to Newsletter Glue?Does it mean that GeneratePress handles color management and storing different than other themes?
Does it mean that GeneratePress handles color management and storing different than other themes?
Yes.
See here:
Notice that the color name is Contrast and the color value: is
var(--base)
That is GP doing Global Colors using CSS variables.If in the future you went to Customizer > Colors and changed your
basecolor, then all instances ofvar(--base)across your site will use your new color.Whereas in your other theme you would have to manually edit every instance of the
#378426on every page.Ah, Now I understand.
I assumed (wrongly) that the colorpicker in the editor (not the customizer) functions the same for all themes and stored hex codes underneath, as it superficially looks the same to the untrained eye. Ok thanks. I’m going to try to add the palette as hex to.You’re welcome.
For the Newsletter Glue templates i would recommend manually entering the #hex value in the color pallet in the post editor 🙂Hi Dave, Thanks. I opened this issue with NG as well as I expect this to happen more often in the near future with other themes as well. My client expects the palet to work instead of manually inserting hex colors.
I was able to replace the palet with a standard one that uses hex codes instead of global colors. However this is not ideal yet. I actually only want it to replace the palet in NG.
I’m still figuring this one out. Might be very simple if I can find the right conditional or filter. Do you happen to know it by any chance? I am aware this falls outside the scope of GeneratePress.
That i am afraid i do not know.
Ask Newsletter Glue if there is a hook, we can use to add the colors to the:rootof there templates. They may already have a solution we can use.Hi David,
After this conversation I sought assistance from Newsletter Glue and after that I submitted my initial code for replacing the color palette in the editor, they were able to add the right conditional tags, so it only appears for their NG post type. I leave it here for reference. Cheers, Bianca.add_action( 'after_setup_theme', 'setup_hex_color_palette',100 ); function setup_hex_color_palette() { $add_colors = false; if ( isset( $_GET[ 'post' ] ) ) { $post_id = absint( $_GET[ 'post' ] ); $post_type = get_post_type( $post_id ); if ( $post_type && ( strstr( $post_type, 'ngl_' ) || strstr( $post_type, 'newsletterglue' ) ) ) { $add_colors = true; } } if ( isset( $_GET[ 'post_type' ] ) ) { $post_type = sanitize_text_field( $_GET[ 'post_type' ] ); if ( $post_type && ( strstr( $post_type, 'ngl_' ) || strstr( $post_type, 'newsletterglue' ) ) ) { $add_colors = true; } } if ( $add_colors ) { add_theme_support( 'editor-color-palette', array( array( 'name' => esc_attr__( 'Alabaster', 'generatepress' ), 'slug' => 'alabaster', 'color' => '#efeeea', ), array( 'name' => esc_attr__( 'Raspberry', 'generatepress'), 'slug' => 'raspberry', 'color' => '#ff0066', ), array( 'name' => esc_attr__( 'Soft Red', 'generatepress' ), 'slug' => 'soft-red', 'color' => '#f78da7', ) ) ); } }Thank You @David https://www.yojanahindime.in/
Glad to hear you got that resolved, and thanks for sharing the solution.
- You must be logged in to reply to this topic.