EIGHTEEN cool mods for ISC
Posted: Tue Jun 29, 2010 1:54 am
This mod will change the fonts used as headers on ISC to a set that will be in keeping with your site.. The current option being the systems just do not work for me, so I used the following mod..
I started with a trip to here -- http://www.1001freefonts.com/ and selected the font I wanted to use.
I then took the font to cufon located here -- http://cufon.shoqolate.com/generate/
From here I converted the font from system useable to a portable format, and saved this along side a .JS given by Cufon in the ISC folder /javascript
I then located what I think is the core script of the ISC -- _master/panels/HTMLHead.html.
Made a script mod (shown in blue)
//-- placing the script under this line -- //
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js?%%GLOBAL_JSCacheToken%%"></script>
Now in theory, what should happen is all site references to text between <h2> xxx </h2> would display the font of choice. The problem however, is a small delay IE creates as the page reloads the changes on subsequent pages after the front. So we need to deal with this..
Locate the Footer.html script -- template/your site theme/panels
At the base of this script you add -- <script type="text/javascript"> Cufon.now(); </script>
This places the line inside a </DIV> when used which is not a problem. But importantly it is above the </body> tag.. Now every page change the font change/ delay is virtually invisible..
This example asumes h2 text being altered. You can extend this to include h1, h3 etc.
And then adding size and colour control via your sites CSS -
Below shows by example this mod in action, but you may have to make a few tweeks in the style sheet or around the Cufon code (refer site for guide) to resolve font sizes and colour once changed through this method.. Otherwise enjoy !!

I started with a trip to here -- http://www.1001freefonts.com/ and selected the font I wanted to use.
I then took the font to cufon located here -- http://cufon.shoqolate.com/generate/
From here I converted the font from system useable to a portable format, and saved this along side a .JS given by Cufon in the ISC folder /javascript
I then located what I think is the core script of the ISC -- _master/panels/HTMLHead.html.
Made a script mod (shown in blue)
//-- placing the script under this line -- //
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js?%%GLOBAL_JSCacheToken%%"></script>
Code: Select all
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/cufon-yui.js"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/yourfontconverted.js"></script>
<script type="text/javascript">
Cufon.replace('h2');
</script>]
Locate the Footer.html script -- template/your site theme/panels
At the base of this script you add -- <script type="text/javascript"> Cufon.now(); </script>
This places the line inside a </DIV> when used which is not a problem. But importantly it is above the </body> tag.. Now every page change the font change/ delay is virtually invisible..
This example asumes h2 text being altered. You can extend this to include h1, h3 etc.
Code: Select all
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('h3');
</script>
Code: Select all
h1 {
font-size: 30px;
color: #d92850;
}
h2 {
font-size: 20px;
color: #d92850;
}
h3 {
font-size: 20px;
color: #d92850;
}
