How Can We Help?

Creating a new page using the responsive-banking.cfm template

You are here:
← All Topics

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.
Tags:
Table of Contents