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

Written by Richi González Sunday, 13 March 2011

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.

6 Comments

1. Ouida Buhler   |  Wednesday, 13 April 2011 at 7:35 pm

   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   |  Saturday, 16 April 2011 at 5:45 pm

   Hi,

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

   Regards,
   Richi

   
3. คลิปฟุตบอล   |  Friday, 26 August 2011 at 4:50 am

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

   
4. Prashant   |  Tuesday, 31 July 2012 at 7:27 pm

   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. Richi González   |  Tuesday, 31 July 2012 at 11:05 pm

   Hello,

   What errors are you getting?

   –Richi

   
6. immigration to south africa south african citizenship   |  Saturday, 06 October 2012 at 9:46 am

   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..!