Adding CSS to an ACF View

  • Resolved jterryc

    (@jterryc)


    11 months ago

    Despite an extensive search of both the ACF Views documentation and the wider internet, I can find no guidance or examples of how to actually add CSS styling to a created View – as it stands, the labels and field values are simply displayed as plain text.

    I can follow the generated template markup OK, but I have no idea how to define the neccessary CSS selectors in order to style and position the labels and field values on the page.

    Any assistance would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author WPLake

    (@wplakeorg)

    HI @jterryc

    We’ll be sure to include more CSS-related guides in our Docs soon.
    You can hover on one of the “i” icons within the plugin UI to see helpful hints.
    For CSS Code,
    ‘#view’ will be replaced with ‘.acf-view–id–X’ (or ‘.bem-name’).
    ‘#view__’ will be replaced with ‘.acf-view–id–X .acf-view__’ (or ‘.bem-name .bem-name__’). It means you can use ‘#view__row’ and it’ll be replaced with ‘.bem-name .bem-name__row’.
    ‘#’ will be replaced with ‘.acf-view’ (or ‘.bem-name__’)

    In the case of your page you could try the CSS below;

    #view__row {
display: flex;
}

#acf-view__group-type-label {
padding-right: 3px;
}
    Thread Starter jterryc

    (@jterryc)

    Sorry – your suggested CSS has no effect on the displayed View. I tried as many combinations of the various field classes as I could think of as selectors, but nothing changed the displayed data.

    All I am really looking for is to display each field label plus its data value on a separate line, with the label in bold. Ideally I would also like to set a fixed label width so that everything is neatly aligned.

    Any further suggestions ?

    Thread Starter jterryc

    (@jterryc)

    Forgot to mark the query as unresolved – now done. Hoping for an early reply, thank you.

    Plugin Author WPLake

    (@wplakeorg)

    Hi @jterryc

    My apologies for the misguidance.
    In your case, you’d need to add the following CSS.

    /* the first and universal way */ 
view > div {
display: flex;
gap: 10px;
}

    /* the second way, can be applied only if "add classification classes" option in the Template tab is active, which is unchecked by default */

#view__row {
    display: flex;
    gap: 10px;
}
    Thread Starter jterryc

    (@jterryc)

    Thank you – using the second way, with the Template option enabled, works fine (and I think I have a grasp of the selector terminology !)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding CSS to an ACF View’ is closed to new replies.