Common Custom CSS Queries

Recurring Donation Frequencies

Change Text For Frequency Buttons

Use for when 2 or fewer frequencies are selected.

/* Hide original button text */
.GF-RecurringOptions__button {
    font-size: 0;
}

/* Replace with custom text for first button */
.GF-RecurringOptions__button:nth-child(1)::before {
    font-size: 12pt;
    content: "custom text one";
    display: inline-block;
}

/* Replace with custom text for second button */
.GF-RecurringOptions__button:nth-child(2)::before {
    font-size: 12pt;
    content: "custom text two";
    display: inline-block;
}

Change Text For Frequency Dropdown

Use for when 3 or more frequencies are selected.

/* Hide original text */
.GF-RecurringOptions [role="option"] p,
.GF-RecurringOptions__select [role="button"] p {
    font-size: 0;
}

/* Define custom text once */
.GF-RecurringOptions {
    --option-1-text: "custom text one";
    --option-2-text: "custom text two";
    --option-3-text: "custom text three";
}

/* Apply to menu options and selected state */
.GF-RecurringOptions [role="option"]:nth-child(1) p::before,
.GF-RecurringOptions:has(input[value="Once"]) .GF-RecurringOptions__select [role="button"] p::before {
    font-size: 0.875rem;
    content: var(--option-1-text);
}

.GF-RecurringOptions [role="option"]:nth-child(2) p::before,
.GF-RecurringOptions:has(input[value="Weekly"]) .GF-RecurringOptions__select [role="button"] p::before {
    font-size: 0.875rem;
    content: var(--option-2-text);
}

.GF-RecurringOptions [role="option"]:nth-child(3) p::before,
.GF-RecurringOptions:has(input[value="Monthly"]) .GF-RecurringOptions__select [role="button"] p::before {
    font-size: 0.875rem;
    content: var(--option-3-text);
}

Giving Form Header

Hide the Header

.GF-Header{
    display:none;
}

Adjust Font Size

/*Header Title*/
.GF-Header__title {
    font-size: 36pt;
}

/*Header Description*/
.GF-Header__subtitle {
    font-size: 18pt;
}

Donation Amounts

Only Offer a Custom Gift Amount

/* Hide all preset amount buttons ($5, $100, $200, $250, $500) */
.GF-GiftOptions__button-container button.GF-GiftOptions__button {
    display: none;
}

/* Hide the first grid row that contains the first 3 preset buttons */
.GF-GiftOptions__button-container>.MuiGrid-container:first-child {
    display: none;
}

/* Hide the first two grid items in the second row (which contain $250 and $500 buttons) */
.GF-GiftOptions__button-container>.MuiGrid-container:last-child>.MuiGrid-item:first-child,
.GF-GiftOptions__button-container>.MuiGrid-container:last-child>.MuiGrid-item:nth-child(2) {
    display: none;
}

/* Ensure the last grid item (containing the custom amount input) is visible and takes full width */
.GF-GiftOptions__button-container>.MuiGrid-container:last-child>.MuiGrid-item:last-child,
.GF-GiftOptions__button-container .GF-GiftOptions__custom-amount {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Mobile styles - ensure custom amount input takes full width on small screens */
@media (max-width: 599px) {

    .GF-GiftOptions__button-container>.MuiGrid-container:last-child>.MuiGrid-item:last-child,
    .GF-GiftOptions__button-container .GF-GiftOptions__custom-amount {
        max-width: 100%;
        flex-grow: 1; /* Allow the input to expand and fill available space */
    }
}

Custom Amount Error Message

/* Hide original error text */
.GF-GiftOptions__custom-amount--error p[id$="-helper-text"] {
    font-size: 0;
}

/* Replace with custom error text */
.GF-GiftOptions__custom-amount--error p[id$="-helper-text"]::after {
    font-size: 12pt;
    content: "Custom Amount Error Message";
}

Adjust the Recaptcha Badge for Mobile Screens

Solves the issue that causes the footer to be obscured by the Recaptcha badge.

/* Make reCAPTCHA badge semi-transparent on mobile devices (400px and below) */
@media (max-width: 400px) {
    .grecaptcha-badge {
        opacity: 50%; /* Reduce visibility to 50% opacity for less intrusive appearance */
    }
}

Remove White Corners on Giving Form

Most color codes use six digits. This one uses eight, with the last two indicating transparency, making the color completely invisible.

body {
    background-color: #00000000;
}

Branded Fonts

To customize fonts, see the knowledge base article on branded fonts.

Goal Meter

For goal meter customization options, see the knowledge base article on goal meter custom CSS.