Meta Box

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

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 18, 2022 at 4:49 PM #34595
    ValentinoValentino
    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 NguyenLong 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
    ValentinoValentino
    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 NguyenLong 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.