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
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.