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:

1. Place a CSS file named field-approval.css in your theme’s /gravityview/css/ directory
2. 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;
}

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

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