Support

Account

Home Forums Front-end Issues How to Apply Custom Field Content to Styles?

Solving

How to Apply Custom Field Content to Styles?

  • I’m looking to be able to upload a custom bullet point image (via custom field) to be applied to the list/ul only on that specific post, however I can’t figure out how to apply the css directive within the template php file.

    Is there a way to insert that line of styling with the get_field directly into the php file? All the help forums I’ve seen suggest calling stylesheets, but then you’re not pulling the ACF field img url, so I’m lost.

    Thanks!
    Sara

  • You would have to use inline styles. You simply need to create a style block.

    
    <style>
      /* add styles using acf fields, for example: */
      .some-class {
        background-image: <?php the_field('my_backgroung_field');
      }
    </style>
    

    Please note, it is just a quick example

  • There are different ways to create custom bullet points, either with the list-style-image CSS property or with a background image or with generated content (CSS pseudo-elements :before/:after, and then a background on those).

    The best practice would be an internal stylesheet in the document header (similar to what John Huebner suggested), i. e. in header.php, and then add a class to the list (or an ancestor) in question to apply this style to that element.

    Another way would be inline-styles on the list items themselves, like:
    <li style="background-image: url("<?php the_field('bullet_image'); ?>">item text</li>

    But the first method would be preferable as it is more flexible in the end.

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

You must be logged in to reply to this topic.