gw-style-numbers-like-total.css: Added a snippet for Gravity Forms that style number fields like total field.

[sbassah]

Context

Migrated a CSS snippet from a Gist (https://gist.github.com/spivurno/0dfe3bc4bcdc4e96b975) to the snippet library. The snippet is to be added to GPECF FAQ.

📓 Notion: https://www.notion.so/gravitywiz/GPECF-FAQ-Total-based-Conditional-Logic-2a900ab68edf8089a912d67ea2b7c3b2?v=0aeb3c4385574579a40bf5fdf5d3434e&source=copy_link

Summary

Snippet Migration.

[coderabbitai]

Walkthrough

A new CSS stylesheet for Gravity Forms is added to style number fields using the gf_price and gf_total classes with specific font sizing, colors, and spacing properties.

Changes

Cohort / File(s)	Summary
New CSS stylesheet gravity-forms/gw-style-numbers-like-total.css	Adds styling for Gravity Forms number fields: gf_price class removes borders, sets font size to 1.2em, applies dark green color (#060), and resets text indent/padding; gf_total class applies the same green color to text

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• CSS-only changes with no behavioral or script logic
• Single straightforward file addition
• Key review points: verify CSS selectors are correct, confirm hex color values are intentional, ensure property values align with design intent

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a CSS stylesheet that styles Gravity Forms number fields to look like total fields.
Description check	✅ Passed	The description includes context (Gist migration reference and Notion link) and a summary section, though the Summary is minimal. All required template sections are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sbassah-patch-1

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

gravity-forms/gw-style-numbers-like-total.css (1)

7-18: Consider adding focus and disabled states for better UX.

The current CSS provides base styling but does not account for interactive states (focus) or disabled inputs. Adding these states would improve user experience and prevent form elements from appearing broken when interacting with them.

Consider adding focus and disabled state styles:

  .gform_wrapper .gf_price input[type=text],
  .gform_wrapper .gf_price input[type=number] {
  	border: 0;
  	font-size: 1.2em;
  	color: #060;
  	text-indent: 0;
  	padding: 0;
  }
+ .gform_wrapper .gf_price input[type=text]:focus,
+ .gform_wrapper .gf_price input[type=number]:focus {
+ 	outline: 1px solid #060;
+ }
+ .gform_wrapper .gf_price input:disabled,
+ .gform_wrapper .gf_total input:disabled {
+ 	opacity: 0.6;
+ }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b7a9cf and 222257f.

📒 Files selected for processing (1)

• gravity-forms/gw-style-numbers-like-total.css (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Documentation-code mismatch: comment references red price styling but code uses green.

The comment on lines 4-5 states that the gf_price class styles number fields like a "product price (red)", but the actual CSS color applied to both gf_price and gf_total is #060 (dark green). Clarify whether both classes should use the same green color or if gf_price should use a different color (e.g., red).

Apply one of these fixes:

Option 1: Update the comment to reflect the actual behavior (both green)

- * Use "gf_price" and "gf_total" CSS classes via the "CSS Class Name" setting to style your Number fields like a product
- * price (red) or total (green).
+ * Use "gf_price" and "gf_total" CSS classes via the "CSS Class Name" setting to style your Number fields like a product
+ * price or total (both styled in green).

Option 2: Update the CSS to differentiate price styling (red) from total styling (green)

  .gform_wrapper .gf_price input[type=text],
  .gform_wrapper .gf_price input[type=number] {
  	border: 0;
  	font-size: 1.2em;
-	color: #060;
+	color: #c00;
  	text-indent: 0;
  	padding: 0;
  }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	* Use "gf_price" and "gf_total" CSS classes via the "CSS Class Name" setting to style your Number fields like a product
	* price (red) or total (green).
	* Use "gf_price" and "gf_total" CSS classes via the "CSS Class Name" setting to style your Number fields like a product
	* price or total (both styled in green).

🤖 Prompt for AI Agents

In gravity-forms/gw-style-numbers-like-total.css around lines 4 to 5, the
comment claims gf_price styles numbers as "product price (red)" but the CSS
applies the same dark green (#060) to both gf_price and gf_total; either update
the comment to say both classes use green or change the CSS so gf_price uses a
red color (e.g., #c00) and gf_total remains green — pick one option and make the
corresponding change: for Option 1, edit the comment text to say both use green
(#060); for Option 2, change the gf_price color rule to a red value and keep
gf_total as green, and ensure the comment reflects that gf_price is red and
gf_total is green.