How can I change this unfound background color in my order form?

Max Classic
, ,
1

I can’t figure out how to edit the upper half of my order forms background color.

Here is a 30 second video showing the issue: Can't figure out how to edit background color of Infusionsoft order form - YouTube

Here is the page I’m working on: https://andrewsutton.infusionsoft.com/app/orderForms/Power-Up-Your-Privates

I want the purple to fade up into the white but I can’t figure out how to get rid of the green.

Can anyone help?

Here is my Appearance CSS:
/* Layout: One Column
Theme: Breeze

Appearance.css contains the costmetic properties for your order
form, such as fonts, colors, background images and borders.

NOTE: There are additional classes that are not listed here
because they currently have no attributes. You can locate
these by downloading and using Firebug.
===============================================================*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);

body {
font: 13px/1.5 ‘Open Sans’, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Calibri, Verdana, sans-serif;
color: #666666;
background-color: #af84c2;
background-image: url(/resources/styledcart/images/breeze/one-column/order-form/breeze-bgr.jpg?b=1.70.0.240704-hf-202005281822);
background-repeat: repeat-x;
}

td {
font: 15px/1.5 ‘Open Sans’, Helvetica, Arial, sans-serif;
color: #666666;
}

img, img a {
border: 0 none;
}

/* PRODUCT GRID
===============================================================*/

.priceBold {
/* Price subtotal on bottom right of product grid */
font-weight: bold;
}

.discountedPrice {
text-decoration: line-through;
}

.totalPrice {
/* Subtotal label on bottom left of product grid */
font-weight: bold;
}

.soldOut {
color: #e34825;
font-size: 14px;
text-transform: uppercase;
}

.outOfStockText {
color: #e34825;
}

.qtyField:disabled {
background-color: #e8e8e8;
}

.optionChosen {
font-style: italic;
color: #999;
font-size: 14px;
}

.updateCart {
/* Link to update quantity */
font-size: 10px;
}

.promoField {
/* Text fields for promo code */
border: 1px solid #ddd;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-size: 13px;
}

/* FORMS
===============================================================*/

.checkout, .checkoutShort, .checkoutShortest, .checkoutBottom, .checkoutTop, .qtyField, .optionsDrop {
/* Form fields used in checkout forms */
border: 1px solid #ddd;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
font-size: 13px;
color: #222;
}

.checkoutDone, .checkoutTopDone, .checkoutBottomDone {
/* Form fields used on confirmation page */
font-size: 13px;
color: #222;
}

.viewCart, .shippingTable, .billingTable, .paymentMethodTable, .shipMethodTable, .payplanTable, .orderSummary {
outline: 1px solid #891abc;
border-collapse: collapse;
background-color: #fff;
}

.viewCart th, .viewCartShort th, .payPlan th, .summaryCart th, .shippingInfo th, .billingInfo th, .billingTable th, .shippingTable th, .paymentInfo th, .signinTable th, .paymentMethodTable th, .shipMethodTable th, .payplanTable th, .orderSummary th {
background-color: #891abc;
color: #fff;
font-size: 15px;
}

.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .shippingInfo td, .billingInfo td, .paymentInfo td, .orderSummary td {
border-top: 1px solid #af84c2;
}

.subtotal {
background-color: #fefaea;
font-weight: bold;
}

.cartDiscount {
/* Discount text */
color: #d44;
}

.paymentDate, .paymentAmount, .financeDate, .financeAmount { /* Shown in payplan pay schedule box */
font-size: 12px;
}

.payplanSummaryHeader { /* Header for payplan pay schedule box */
font-size: 12px;
font-weight: bold;
}

/* UPSELLS
===============================================================*/

#upsellContainer {
overflow: hidden;
}

.upsell {
background-color: #fcfbe9;
border: 1px solid #af84c2;
}

.upsellRegPrice {
font-style: italic;
}

.upsellPrice {
color: #d44;
}

.upsell img {
border: 1px solid #ddd;
}

/* TYPOGRAPHY
===============================================================*/

h1 {
/* Used for product names */
font-size: 16px;
}

h2 {
/* Used for upsell product names */
font-size: 16px;
}

h3 {
/* Used for upsell headline */
font-size: 15px;
font-weight: normal;
color: #6b6f51;
text-transform: uppercase;
}

/* LINKS AND BUTTONS
===============================================================*/

a {
color: #891abc;
}

a:hover {
color: #891abc;
}

.codeButton, .continueButton, .upsellButton {
background-color: #000000;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
font-family: helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px 0 #4f5e65;
color: #fff;
}

.codeButton:hover, .continueButton:hover, .upsellButton:hover {
background-color: #50646E;
text-decoration: none;
font-weight: bold;
color: #fff;
}

.disabledButton {
margin-bottom: 10px;
opacity: 0.5;
}

/* MISC
===============================================================*/

.errorMessage {
color: #d44;
}

@media only screen and (max-width : 960px) {
.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .shippingInfo td, .billingInfo td, .paymentInfo td, .orderSummary td {
border-top: none;
}

.viewCart tr:not(:first-child) {
    border-top: 1px solid #af84c2;
}

}

/* PAYPAL SMARTBUTTONS
===============================================================*/

#payPalButtons {
/* PayPal initial order form page when multiple payment option */
background-color: #ffffff;
}

2

try changing background-color to just background

3

I assume you mean change it here and like this:
body {
font: 13px/1.5 ‘Open Sans’, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Calibri, Verdana, sans-serif;
color: #666666;
background: #af84c2;

Unfortunately, that didn’t work.

Thanks though!

Any other thoughts?

4

Ok, so in this case, your top half (which is actually an image) is getting set ON TOP OF the background color (which is the purple color). It’s set with the following:

url(/resources/styledcart/images/breeze/one-column/order-form/breeze-bgr.jpg?b=1.70.0.240704-hf-202005281822)

So, do a search for that and you can remove it or change it.

5

Awesome, thanks for helping figure this out!

Looks like I just have to create another gradient image to replace that one.