11 June 2012

Adding Style, Form & Function to Legacy Web Pages



Last updated: 22 Jun 2012

The Goal

The following EASY instructions provide a way to add some customization to Legacy generated web pages by linking in some JavaScript and CSS files. If you are interested in the technical details, the industry standard jQuery library is linked in along with a custom StyleSheet and JavaScript pair of files that tweak the pages, and provide a foundation for future customization.

Customizations Include:
  • Adding Captions to Images
  • Adjust font settings
  • Add class attributes for custom styling


Laying the Foundation

When generating updated web pages, Legacy prompts to remove all previous files from the web page location. I want to preserve the ability to delete the previous web page files without losing the custom files used to add our customizations. To do that:
  • Determine the location of your web pages. c:\legacy\web\testdata for me.
  • Create a new sibling of this folder called jc1779, so in my case I now have
    c:\legacy\web\testdata &
    c:\legacy\web\jc1779
  • Download these files into the new jc1779 folder:
    jc1779.js
    site.css
  • Link these files into your web pages by copying the code below and pasting it into the "custom HTML in the <HEAD> section of each page" area of the Misc. tab in the Legacy web page generation settings.
     
    
    
    
     
    
That's it. With this foundation in place, future customization need only be made in the jc1779.js and site.css files.