How to Add a "Post-it Note" to Social Engine

Learning how to embed fonts

In this tutorial we will use Cufón, a JavaScript alternative to siFR , that allows you to render short passages of text in the typeface of your choice. If you are going to use this tutorial on a Commercial site you may want to "Google" some of the legal aspects of using "True Type Fonts" with text replacement flash or javascripts on your web site. In this tutorial I will explain how to implement the font replacement technique on a Social Engine web site, but this technique may be adapted to most types of web sites.

Before preceding with this tutorial, I highly recommend that you back up your Social Engine web site. You will also need to download the most recent version of cufon_yui.js. I have included the version I used in the zipped files at the end of this blog post, but if there is a more recent version I recommend trying the newer version first. Additionally if Yahoo or Microsoft is providing an online version of the JavaScript library, use the online version. The reason for using the online version is that it will on average decrease loading time on your site due to the increased likelihood of it already being cached in the visitors browser.

I have adapted the code and methodology from a Joomla module by jooforge.com . The Post-it font is using "Hand-of-Sean" font. If you would like to use another font you will need to generate the Javascript version using the Cufón translator. Once you have generated the javascript version of your font you will need to add this font to the "include/js/tff" directory of your site.

Step 1

// UPDATE REFERRING URLS TABLE

  update_refurls();

After the above line add:

  
//POST-IT NOTE 

  
/* Variables for post-it note adapted by http://www.epicbaydesigns.com from http://www.jooforge.com/   

  
tex: text to output   

  
bad: attach with "pin" or "tape" */  

  
$tex = "Your text here!"; 

  
$bad = "pin"; 

  
$smarty->assign('postit_txt', $tex); 

  
$smarty->assign('postit_sticky', $bad);

Header_global.tpl (located in the root of your templates directory of your Social Engine Installation)

Find these lines of code:

 {* INLUCDE MAIN STYLESHEET *} 
 
<link rel="stylesheet" href="/./templates/styles_global.css" title="stylesheet" type="text/css" /> 
 
<link rel="stylesheet" href="/./templates/styles.css" title="stylesheet" type="text/css" />

Right after the above lines of code add:

 
{* FOR POST-IT *}
<link rel="stylesheet" href="/./templates/minipostit.css" title="stylesheet" type="text/css" /> 

Find these lines of code:

{* INSTALIZE API *}
< script type="text/javascript" / >

Before the above lines of code add:

{* JavaScript for Postit *}
< script type="text/javascript" src="/./include/js/tff/cufon-yui.js"> </script>
<script type="text/javascript" src="/./include/js/tff/Hand_Of_Sean_400.font.js"></script>

Find these lines of code:

{literal}
< script type="text/javascript">

  // ADD TIP FUNCTION
  window.addEvent('load', function()
  {
    var Tips1 = new Tips($$('.Tips1'));
  });

Insert right after, but BEFORE the closing script tag:

 Cufon.replace('#jf-minipostit .testo', {fontFamily: 'Hand Of Sean'}); 

Footer.tpl (located in the root of your templates directory of your Social Engine Installation)

Find this line of code:

{* END BODY CONTAINER *}

Add this line of code before the above line of code, but after the closing div tag

<script type="text/javascript"< Cufon.now(); > </script>

Step 2

Okay now you need to decide where you want your postit. I will walk through putting it in the left sidebar of the Home page.

To install the postit on the left sidebar of your Home page, Home.php in Social Engine root directory, do the following:
Find this line of code:

{* BEGIN LEFT COLUMN *}
<div class="leftsidebar">

Right after this line of code insert the following:

{* BEGIN LEFT COLUMN *}
{* POST IT NOTE  -START *}
<div class="sticky_note_container" id="jf-minipostit">
<div class="{$postit_sticky}"> </div>
<!-- actually use a post it note here on the page -->
<div class="sticky_note">
<div class="sticky_note_content center">
<!-- content of sticky note here -->
<h1 class="testo">{$postit_txt}</h1>
<!-- end of content of sticky note -->
</div>
</div>
<div class="sticky_note_footer"> </div>
</div>
{* POST IT NOTE - END *}

Step 4

Download the zip file and upload the files to your Social Engine Root. If you have generated another font them the one I am using, add it to the include/js/tff directory. Additionally if you downloaded a later release of cufon_yui.js, replace the version included in the zipped files. However, you may want to save the version of cufon_yui.js that is include in the zipped file in case you run into problems.

If you have any questions or comments please add a comment to this article and I will reply. Enjoy!