Modifying the CSS of Front-end approval

Front-end Approval requires GravityView Version 1.19 or newer

Overriding the CSS

If you want to use your own CSS file instead of the bundled file, there are two ways:

Place a CSS file named field-approval.css in your theme's /gravityview/css/ directory
Use the gravityview/field/approval/css_url filter to modify the URL to the CSS file. If you return an empty string, it will disable loading the CSS file altogether.

About the CSS

The entry approval buttons are created using the CSS ::before selector; check out the source files to get a better understanding of how they are created.

Front-end entry approval buttons use Dashicons icons for the symbols. All the entry approval toggle buttons have the .gv-approval-toggle CSS class. The three different approval states have the following CSS classes:

.gv-approval-approved - Approved; green checkbox \f147
.gv-approval-disapproved - Rejected; red x \f158
.gv-approval-unapproved - Not yet reviewed: yellow circle \f159

Example: Removing button borders and background

If you want to give the buttons no border and a transparent background, use this code:

.gv-approval-toggle::before {
  border: none;	
}

.gv-approval-toggle:link::before, .gv-approval-toggle:visited::before {
  background: transparent;
}