Spit Shine Legacy Web Pages

Injecting CSS

This should work in any of the types of web pages generated by Legacy. It can be as easy as pasting the snippet below and adding a file named site.css, or further customized as needed. The code snippet provides the ability to dynamically inject both JavaScript and Style Sheets into the Legacy generated web pages by making use of the getScript and getStyle methods respectively. Notice that the jQuery JavaScript library and a Style Sheet named site.css are specifically being injected. Mimic these calls to inject additional files, or edit the name site if you prefer. Again, if you'd rather not touch code, simply include a text file called 'site.css' in the root directory of your Legacy generated web pages, and add your custom rules (see example at the bottom).

To Use:

• Copy the Injection Script and paste into the header section of the Legacy 'Links' tab.
• Edit the code if so desired
• Create a site.css file, and include it with your other generated web pages
• Add style rules to your file
• Test on your favorite, or various browsers

Good to Know:

• Legacy's generated HTML is horrible. For starters it is not even syntactically correct, and it goes downhill from there. It is not semantic, no style class markers, and no external style sheet for the site.
• IE, even version 8, is particular in the css rules it will render correctly. Much of this is due to the incorrect markup generated
• Tested on Chrome, FireFox, and IE8

Injection Script

<script type="text/javascript">
function getScript(url,success){
    var done = false, head = document.getElementsByTagName('head')[0], script = document.createElement('script');
    script.src = url;
    script.onload = script.onreadystatechange = function(){
        if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
             done = true;
             if(success != null) success();
        }
    };
    head.appendChild(script);
}
function getStyle(url){
    var head = document.getElementsByTagName('head')[0], link = document.createElement('link');
    link.href = url; link.rel = 'stylesheet'; link.type = 'text/css';
    head.appendChild(link);
}
function inject() {
    // *** Injection code goes here  ***
    getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js', null);
    getStyle('site.css'); 
};
setTimeout('inject()', 0);
</script>

site.css
These example rules will cause the source text of Pedigree type pages to be red and sized smaller than the facts, which are set to green.

/*** Facts ***/
body div p {
    font-size: 14px;
    color: green;
}

/*** Sources ***/
body p {
    font-size: 12px;
    color: red;
}