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

  • 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