Create color style based on default styles

Smart AJAX Subscribe comes with 20 styles to choose from and those styles are based on 3 basic layouts (with one extra plain and one ‘unstyled’ style). To add extra styles based on existing ones and with different colors, you can simply follow this tutorial.

Some basic coding knowledge is required to follow this tutorial. Modifications will be added to active theme, but you can add styles and code differently. For the tutorial purpose, active theme will be used. It is not recommended to add custom style in plugin files, when you update plugin, you will loose your customization when files are overwritten.

Plugin default styles are located in file render.css. Plugin has 2 files with this name, one is in css/src folder and it has source styles. File render.css in css folder, is the same but compressed for small size. For this tutorial we will use file css/src/render.css as a source for styles to modify. We will start by modifying and duplicating Inline Red style to create new style we are going to call Inline Teal.

Step 1: Get styles for inline red

This style is described by CSS classes ‘sas-style-inline sas-inline-red’. In source file, we will find all styles for these classes, and that is this:

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-red {
    border: 1px solid #CD1E18;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-red h3.sas-form-title {
    background: #CD1E18;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-red .sas-form-field {
    background: #FFFFFF;
    border: 1px solid #BBBBBB;
    color: #333333;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-red .sas-form-field:focus {
    border-color: #991510;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-red .sas-form-field-submit {
    border: 1px solid #991510;
    color: #ffffff !important;
    background: #CD1E18;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-red .sas-form-field-submit:hover {
    background: #991510;
}

Step 2: Changing style name

Simply, replace ‘sas-inline-red’ with ‘sas-inline-teal’.

Step 3: Changing colors

Now we need to replace colors used by red style with teal colors. In this case, we are replacing #CD1E18 with #008080 and #991510 with #004748. After that is done, final CSS styling will be:

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-teal {
    border: 1px solid #008080;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-teal h3.sas-form-title {
    background: #008080;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-teal .sas-form-field {
    background: #FFFFFF;
    border: 1px solid #BBBBBB;
    color: #333333;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-teal .sas-form-field:focus {
    border-color: #004748;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-teal .sas-form-field-submit {
    border: 1px solid #004748;
    color: #ffffff !important;
    background: #008080;
}

.smart-ajax-subscribe-form.sas-style-inline.sas-inline-teal .sas-form-field-submit:hover {
    background: #004748;
}

Step 4: Adding CSS to your theme

Now, add this custom CSS into your theme style.css file.

Step 5: Let plugin now about new style

Now, we need to let plugin know that we have new style. To do this, we need to use a bit of PHP, and this custom PHP needs to go into functions.php in your theme.

add_filter('sas_form_styles', 'my_sas_styles');
function my_sas_styles($list) {
  $list['sas-style-inline sas-inline-teal'] = array('title' => 'Inline: Teal');
  return $list;
}

First line attaches function to the plugins styles filter. Line 2 to 5 define this function. On line 3 we define new style using similar approach as plugin does. Line 4 returns modified list of styles.

Step 6: Using new color style

Open plugin, and you will see new style in the list, and you can select and use it as all other styles. If you change your theme, you need to also copy CSS and PHP code into new theme.

Image on the right shows example of the new color style.