How do I change the background color of the 'Contact Us' header in the 'Customized Website Contact Form' template?

  • Profile Image
    Asked on January 22, 2014 at 09:12 PM

    How do you change background color in the "Contact Us" text box at top of my contact us form? It always shows as green with small white envelopes on the right side.

    Thank you

    This is a re-post of a comment on How to Create Your First Web Form

  • Profile Image
    Answered on January 22, 2014 at 11:30 PM

    That green is actually an image, not just a color. The second declaration (highlighted here) of the third rule of the injected CSS of the template to which you're referring contains the image's URL. If you go there in Chrome you'll see the image in the top left corner (in Firefox, it will appear in the center). If you zoom in [Ctrl + Num+], you may notice that it has a subtle gradient. That's why it looks better than the plain background color (#57A700) that it covers. (The background color is there just as a fallback, in case the browser fails to load the image.)

    So, the solution would be to either hide that image and change the background color to suit (along with the border which is defined in the fifth declaration of the same rule to which I earlier referred) or replace the image with another by using a different URL. Note that I said "that" image because there's still the envelope to consider. The envelope's URL can be seen in the last declaration of the fourth rule. You'll notice that the envelope has a green shadow. This means that if you change the background color (or image) of the header, the envelope won't look right. You would either have to replace it with another image or just hide it.

    If you wish to replace the background image, please do the following:

    1. Use your favorite image editor to create an image of the same dimensions (1px wide by 57px high) and save it

    2. Upload it to an image repository (you may use ours if you wish) and replace the current URL in the third rule with that of your image

    If you would rather just use a background color, change the second and fifth declarations of the third rule, omitting everything but the color in the second declaration. For instance, to have just a plain red backgound, change the rule to this

    If you wish to replace the envelope with another image, create one of similar dimensions (32px wide by 34px high), upload it and replace the URL in the backgound declaration of the fourth rule

    If you just wish to hide the envelope, remove the entire background declaration of the same rule

    So, let's say you just wanted a red background color with no images, your injected CSS would be like that used in this form. (Here's the CSS.)

    If you need clarification on anything, please let us know.