How Can We Help?
Creating a new page using the responsive-banking.cfm template
Creating a new page using the responsive-banking.cfm template (i.e. the “digital” pages), how to add a CSS rule for the mobile images.
Upload the new image
- The image needs to be 480x150px
- The image needs to be loaded to this folder:
- /en/includes/themes/FHB-New/images/
Page ID is created
When a new responsive-banking.cfm template page is created (called banking-services in the code), it’s given a page ID, i.e. online-banking.


Where the ID and image are referenced
You’ll see that this ID gets referenced in custom-fhb.css; the uploaded image is referenced as the background image.

Edit custom-fhb.css
- Edit the custom-fhb.css file under includes > themes > FHB-new > css > core
- Locate an existing CSS rule (will be around line 3185 or so – see screenshot below) and paste it below it

- Change the first part, the page ID, so it is the same as the page that was created in step 2
- Change the name of the background jpg to the name of the image loaded in step 1
- Depending on the copy that is on the page, the margin-top style of the background image may need to be adjusted accordingly.
- Save the CSS file, refresh the new page, and you should see the new CSS rule appear – see screenshot.
