How to create a custom theme

Themes give you control over the appearance of your checkout forms.  This will help them fit your organisation's branding.

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 support@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: As of March all Payment Forms will require the "Modern" checkout form option, you will need to go to Jquery Mobile https://themeroller.jquerymobile.com
Salesforce will no longer support Payments2Us Classic Payment Forms.

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 "Modern" forms with Payments 6.0+, navigate to https://themeroller.jquerymobile.com

Navigate to http://jqueryui.com/themeroller/

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

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.

This folder may contain additional files in addition to the three shown above.

3.2. Rename files

Your folder will probably contain these files:

  • An "images" folder
  • ThemeName.min.css
  • ThemeName.css
  • jquery.mobile.icons.min.css

Where "ThemeName" is the name you entered on the download page in ThemeRoller.

 

Rename the "ThemeName.css" file to "jquery-ui.custom.css"

Rename the "ThemeName.min.css" to "jquery-ui.custom.min.css"

These file names must be exact.

 

3.3. Select these 3 files and the images folder

3.4. 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
Navigate to the Merchant Facilities tab and scroll to 'User Interface'

4.5. Change Theme to 'Custom Theme'

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 Swatches are not 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

6. Adding custom fonts to your theme

The below section is added to assist you.  Premium Support is required to be purchased and time needs to be booked in for any assistance.  Our standard support does NOT cover adding custom fonts.

6.1. Download your font

Download your True Type Font (.ttf) or Open font format (.oft) file

6.2. Upload fonts to Webfont Generator

Upload your font (.ttf or .oft) file to Webfont Generator.  Then download the generated files.

6.3. Upload the files to Salesforce static resource

zip the generate files together into a single file.

The navigate to setup (cog in the top right) - Quick find "Static Resources" and then click into the menu item

Press New

  • Enter a name (Note this name as you'll need it for later)
  • Make sure the Cache Control is set to public
  • Select the zipped file and upload

6.4. Locate your Site's Base URL

Navigate to the Merchant Facility Tab.  Click into the primary active merchant facility and copy Base Site URL.  You'll need this for use later in this procedure.

6.5. Reference the font in your stylesheet

Start with the style.css file that was generated by Upload fonts to Webfont Generator step.

for the URL, enter the {base site url}/resource/{static resource name}

  1. Site Base URL as copied in step: Locate your Sites Base URL
  2. Is always the text "resource"
  3. Static Resource Name as created in step: Upload the files to Salesforce static resource

You can now reference the font in you css.