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

Hello,

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">
    float:right;
    background-color: #FFFFFF;
</style>

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:

{literal}
<style type="text/css">
    float:right;
    background-color: #FFFFFF;
</style>
{/literal}

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,

Richi

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 González Richi Glez says:

    Hi,

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

    Regards,
    Richi

  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 =
    {
    center:latlng,
    zoom:10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableAutoPan:false,
    navigationControl:true,
    navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
    mapTypeControl:true,
    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! ”

    });

    google.maps.event.addListener(marker,’mouseover’,function(){
    infiwindow.open(map,marker);
    });
    google.maps.event.addListener(marker,’mouseout’,function(){
    infiwindow.close(map,marker);
    });

    }
    function test(event)
    {

    alert( event.latLng.lat());
    alert(event.latLng.lng());

    }

    #map{
    width:500px;
    height:500px;
    float:left;
    position:absolute;
    left:300px;
    top:200px;

    }

  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 *


7 × = 49

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=""> <strike> <strong>