How to
all the basics for a kickstart
Here's a simple guide to quickstart with CFE. It covers basic input replacement in 3 easy steps.
Download CFE
Pick the right package according to the framework you want to use on the download page.
Include the CSS and Javascript files
Include the css in the <head>-section
(you might have to change the path according to your directory structure):<!-- cfe css --> <link rel="stylesheet" type="text/css" href="css/cfe.css" />Add the javascript files right before the (closing) </body>-tag, so your visitor will see the layout fast.
It is recommended to use the library file (cfe.js; uncompressed for debugging) or the compressed file (cfe-min.js; for production env) provided in the CFE download package (you might have to change the path according to your directory structure):
<!-- cfe --> <script type="text/javascript" src="js/cfe/cfe-min.js"></script>Feel free to create your own compressed version of cfe with the modules you like or add the javascript files uncompressed one by one to your site. If you do so, please mind the dependencies.
Tip: If you want to further decrease the bandwith usage of cfe, GZip the compressed file before serving
Setup CFE
To initialize cfe and let the magic happen, you might just use this simple code:
window.addEvent('domready', function(){ /* path to a 1x1 pixel transparent gif */ cfe.spacer = "gfx/spacer.gif"; /* create a cfe replacement instance */ var myCfe = new cfe.replace(); /* now you may set options [see cfe.autostart.sample for details] */ /* initialize cfe */ myCfe.init(); });For more options, refer to the cfe.autostart.sample.js and/or read the docs.