Where to Add CSS Classes

For most CSS classes, look under “Row/Block/Column Options” in the backend. The field is labeled “Custom CSS Class”.

Gravity form CSS classes are found in the field itself. Click on the arrow and the field labeled “Custom CSS Class” is under the “Appearance” tab.

Menu CSS Classes are added directly on the menu item. To see and edit the CSS Classes field on menu items, make sure ‘CSS Classes’ is selected under ‘Show advanced menu properties’ in the Screen Options tab at the top of the screen.

CSS Classes

fixed-button--bottom, fixed-button--bottom-left, fixed-button--bottom-right, fixed-button--side
What it does: Makes buttons stick to the screen in the described location. (fixed-button--bottom defaults to the bottom right of the screen.)

How to use it:

• Only works on button blocks (not image buttons)
• Button can be anywhere on the page in the backend
• Commonly used as back to top buttons on long pages (ideally used hand in hand with anchor links)
• Should be used sparingly

respond-desktop-hide, respond-handhelds-hide

What it does: Hides the row, column, or block on the described screen width.

How to use it:

• Most rows, columns and blocks have checkbox field for these options which should be used over adding this as Custom CSS.
• These two option should never be applied to the same row, column, or block since it will never show on the front end.
• Commonly used to change the layout for mobile width screens
• Should be used sparingly

--primary-color, --secondary-color, --banner-button-color
What it does: Changes sub menu item and sub-sub menu item backgrounds to that color.

How to use it:

• Only works on menus in the header (will not affect Link List blocks)
• Will not affect top level menu items.
• Colors correspond to what’s set in Look & Feel > Colors
• Should be used sparingly

Gravity Form Classes

gf_left_half, gf_right_half, gf_left_third, gf_center_third, gf_right_third

What they do: Condenses form by moving selected form fields into the same line.

How to use them:

• Used to condense the amount of space forms take up on a page
• Must be used in conjunction with each other (if you align one field to the right, you need to align the other field to the left since it doesn’t happen automatically)
• Can only be used on forms

Best Practice

Refrain from using Custom CSS Class for maintenance purposes. If you do implement a CSS Class, please write an internal note describing the class used and where on the wordpress backend it appears.

Any further Custom CSS Classes not described above need to be implemented by the @fhsdevs and requested in the fhs_custom_requests slack room.