Color and Styles

The Back in Stock registration form appears on the product page overlay (also called  popup or lightbox).

You can customize the styles used in the form by adding custom from the  widget appearance settings page.

Custom styles are applied after the default styles. This means you can choose to only add the styles you want to customize.

To help create your own styles you might like to take a look at  the default form styles.

Tutorial: Setting the button to green

In this example you’ll set the form submit button to green.

Take a look at the default button styles. The background is currently set to  orange.

<code>button {   clear: right;   float: right;   font-size: 1.4em;   background: orange;   border: none;   color: #fafafa;   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);   padding: 7px 10px;   margin-right: 12px;   -moz-border-radius: 5px;   -o-border-radius: 5px;   -webkit-border-radius: 5px;   border-radius: 5px;   -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);   -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);   -o-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }

By adding some custom CSS your new style will be added after the default and override the rule you specify.

Add the following style to the Custom CSS field in  widget appearance.

<code>button {   background: green; }

Hit Save and reload the product page. Your Email when available button should now appear in a deep shade of green. Notice the text is still white as the default styles are still in place.

Any Custom CSS you add in the widget appearance settings are applied only to the Back in Stock registration form. This ensure they don’t cause any conflict with your store theme.

Still need help? Contact Us Contact Us