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: Dynamic text replacement

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("h2","heading.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.

An other nice method to dynamically replace html text using any custom font and without javascript could be http://code.google.com/p/pcdtr/ .

And since some days we have the Google Font API wich could be used for this purposes too: http://code.google.com/apis/webfonts/

tips_and_tricks/dynamic_text_replacement.txt · Last modified: 2018/04/05 14:48 (external edit)
Webdesign: NMuD chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0