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 8 months, 3 weeks ago by Long Nguyen.

Creator

Topic

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

Creator

Topic

Viewing 3 replies - 1 through 3 (of 3 total)

Author

Replies
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

Replies

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.