Home Forums Front-end Issues CSS Styling based on value of field


CSS Styling based on value of field

  • Hi hope some can help with this. I have a selector field with 3 values in it.

    I am trying to style the out put so the background color of each value is different.

    For instance is a user selects 3 the background color for the text will be red, or if they select 1 the background blue.

    Sounds like a simple thing but I can’t figure it out at all, any help would be great

  • You can get the value of the field and set to a variable then verify the options. Here is the code:

    $option =  $the_field('myfield');
    if($option == "1"){ $color = "red";}
    elseif($option == "2"){ $color = "blue"; }
    elseif($option == "3"){$color = "green"; }
    <div style="background-color: <?php echo $color; ?>; ">My Content</div>

    Of course there is other ways to do it, like an array with the options and the colors etc.. but the ideia is the same.

    Hope this helps you. =D

  • Thank you for the reply, I was looking for a way to do it in CSS rather than PHP I have a filter script that output the results. So I was looking to have a way of adding styling the background per result in CSS

  • For me get a error with “$the_field(‘myField’)”.

    I put just “the_field(‘myField’)”, this returne the value correct, but not style of css.

    Can you help me?


  • The Error:

    “Fatal error: Function name must be a string”

  • I’m trying to do this same thing – have a background color of a field automatically set based on the variable chosen. Ex – editor selects “A” for a field, the box shows A with a background color of Red. Editor chooses “B”, background color on the front-end is orange. How do I do this? Where does the code go? I’m using ACF with Live Composer…


  • I’ll tell you what guys if we could get to the bottom of how to do this then i feel it would change ACF for the better beyond belief.

    Why on earth there isn’t another box next to each field to assign a CSS class or ID I have no idea.

    To be able to style a field and it’s value easily is essential in my view.

    I have no idea why if I have a selector field or check box field I can’t make the style of each value different.

    I want to do simple stuff like show an image of sun if a user ticks the value for ‘Full Sun’.

    Honestly it would change the front end of my website beyond belief.

    I hope somehow this can happen easily without ooooodles of code

  • I have a solution! Simple and Easy…

    Add me on Skype: [email protected]

    Lets Go!

  • Hi I don’t do Skype and think it would be more useful for everyone in the ACF world that you share the solution here.

    Thank you though for the offer and congratulations on finding a solution. In the meantime I’ll keep looking

  • If you’re talking about stying the ACF field and the selections/labels based on the value and not anything to do with the front end theme, well, that’s not really something that can be build into ACF. You’re talking about styling each selection based on the value of that selection. The current ACF UI for these selection fields is a textarea where you enter value/label pairs. The UI would need to be completely altered to give you a way to enter each value separately with its associated label and any special css classes and id attributes for each value. That would be more than an minor change I think.

    If you’re talking about on the front end, here you are on your own, but I would suggest going back up and reading @giovannicold’s reply.

  • I did mean to add that adding custom html and css to a field’s label is possible when editing the choices in acf. This will work as value/label pairs and include your html in the label

    red : <span class="red">Red</span>
    green : <span class="green">Green</span>
    blue : <span class="blue">Blue</span>
  • Hi John

    Thank you for the comprehensive reply. I do feel having read @giovannicold‘s reply again they are on the right lines. I have tried the solution you offered and the span class value are also stored in the database which is something I don’t want as these also get passed to my filter system which looks shocking.

    If I could figure out how and where to apply @giovannicold‘s fix then I would give it a shot but I can’t seem to get it to work in my theme.

    I’ll do some more reading up I think, thank you once again for your reply. Maybe this one requires someone a little more experienced than me to tackle. Thanks again.

  • What theme are you using?

  • Thanks everyone for all the responses! I need to read back over everything and test these suggestions out. I’m using Live Composer’s blank theme ( I’ve added css classes to the Live Composer blocks where the ACF fields are being pulled in, but I need to see if I can figure out how to do a dynamic stylesheet. I hadn’t tried that.

    With @giovannicold’s response, where does the php go exactly?

    I could use your help but I’d prefer to keep the solutions here in this thread if at all possible.

    Thank you!

  • Hi John

    I’m using a basic genesis theme.

    I use it will go in functions.php however Genesis doesn’t seem to like additional PHP code unless it’s added as new function. So not being an expert in PHP or Genesis I’m a little stumped at the mo.

    It’s no problem though don’t want anyone putting themselves out as I am a novice at coding and this website I’m building is just a hobby to get myself learning.

    All the same really appreciate the feedback and info from everyone.

  • My Solution!

  • Hi cadoomunhoz

    Thanks for that posting. I tried this but the other way round class after the :

    The way I did it, the css was written to the database along with the value which in effect makes the data wrong if it needs to be used for something else.

    Can you confirm if your css classes have been written to your database .. maybe I did it all the wrong way round.

  • See my CSS file.

  • Thank you so much for this … I think I’ve got something properly messed up somewhere.

    I’ll have a play around with it all.

  • Hi! I’m looking for the exact same thing, has any of you guys figured out how to do it?

    Currently I have a selector field with values in it, like @deejr on the first post. I want either to change the background of the selected value on the front-end or change the value color (in the front-end also), based on the user’s choice. Fields have numbers as possible choices, so if a user chooses “99”, the color should be blue, if he chooses 82, green, etc.

    Also I need this to work with a field in particular. Any idea of how to implement this using HTML, CSS or php? I’m currently using this theme btw:

    I’ve read @giovannicold ‘s answer but I can’t get it to work, where should I place the code exactly?

    Thanks in advance.

  • Hi @rahspot, yes, I was able to get this to work after extensive trial-and-error. Here’s what I did.

    Using the Advanced Custom Fields plugin, I have a fieldgroup setup with a series of fields. I set up “select” fields, coding the choices like this:

    A : <div class=”populationa”>A</div>
    B : <div class=”populationb”>B</div>
    C : <div class=”populationc”>C</div>
    D : <div class=”populationd”>D</div>
    F : <div class=”populationf”>F</div>
    Unknown Threat : <div class=”populationna”>NA</div>

    Make sure stylized UI is set to “yes”, return format set to “label”. I also gave the wrapper attribute a class. See acffieldsettings.jpg, attached.

    In my case, I needed a different image to display depending on the choice selected. I uploaded a series of image files – all pre-edited to be the correct size – to my server and wrote this in my custom.css file (Appearance > Customize > Additional CSS):

    .populationa {background-image:url("");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationb {background-image:url( "");background-repeat:no-repeat;min-height: 100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationc {background-image:url("");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationd {background-image:url("");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationf {background-image:url("");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationna {background-image:url("");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}

    The second screenshot attached shows how the options display in the backend to when creating a new post.

    You can see our website here: For each “report card”, any of those colored boxes with letter grades are handled in this way. The editor simply chooses from a drop-down menu of simple letters, and the css does the rest to pull in the correct image.

    I hope that helps! I’m happy to talk more. Good luck! ~Dinah

  • This idea is very good but I don’t know how to apply these values ​​to cells created with Divi
    Thanks in advance

  • I am using this code but it always returns the option “1”

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

The topic ‘CSS Styling based on value of field’ is closed to new replies.