Support

Account

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("http://www.amphibianreportcard.org/wp-content/uploads/arrow-box-population-A-e1538076463795.png");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationb {background-image:url( "http://www.amphibianreportcard.org/wp-content/uploads/threats/population/arrow-box-population-B-e1539785190245.png");background-repeat:no-repeat;min-height: 100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationc {background-image:url("http://www.amphibianreportcard.org/wp-content/uploads/threats/population/arrow-box-population-C-e1539785270647.png");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationd {background-image:url("http://www.amphibianreportcard.org/wp-content/uploads/threats/population/arrow-box-population-D-e1539785300646.png");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationf {background-image:url("http://www.amphibianreportcard.org/wp-content/uploads/threats/population/arrow-box-population-F-e1539785333173.png");background-repeat:no-repeat;min-height:100px;text-align:left;color:rgba(0, 0, 0, 0.0);}
    .populationna {background-image:url("http://www.amphibianreportcard.org/wp-content/uploads/threats/population/arrow-box-population-NA-e1539785376445.png");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: https://www.amphibianreportcard.org/california-tiger-salamander/. 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