Forums

Hi
Is possible to use chronoforms with a external css files?
Thank you

I use an external javascript file and CSS file by putting this PHP at the top of each page (in the Form HTML box of the Form Code tab for each form):

<?php
global $mainframe;
  $doc = JFactory::getDocument();
  if ($mainframe->isSite())
  $doc->addScript('http://127.0.0.1/custom/js/working.js', 'text/javascript');
  $doc->addStyleSheet('http://127.0.0.1/components/com_chronocontact/css/alternate.css');
?>

Replace 'http://127.0.0.1/custom/js/working.js' and 'http://127.0.0.1/components/com_chronocontact/css/alternate.css' with the full paths to your files in place of what I have there.

Justin

Thank you Justin

No problem.

J

Here's another tip for those interested.

If you want to use a custom css (or several) throughout your site, you can modify your template files to do so. This is useful if you want your regular pages/ articles to use the same styles as the forms, and to be able to modify them all in one place.

Here's how to do it on a Beez-based template (replace 'custom.css' with your file's name):
NOTE: This replaces the code above, which inserts the link to an external css only into the forms

1. Create your custom css file (say custom.css) and save it in the /css directory of your template. This will probably be /templates/{template_name}/css

2. You will need to edit template files only; no need for any database work

3. Edit templateDetails.xml to include your custom css file(s) - this allows you to edit it from within the Joomla maintenance page. The format is <filename>css/custom.css</filename>

4. Edit index.php in your templates main directory to add your custom.css to those inserted in each page. Just copy one of the lines and change copied line to your custom.css. For the file 'custom.css' looks like this:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo  $this->template;?>/css/custom.css" type="text/css" />

5. Don't forget to upload your custom.css file(s) to the /css directory!

You can now see the custom.css file in the Edit CSS tab of your template (go to Template Manager|{your_template_name}|Edit css).

Your custom.css styles will now be available throughout your site.