Support

Account

Home Forums Front-end Issues Styling CSS in PHP, diffrent colors on diffrent checkboxes value.

Solving

Styling CSS in PHP, diffrent colors on diffrent checkboxes value.

  • Hi.
    Here is the page I’m working on.
    https://sanktannaskargard.com/foretag/
    (You can only see the design in computer size.)

    I would like my checkboxes to look like this.
    mattag
    I’m not figuring out how or where to style it with css in the php.

    Now it looks like this, all is grey. I want them in different colors depending on their choice.
    mattag2

    Right now I’m trying this in variations, but most times everything is blanc.

    <div class="mattag">
    
    <?php
    $colors = get_field('erbjuder');
    if( $colors ): ?>
    <ul>
        <?php foreach( $colors as $color ): ?>
            <li><span class="color-<?php echo $color['value']; ?>"><?php echo $color['label']; ?></span></li>
        <?php endforeach; ?>
    </ul>
    <?php endif; ?>
    
    </div>

    And trying to put this in, but don’t know how.

    $colors = get_field(‘colors’);
    if( $colors && in_array(‘red’, $colors) ) {
    // Do something.
    }

    I have read this but not figuring it out.
    https://www.advancedcustomfields.com/resources/checkbox/

  • For your variations where everything is blank, did you adjust the return value of the checkbox field? By default, ACF checkbox fields return the value only so if you’re wanting to return an array with both the label and the value and use one for the color and one for the text, you’d want to change the return value to return both. If you don’t, it’d result in neither value nor label returning anything.

  • Thanks, that’s done.

    I would like to get each value its own color.

    Like:

    Café = red
    Restaurang = blue
    Bar = black
    GĂ„rdsbutik = grey

  • I don’t see anything wrong with your code. Have you added those classes to a CSS file that is loaded in order to affect the style changes?

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

You must be logged in to reply to this topic.