[Resolved] Custom Block Palette Text Colors Don’t Apply On Front End Using This Code

Home Forums Support [Resolved] Custom Block Palette Text Colors Don’t Apply On Front End Using This Code

Home Forums Support Custom Block Palette Text Colors Don’t Apply On Front End Using This Code

Viewing 15 posts - 16 through 30 (of 36 total)
  • Author
    Posts
  • #1464033
    David
    Staff
    Customer 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.

    #1465240
    omTesla

    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?

    #1465286
    David
    Staff
    Customer Support

    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.

    #1467683
    omTesla

    Well i leave it as is, for me is enough.
    Thank you for your time.

    #1467770
    David
    Staff
    Customer Support
    #1843774
    omTesla

    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.

    #1843858
    David
    Staff
    Customer Support

    Thanks for sharing your codes!!

    #2006693
    omTesla

    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.

    #2007192
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2007686
    omTesla

    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.

    #2008604
    Elvin
    Staff
    Customer Support

    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 );

    A wise man once said:
    "Have you cleared your cache?"

    #2008645
    omTesla

    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.

    #2008647
    Elvin
    Staff
    Customer Support

    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. ๐Ÿ˜€

    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?"

    #2503923
    omTesla

    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.

    #2504089
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Colors do you have the colors you require in the Global Color pallet ?

Viewing 15 posts - 16 through 30 (of 36 total)
  • You must be logged in to reply to this topic.