Support

Account

Register Login

Forum Replies Created

  • 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

    acffieldsett....jpg
    Add-New-Post....png

  • 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 (https://livecomposerplugin.com/downloads/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?


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

    Thank you!

  • 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…

    Thanks!

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