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.
Related articles
Support me
I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.
Leave a Reply