Adding js and css code to the template tpl file

In most cases, the implementation of css and js code is covered by the module "Custom scripts", but if you need to implement the code in the tpl file, you should remember the structure of the "Smarty" template engine, which is used in the system.

To add executable code or style, you need to use the {literal}{/literal} block.

Example of styles:

{literal}
    <style>
        .your-class{display: block;}
    </style>
{/literal}

<p class="your-class">Text text text</p>

JS code example:

{literal}
    <script type="text/javascript">
        function foo(){...}
    </script>
{/literal}

An example of using the php and (css|js) variable space together:

For example, in the tpl area of ​​the template you are editing there is a variable $color="#001133"

{literal}
    <script type="text/javascript">
        // here the closing and opening literal allows to use php variable
        var color = "{/literal}{echo $color}{literal}";
        console.log("Your color" + color);
    </script>

    <style>
        // here the closing and opening literal allows to use php variable
        .your-class{color:{/literal}{echo $color}{literal};}
    </style>
{/literal}