The design of an Actinic Payments page is controlled by two things:
- A set of images
- A style sheet file called 'ekashu.css'
A sample ekashu.css style sheet and associated images are supplied below. Unless you are very skilled with CSS, we strongly recommend that you use these as a basis to start from. This Basic Changes section outlines the basic things you can do to customise the look and feel of your Actinic Payments pages by changing the style sheet and image files.
Once you have prepared your customised images and your style sheet, you must follow the instructions under Uploading Your Changes to upload them to the web.
Basic Changes
- Supply a new background (or remove it altogether); by producing your own image called 'background-gradient.jpg', or by editing the 'body' class in ekashu.css
- Replace the page header image (actinic-payments-logo-banner.jpg) and footer image (footer-background.jpg) with your own versions
- Change the height and style of the page header and footer by changing the relevant classes in the ekashu.css style sheet file (class .ekashu_header and class .ekashu_footer)
- Change the content background by supplying a new background image (mainbackground.gif) and editing the relevant css class (.ekashu_content). You can also change the width of this area to something other than 800px if required
- Change the style of the boxes by changing the background image (gradient.jpg) and class (.ekashu_section) and the box title background image (heading-background.jpg) and class (.ekashu_section_title)
- If you are using any of Actinic's desktop software products, you will also need to replace the heading images for the payment confirmation (payment-successful.jpg) and payment failure page (payment-failed.jpg), and edit their styles (.ekashu_header_success and .ekashu_header_failed) to match any changes you make to .ekashu_header
1. When you have all your new images, and your copy of ekashu.css if you changed it, go to forms.actinic.com, log in and click 'Application Manager'
2. Click the ‘Payments Customisation’ icon for your Actinic Payments account
3. Upload each file in turn by clicking ‘Browse’, finding and selecting it, and clicking the yellow ‘Upload’ button
4. When you have uploaded all the files you want to change, click the yellow ‘Publish Design’ button at the foot of the page. If you are not happy with the result, you can change back to the default Actinic Payments design at any time by clicking ‘Restore Defaults’. NB: even if you have only changed the images, you must still upload the version of ekashu.css supplied with this document
5. Copy the ‘URL to access your customised files’ from the top of the page
6. Log out of Actinic Payments
7. You now need to make one change to the Act_OCCActPayTemplate.html template, which is in the CommonOCC subfolder of your Actinic site folder. You can make this change using Notepad or any other text or HTML editor:
Find the line
<!-- <input type="hidden" name="ekashu_style_sheet" value="https://your.URL/ekashu.css" /> -->
Remove the comment tags <!-- and --> from the beginning and end of the line
Then replace ‘https://your.URL/ekashu.css’ with the customised files URL you copied from the Actinic Payments page, making sure you leave the surrounding double quotes in place, and save the file
If you are using a version of Actinic earlier than v9.0.4, you must also follow steps 8 & 9. Otherwise,
go straight to step 10
8. Save the following two templates from the customisation pack into the same CommonOCC folder, replacing the copies that are already there:
Act_ActPayOK.html
Act_ActPayError.html
9. Open each one in turn and find the line
<link rel="stylesheet" href="https://online.actinicpayments.com/hosted/live/actinic/ekashu.css" />
Replace the URL https://online.actinicpayments.com/hosted/live/actinic/ekashu.css with your customised files URL, and then save the file
10. Open Actinic and Update / Publish to Web
