Dynamic text replacement

Stewart Rosenberger developed the dynamic text replacement so that web developers could add custom fonts to their websites, without having to manually create GIFs, or embed <img> tags or complicated CSS code in their (X)HTML.

You could use this technique to create dynamic headers with free fonts in CMSimple:

1. Download the script: http://www.stewartspeak.com/projects/dtr/files/dtr.zip

2. Copy the files on the same location as your template and modify the template.htm as this:

<script type="text/javascript" src="<?=$pth['folder']['template']?>replacement.js"></script>

3. Change in replacement.js the lines

replaceSelector("h1","h1.php",true);
replaceSelector("h2","h2.php",true);
var testURL = "test.png";
 
var doNotPrintImages = false;
var printerCSS = "replacement-print.css";
 
var hideFlicker = false;
var hideFlickerCSS = "replacement-screen.css";
var hideFlickerTimeout = 3000

into something like this:

replaceSelector("h1","./templates/mytemplate/h1.php",true);
replaceSelector("h2","./templates/mytemplate/h2.php",true);
var testURL = "./templates/mytemplate/test.png" ;
 
var doNotPrintImages = false;
var printerCSS = "./templates/mytemplate/replacement-print.css";
 
var hideFlicker = false;
var hideFlickerCSS = "./templates/mytemplate/replacement-screen.css";
var hideFlickerTimeout = 3000;

4. Copy the file heading.php.txt to h1.php/h2.php etc. and change in the variables:

$font_file to the path where your font file is located

$cache_images to false (or create a cache folder on your webserver)

That’s all and it should work now for h1 and h2 titles. You could do it for h3 and h4 too. Even different fonts are possible.

A working example could be seen on http://www.braillepost.be where all titles are duplicated and shown in a braille font too.

tips_and_tricks/dynamic_text_replacement.txt · Last modified: 2007/11/26 17:36 by 194.183.246.93