How to avoid overwriting colors when they are not selected in the custom fields

This topic has 3 replies, 2 voices, and was last updated 2 years, 8 months ago by Long Nguyen.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

March 18, 2022 at 4:49 PM #34595

Valentino

Participant

Hello,
I made some custom fields with color pickers to change the custom type post colors only on some pages.

The issue is that if I keep the custom field empty, overwite my CSS body variables, how can I avoid that?

I want to change color only when I have actually selected the color for each page.

Hese is a code i used in the wp_head:

'<div>
<style type="text/css">
.single {
--theme-color: <?php 
        $theme_color = rwmb_meta('theme_color_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        echo $theme_color;
        ?>;
;
--meta-scrolled-color: <?php 
        $theme_color = rwmb_meta('theme_color_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        echo $theme_color;
        ?>;
;
--shadow-theme-color: <?php 
        $theme_shadow_color = rwmb_meta('theme_shadow_color_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        echo $theme_shadow_color;
        ?>;
;
--color1: <?php 
        $color_1 = rwmb_meta('color_1_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        echo $color_1;
        ?>;
;
--color2: <?php 
        $color_2 = rwmb_meta('color_2_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        echo $color_2;
        ?>;
;
--color3: <?php 
        $color_3 = rwmb_meta('color_3_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        echo $color_3;
        ?>;
;
}
</style>
</div>'

This is the issue I'm facing:

I kept the field emplty:
https://drive.google.com/file/d/1-dBfV0SYjDWfwjKqJtCYXDloVDlXIiur/view?usp=sharing

They overwrite my css variables:
https://drive.google.com/file/d/1uKrRcrdvIQahnd7S7b8kqHkkK7BEu6CY/view?usp=sharing

https://drive.google.com/file/d/14FrCrgFo09CP7ttu6UeXkq_ABqhHUczM/view?usp=sharing

Is there a way to avoid it? I don't want to select colors for every page but only for a few of them.

Thanks

March 19, 2022 at 10:55 AM #34605

Long Nguyen

Moderator

Hi,

You can check the color field value if it is not empty then output the CSS property to avoid outputting the empty value. Like this

.single {
 <?php 
        $theme_color = rwmb_meta('theme_color_fdl', ['storage_type' => 'custom_table', 'table' => 'wp_mb_free_downloads_fields']);
        if( !empty( $theme_color ) ) echo '--theme-color:' . $theme_color;
?>
...
}

March 19, 2022 at 5:19 PM #34608

Valentino

Participant

Hi Long!
That works great! Many thanks!
Last question:
Could this also be implemented with the code I found here: https://metabox.io/wordpress-style-posts-in-particular-category/

Code:

<div>

function estar_child_output_frontend() {
    If ( ! is_single() ) {
        return;
    }
    $categories       = get_the_category();
    $background_color = get_term_meta( $categories[0]->term_id, 'background_color_taxonomy', true );
    if ( ! $background_color ) {
        return;
    }
    echo '<style>
        .single-post {
            background-color: ' . $background_color . ';
        }
    </style>';
}
add_action( 'wp_head', 'estar_child_output_frontend' );

</div>

If yes, how should I implement it?

March 21, 2022 at 10:57 AM #34692

Long Nguyen

Moderator

Hi,

To implement the code in the tutorial, please follow the steps in the tutorial to create the term meta and add the code to the file functions.php in the theme/child theme folder.

I also see you've created another topic to ask about this tutorial https://support.metabox.io/topic/change-color-style-for-posts-which-have-a-custom-taxonomy/
Does it work on your site?

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.