CSS style based on value of ACF-CodePudding

I'm using WordPress with ACF, and I need to use a value of custom fields for CSS. For example, if the value of ACF 'Name' is YES, then CSS style just background around that field, if the value of the field is NO, then the background will be red.

CodePudding user response：

I think you can easily fix it by if condition. It has value then shows green color otherwise shows red color. you need to replace the CSS class name.

<?php
// Get field data
$data = get_field('wifi');
if( 'yes' == $data ){
    ?>
    <style>
        .entry-title{
            color: green;
        }   
    </style>
    <?php
}else{
        ?>
    <style>
        .entry-title{
            color: red;
        }   
    </style>
    <?php
}
?>

Field: https://prnt.sc/cWvtiZia1KCm
Green value: https://prnt.sc/ZO_4N_ob6J7h
Red value: https://prnt.sc/ApikklLCEhhz

CodePudding user response：

I would do it via an "optional" class:

.xyz_class {
    background-color: red;
}

<?php
   $class_to_add = '';
   if (get_field('WiFi')) {
       $class_to_add = "xyz_class";
   }
?>

<div >
    ...
</div>