[HOW-TO] Insert JavaScript and CSS code in a Smarty template engine powered website


I know there are a lot of people that wonder how to insert a piece of JavaScript script found on the internet or maybe a little cool CSS effect in their Smarty powered website. This guide works with Clip-Bucket, as it uses Smarty template engine.

Difficulty level: Easy

1. Find some JS or CSS code you would like to insert and copy it. For this guide we will use a very basic CSS code:

<style type="text/css">
    background-color: #FFFFFF;

2. Open the file where you want to have it and paste it.

3. At the very start of the code you pasted, add the {literal} tag, and at the end, add the closing {/literal} tag.

4. Your code should now look like this:

<style type="text/css">
    background-color: #FFFFFF;

That’s it! To add JS code, add the tags at the start and at the end just like you did with the previous CSS example!

I hope this helps somebody. Anything you need, do not hesitate to contact me! =)

Best Regards,


Looking for quality ClipBucket hosting? Try out Arvixe and you won’t be disappointed.

Tags: , , , , , , , , , , , , , | Posted under ClipBucket | RSS 2.0

Author Spotlight

Richi González

Richi González

I started programming when I was 12. I'm a Developer and have been working with the Clip-Bucket script since it came out. I'm the Liaison between Arvixe and Clip-Bucket, so anything you need regarding Clip-Bucket or any particular computer-related subject you need, let me know so I can assist you.

6 Comments on [HOW-TO] Insert JavaScript and CSS code in a Smarty template engine powered website

  1. Ouida Buhler says:

    Do you people have a fb fan web page? I looked for one on twitter however could not uncover one, I would like to develop into a fan!

  2. Richi Glez says:


    You can also follow Arvixe in Twitter: twitter.com/arvixe, or me: twitter.com/juapo2services


  3. It’s great fun for me, I’d appreciate a lot to me.

  4. Prashant says:

    Hi Richi,
    i am struggling toconvert following html code to tpl …would you help me please.

    function initialize()
    var latlng = new google.maps.LatLng(9.931544168615512,76.27632894178791);
    var opt =
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
    mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    var map = new google.maps.Map(document.getElementById(“map”),opt);
    var marker= new google.maps.Marker({
    position: new google.maps.LatLng(9.931544168615512,76.27632894178791),
    title: “CodeGlobe”,
    clickable: true,
    map: map

    var infiwindow = new google.maps.InfoWindow(
    content: ” I am here! ”



    function test(event)

    alert( event.latLng.lat());




  5. Hey
    Your opinions [HOW-TO] Insert JavaScript or CSS code in a Smarty template engine | Arvixe Blog is helpful and also well
    considered, I should return to view new article content..!

Leave a Reply

Your email address will not be published. Required fields are marked *

× 3 = 15

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>