Contact form color change

brandofamily

Anyone figure out how to change the background colors on the contact form? With a black background selected the form gets lost in the background.

brandofamily

A border or page color change would maybe work too.

brandofamily

Anybody?

AceCo55

Not sure it will help ... but I saw this customistion

http://www.dgrin.com/showthread.php?t=240090&page=2

See post #32

denisegoldberg

AceCo55 wrote: »

Not sure it will help ... but I saw this customistion

http://www.dgrin.com/showthread.php?t=240090&page=2

See post #32

That helps a lot (given that my site has a light background), thanks!

--- Denise

brandofamily

Got it thanks... I would still like to change the colors within the form itself...

[Deleted User]

The user and all related content has been deleted.

brandofamily

ShutterSpy wrote: »

Are you referring to the standard contact form, or the one you have on your website specifically?

Sorry. The standard form. I'm working on something for someone else. It's not unveiled yet.
Mine is WuFoo...

[Deleted User]

The user and all related content has been deleted.

brandofamily

ShutterSpy wrote: »

Here you go. Everything I have figured out thus far:

Background Mask Color & Opacity (the part that fades the main page out)

.sm-nui .yui3-widget-mask, .sm-nui .yui3-overlay-mask {
    background-color: #1c1d1f;
}
.yui3-widget-mask, .yui3-overlay-mask {
    -ms-filter: "alpha(opacity=90)";
    filter: alpha(opacity=95);
    opacity: .95;
}

Box Shadow Color & Opacity

.sm-nui .sm-panel-content, .sm-nui .sm-panel-shadow {
    -moz-box-shadow: 0 0 12px 4px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 0 12px 4px rgba(0,0,0,.12);
    box-shadow: 0 0 12px 4px rgba(0,0,0,.12);
}

Box Background & Border Color

.sm-nui .sm-panel-content, .sm-nui .sm-panel-flat {
    background-color: #242528;
    border-color: #2c2e31;
}

Field Labels Font Color

.sm-nui .sm-label {
    color: #989ba2;
}

Input Box Font, Background and Border Colors

.sm-nui .sm-form-field-text-input, .sm-nui .sm-form-field-textarea {
    color: #ffffff;
    background-color: #242528;
    border-color: #34363a;
}

Cancel and Submit Button Colors

.sm-nui .sm-button-skin-default, .sm-nui a.sm-button-skin-default, .sm-nui a.sm-button-skin-default:visited {
    color: #989ba2;
    border-color: #34363a;
    background-color: #242528;
}


.sm-nui .sm-button-skin-submit, .sm-nui a.sm-button-skin-submit, .sm-nui a.sm-button-skin-submit:visited {
    color: #cdcfd2;
    border-color: #3c3e43;
    background-color: #34363a;
}

To control the hover colors for buttons, simply duplicate the button sections with the :hover suffix.

To control the clicked/focus colors for text boxes, duplicate the Input Box section with the :focus suffix.

Hope this helps!

Thanks for the work. You do know this changes every "form" on the site correct?
Any way to just affect the contact form or no?

[Deleted User]

The user and all related content has been deleted.

brandofamily

ShutterSpy wrote: »

I believe that it will affect all SMUGMUG forms on the site, but am not sure as I don't have any other forms to test on.

I've found classes .sm-contact-pro-form and .sm-procontact-overlay but they don't seem to have all the necessary properties to modify the entire contact form correctly...

Any other box that you "fill in" or "type in" is technically a form I think. The code makes somethings very hard to work with. I'll tweak and see what I come up with. Thanks again.