Style ACF without inline styles

Created a nutritional chart using Advanced Custom Fields and CSS. It works how I want it to, but I'm hoping to auto-style more of the rows. My code just runs a loop to look for another nutrient, without regard to whether it's a subnutrient or not (Sat Fat, Trans Fat, etc). As you can see by the chart, nutrients are bold, subs are not.

You can see how the backend looks from my screengrab. As I said, it works how I have it. I just would like to use less (or no) html on the backend so the client doesn't get confused if they need to edit anything.

  • Michelle Shull

    Hey, Josh!

    Possibly! Let's check to see if there are unique element names for your nutritional table here.

    On the front end, right click anywhere in your first column and choose "inspect element" from the pop up.

    That will bring up a dev console, and it should show you the element name. If it's just pulling the default table styles for your theme, you won't see a unique element name here. If Advanced Custom Fields gives things unique element names, we can work with this.

    If this isn't helpful, can you link me to a page where I can see the table displayed on the front end? I can poke around and see if we can work around having to enter HTML styling on the admin side.

    Thanks!

  • Josh

    I created all the styling, so I know where it is all coming from. You can see the table at http://eveia.28dev.com/cheesecakes/chocolate/.

    It would be easy to style it differently, if not for the fact that the loop just looks for my next row in my ACF repeater. So, if I only have two rows, that's all that shows in my table. I just 'Add Row' to add another nutrient, so there is no way to target my nutrients separately from my subnutrients without inline html as I am doing now. :slight_frown:

    I hope that doesn't confuse the issue even more. I just unlocked admin access if you want to just take a look at what I'm doing there. You can see the inputs on any of the childpages under 'Cheesecake'.

  • Jude

    Hi there @Josh

    Sorry the response took a while longer than expected. Appreciate your patience. Looks like Michelle is really busy and this one slipped through the gaps, I'm gonna take the liberty of chipping in here.

    What you have looks like an optimal solution here, an alternative to this would be to use forms that read and populate ACF values. That route would take a lot of code / time, not sure if its within the scope

    A hacky quickfix would be by using JS on the front end to do this. Since you know for a fact that there are only a handful of nutrients and everything else in the table is sub nutrients. You could try something like

    $("article > div > table > tbody > tr > td ").each(function(){
        var nutrient = $(this).val();
        if (! str.indexOf(nutrient) > -1)
           $(this).addClass(" sub_nutrient ") ;
    }) ;

    Hope that helps

    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.