How to create a custom theme

In addition to the standard themes that are available, you can define our own custom theme.  This is available as an additional license option.  Please contact info@aakonsult.com for more info.

Please note, Payments2Us is currently compatible with jquery themes 1.9.2. This may change as new releases of Payments2Us comes out or JQuery updates their themeroller.  Payments2Us does not warrant forward/backward compatibility, so please check new themes out thoroughly before deploying.

Please note: If you have Payments2Us 6.0  or above with the "Modern" checkout form option, you will need to go to Jquery Mobile https://themeroller.jquerymobile.com
For older versions of Payments2Us or "Classic" form, go to Jquery UI
http://jqueryui.com/themeroller/

For organisations using Stripe Payment Gateway, the background colour for the Credit Card entry is set to the same background colour of the first visible input field.  You may need to manually edit your CSS to update the background colour.

1. Activate Custom Themes

1.2. Select 'Custom Themes' from available additional licenses.

1.3. Enter 'License Expiry Date' and 'License Key' to activate

2. Create a custom theme

When using the "Classic" forms, or versions prior to Payments2us 6.0, navigate to http://jqueryui.com/themeroller/    

When using the "Modern" forms with Payments 6.0+, navigate to https://themeroller.jquerymobile.com

2.2. Design your theme

Design your theme

Themes can be configured to suit your organisation's style

2.3. Download your theme

Download your theme

Step through the Download Builder

2.4. Save the theme to your hard drive

3. Prepare file for loading

Before starting this section, we recommend that you have the option to see file extensions turned on and that these steps are carried out on a PC.

To turn on file extensions to be shown, open windows file explorer - then click on the view menu option, then options - change folder and search options.  Then click on the View Tab and untick the option "Hide Extensions for known file types".

3.1. Unzip and open folder

Unzip and open folder

Navigate through the unzipped folder structure until you come across a folder with images and the css.  for example jquery-ui-1.9.2.custom\css\custom-theme

3.2. Select the file containing the name "jquery-ui-......custom.css" , without .min.css in the file name

Select the file containing the name "jquery-ui-......custom.css"

3.3. Rename the file to 'jquery-ui.custom.css'. It is the same regardless of if the theme was built in the UI or Mobile version of Jquery

Rename the file to 'jquery-ui.custom.css'

The name must be exact

3.4. Select the "jquery-ui.custom.css", the .min.css file and images folder

3.5. Zip these files together

Zip these files together

4. Load the new zipped custom theme into Salesforce

Navigate to  Setup > Develop > Static Resources

4.2. Select 'New'

Select 'New'

4.3. Enter details for the Custom Theme and 'Save'

Enter details for the Custom Theme and 'Save'
  1. Provide a name for the theme (no spaces)
  2. Upload the zipped file (that you created) from the folder
  3. Set Cache Control to 'Public'
  4. Save

4.5. Change Theme to 'Custom Theme'

4.6. Enter your new Custom Theme name

Enter your new Custom Theme name

4.7. Save

4.8. If not Swatches are showing

If no swatches are available, edit the field dependencies list for the themes by going into Setup>Create>Objects>Merchant facility. Click edit on the 'Theme' field, scroll down to the field dependencies section, click edit on 'Swatches'. Select A-Z under custom themes, click save.  

5. Test custom theme

Navigate to 'About Payments2Us' tab and select a web form

5.2. View your new custom theme

View your new custom theme