Found what you have been looking for?

Search
Generic filters
Exact matches only
Filter by Categories
Customization
Domains
Lightroom Plugin
Tools and Tips

Make the standard SmugMug contact form white

SmugMug provides loads of powerful and easy to use tools to customise your site.  But there is one part of the site that cannot be customised using standard tools – it is the built-in Contact Form.

No matter if your site is light or dark – the contact form will always be dark.  Today I will show you how to make your contact form look like this:

I have seen few tutorials about this – but most of them affected parts of the SmugMug admin panel – which made your site look messy.  This tutorial will only affect the contact form.

CSS code

/* ===Making SmugMug Standard Contact form white - tutorial from https://www.portal.photom.me=== */

/* Background mask - color change */
.sm-user-ui .yui3-widget-mask,
.sm-user-ui .sm-overlay-container .yui3-widget-mask {
    background-color: #f7f7f7;
}

/* Changing the title color */
.sm-user-ui .sm-panel.sm-panel-contact h1 {
    color: #000;
}

/* Changing contact form background color */
.sm-user-ui .sm-panel-contact .sm-procontact-overlay {
    background-color: #fff;
}

.sm-user-ui .sm-panel-contact .sm-panel-content {
    background-color: #ffffff;
}

/* Changing form fields */
.sm-user-ui .sm-panel-contact .sm-form-field-text-input, 
.sm-user-ui .sm-panel-contact .sm-form-field-textarea {
    color: #2b2b2b;
    background-color: #ffffff;
    border-color: #34363a;
}

.sm-user-ui .sm-panel-contact .sm-form-field:focus, 
.sm-user-ui .sm-panel-contact .sm-form-field-textarea:focus {
    background-color: #eaeaea;
    border-color: #3c3e43;
}

/* Modifying buttons */
.sm-user-ui .sm-panel-contact .sm-button-skin-default, 
.sm-user-ui .sm-panel-contact .sm-button-skin-submit {
    color: #1b1b1b;
    border-color: #34363a;
    background-color: #ffffff;
}

.sm-user-ui .sm-panel-contact .sm-button-skin-default:hover, 
.sm-user-ui .sm-panel-contact .sm-button-skin-submit:hover {
    color: #3a3a3a;
    border-color: #34363a;
    background-color: #eaeaea;
}

.sm-panel-contact .sm-button-group .sm-button-skin-default {
    background-color: white !important;
    color: black !important;
    border: solid #3c3e43 1px !important;
}

.sm-panel-contact .sm-button-group .sm-button-skin-accent {
    background-color: white !important;
    color: black !important;
    border: solid #3c3e43 1px !important;
}

Where to add the code?  You will need to add it to the CSS section of the THEME that you are currently using.

You then need to open your site → click CUSTOMIZE → CONTENT AND DESIGN → select the THEME tab → hover your cursor over the active theme that you are using and click the wrench icon → this will open a small popup window – like this one:

Open the ADVANCED tab and scroll down until you see an option to add CUSTOM CSS → click the EDIT button and then add the above code to it.

colour, contact form, form, white contact form


Tomasz Nowicki

My name is Tomasz Nowicki and I am a PHOTOGRAPHER and WEB DESIGNER based in the UK. Few years ago I have created my first website using SmugMug - a powerful platform for any type of photographer. I fell in love with it and from day one I have started exploring the possibilities of customizing my website. PHOTOM Portal is a my personal SmugMug knowledge base website where you can find some tips and tricks on how to use and get the most out of your SmugMug website.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.