Smarty is one of the most popular template eingines in the PHP world. In Bigace 2.x it was the default template engine, as in Bigace 3 it is available as extension.

Here are some articles related to Smarty, which were originally written for Bigace 2.x:

• Smarty Templates - create a design, Step-by-Step
• Smarty Tags - for templates customization & dynamic data
• TAGs in page content - for these special situations…
• Smarty external - using templates in your applications
• "Previous page" & "Next page" - create these links using Smarty TAGs

To load resuorces like images and CSS files in your template, you need the {directory} TAG:

<link rel="stylesheet" type="text/css" href="{directory}styles.css" />
<script type="text/javascript" src="{directory}script.js"></script>

The {directory} returns the path to your communities web directory.

If you created your template using a extension, you might be using a subfolder. Make sure to append it in this case:

<link rel="stylesheet" type="text/css" href="{directory}mytheme/styles.css" />
<script type="text/javascript" src="{directory}mytheme/script.js"></script>

Smarty uses the {} brackets as identifier for template tags. You will notice that using inline CSS or Javascript like …

<style type="text/css">
* {margin:0px; padding:0px;}
body { background-color: #eeeeee; }
</style>
<script type="text/javascript">
function sayHello(name) {
   alert("Hello "+name);
}
sayHello("World");
</script>

… will result in something like …

<style type="text/css">
* body </style>
<script type="text/javascript">
function sayHello(name) sayHello("World");
</script>

… which is definitely not what you wanted. Smarty tries to interpret everything between an open { and a closing } bracket as tag, strips it out and dumps an error in the bigace log if couldn't handle it.

Now the solution is to tell the template engine that it shouldn't parse parts of the template by using the {literal} tag:

{literal}
<style type="text/css">
* {margin:0px; padding:0px;}
body { background-color: #eeeeee; }
</style>
<script type="text/javascript">
function sayHello(name) {
   alert("Hello "+name);
}
sayHello("World");
{/literal}
</script>

Now Smarty nows, that it should leave everything between {literal} and {/literal} untouched.

Please read the about delimiter and the literal tag in the official documentation.

Smarty documentation