Remember to check out the fields page for an overview of the fields you can style with ACF Companion.

Classes

ACF Companion comes with over 20 CSS classes to allow you to craft a stunning content management experience for site editors.

N.B. The classes go at the bottom of the of the field settings on the Edit Field Group screen.

True/False

Toggle

acfc-true-false

When you’re conditionally hiding a field with the true/false field, you may want to add a padding left so the conditionally hidden field feels related to the true/false toggle.

Use the classes below to add padding left. Choose the relevant modifier for the depth of conditional. For example, if you’re conditionally hiding a field with the True/False toggle, which itself is conditionally hidden, then use acfc-padding-left--m, or for two levels of depth use acfc-padding-left--l.

acfc-padding-left--s
acfc-padding-left--m
acfc-padding-left--l

Remember that the Gutenberg sidebar is only 280px wide (on desktop), so you’ll probably only want to use acfc-padding-left–s if your ACF fields will be editable in the sidebar (to avoid fields being too cramped).

To give the toggle a nice finish we’re making clever use of the On Text, Off Text and Message values, download the example JSON below to see an example.

Download Example JSON

How do I import a JSON?
Go to Custom Fields >> Tools, under the Import Field Groups section click Choose File and when the file is selected click Import Group. Once imported, head to Custom Fields >> Field Groups where you’ll see your newly imported field group titled ACFC Options Page Example.

Pretend Button (pseudo button)

In addition to transforming the True/False field in to a toggle (above), you can also transform the true/false field in to a pretend button, that fits perfectly with the WP UI. To do so, simply add this class:

acfc-pretend-button

Similar to the toggle (above), we’re making clever use of the On Text, Off Text and Message values, download the example JSON below to see an example.

Download Example JSON

Color Picker

acfc-color-picker

Tabs

acfc-tabs-helper

Easily convert tabs in to a settings button. Great for when you want to separate fields in to a separate tab, and don’t need more than two tabs.

Currently it’s not possible to add classes straight to tabs; the way we get around this is by adding the class acfc-tabs-helper to the field above the tabs.

If there isn’t a field above, then we simply add one, and give it the classes acfc-tabs-helper acfc-hidden. An empty message field works well.

Download Example JSON

Buttons

acfc-buttons

Give the buttons a Gutenberg-style makeover. And combine them with dashicons to bring them to life.

Although you could add icons, or a custom font for icons, the WordPress dashicons custom font already loads for you, and you can easily use icons from it by copying the html for the icon. This is a very quick and convenient way to add a visual flare to your buttons and makes editing content all that nicer.

Here is an example showing text align buttons using dashicons:

left : <span class="dashicons dashicons-editor-alignleft">Left aligned</span>
center : <span class="dashicons dashicons-editor-aligncenter">Center aligned</span>
right : <span class="dashicons dashicons-editor-alignright">Right aligned</span>

These would go in the Choices textarea when editing the button group field.

Adding a tick to the button

Add a tick to the button that’s selected. This adds an additional visual marker of the selected button, which is great for when your buttons are a little larger, and they are also accessible as only relying on colour can cause issues for people with colour blindness.

<span class="dashicons dashicons-yes"></span> - Selected</span>

Accordion

Transform the accordion in to a help button that looks and feels just like WordPress.

acfc-accordion-helper

Just like the tabs, it’s not possible to add a class to an accordion, so we use a helper class on the field above instead.

Repeater

Transform the repeater in to a masterpiece of UI magic, with more screen real estate and tight integration with the Gutenberg UI. If you’ve ever looked at the repeater and gone “hhmm, if only this was better”, then you’re going to love this!

acfc-repeater

The block layout for the repeater must be selected.

Clone

This makes clones fit seamlessly, so they don’t look like clones (phew).

acfc-clone-seamless

Range

This one is short and sweet. Adds a min-width to the range input and sets the padding so it doesn’t (or shouldn’t) get overwritten by front-end styles.

acfc-range

Link

acfc-link

Select

acfc-select

Image

acfc-image

Misc

acfc-hidden
acfc-no-border
acfc-hr

Typography

acfc-h2
acfc-h3
acfc-italic

Margins

These classes allow you to add negative margins to your fields. The n stands for negative (obvs).

acfc-margin-top--ns
acfc-margin-top--nm
acfc-margin-top--nl

Notices

Add a WordPress styled notice to your fields. Add this class to the message field and add your content as needed.

acfc-notice

Things without classes

Some things are styled automatically without the need to add classes. These are:

  • Fields in the main Gutenberg content area. These are styled to make things feel more Gutenbergy.

More

ACF Companion also helps you style beautiful options pages and Gutenberg block placeholders.