WPbeginner publishes article written by Todd Santoro

todd — Thu, 28 Jan 2010 15:25:15 +0000

WPbeginner is a great resource for WordPress developers and has just published my article on CSS Sprites. Syed Balkhi, the founder of WPBeginner, has graciously allowed me to write an article as a guest author titled Use CSS Sprites to Beautify your WordPress Post Dates.

Have a look at the tutorial and super style your WordPress dates on your posts.

sIFR is how we made our headlines look so smashing

todd — Wed, 16 Dec 2009 16:20:56 +0000

Like the fonts our headlines are in?

We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR or Scalable Inman Flash Replacement. Come on, I’ll show you how to do this in 15 minutes or less.

This is a quick start tutorial and will accomplish two things:

Replacement of your site’s
tags, if you have any
Replacement of a CSS class named “replace-me” which we will create on a page

Things you will need for this tutorial:

A simple text editor (I use Dreamweaver CS3 – you can use anything)
Adobe Flash (I use Flash CS3 Professional)
A font you like (I like to look on daFont.com – they are free:)

Lets get started

Step #1: Download and unzip the latest version of the sIFR project here. This tutorial uses sIFR-2.0.7
Step #2: Fire up Adobe Flash and open sifr.fla (it is in the .zip file you just downloaded in step #1) If your version of Flash will not open up the sifr.fla file (Usually cs4 users) then you can download a compatible version here
Step #3: Double click on the stage.

Step #4: Select the Dynamic Text box on the stage.

Step #5: Change the font to one you like. Don’t worry about the font size as sIFR takes care of that for you. The font color will be defined later on in the implementation process.

Step #6: We are now done with Flash, so save the file as the name of the font you used and publish it (eg: swatch_it.fla). This helps when you have multiple fonts on a page.

Step #7: Open up your text editor and follow along. It is pretty easy to just cut and paste:)

Step #8: Open customize_me.as and change line 14 to your reflect your domain name. You just need your domain name here. It does not matter where you will be using sIFR on your site. Make sure you have one with www. and one without. Then save and close it.

example:

allowedDomains = new Array("*","www.toddsantoro.com","toddsantoro.com");

Step #9: Open up your site’s stylesheet (Hint: its a .css file)

Step #10: Add these lines to your sites stylesheet:

example:

.replace-me { font-size: 18px;  display: none !important; }
h1 { display:none !important; }

.replace-me { font-size: 18px; height:75px; width:250px; padding-left:25px; }
h1 { display:none !important; font-size: 22px; }

The class replace-me will trigger sIFR to replace the text with a Flash movie that has your special font. For those people that do not have flash installed, they will see normal text. By adding attributes to the class you can achieve different results, be creative:) As for the

tag… everywhere a

tag is on your site, sIFR will replace it with a Flash movie.

Step #11: Now we bring everything together. Open up your header.php page if you have one. If not; open up the page you want to have sIFR replace your text on. I usually work with WordPress and it has a header.php file that is included on every page of my site.

Add these lines to the of your page:

<script src="sIFR-2.0.7/sifr.js" type="text/javascript">script>
<script src="sIFR-2.0.7/sifr-addons.js" type="text/javascript">script>

Step #12: Add this line somewhere in the of your page:

<div class="replace-me">This is the text I wanted to replace.  Yippie!div>

Step #13: Open up footer.php if you have one or continue working with the file you were just working with in Step #12. Add these lines just before the ending tag:

<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }script>
 
<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }script>

Be sure to set your font and link colors in the code above. Also make sure your paths to stuff are correct. You can also combine these like this:

<script type="text/JavaScript">if(typeof sIFR == "function"){
 
        sIFR.replaceElement(named({sSelector:"h1,#replace-me", sFlashSrc:"sIFR-2.0.7/swatch_it.swf", sColor:"#4E4C00", sLinkColor:"#4E4C00", sHoverColor:"#4E4C00", sWmode:"transparent"}));
 
  }script>

Notice that I simply added a comma to separate the two CSS elements I wanted to replace. This method would also render the same font colors on both

tags and the replace-me class.

Step #14: You are done! Upload all of your files to your server and check out your work. If you have problems… I would first make sure all of the paths to the sIFR stuff are correct and that you have uploaded all of the sIFR files.

I will try to help troubleshoot if you post your comments below.

Cheers!

ToddSantoro.com Designs» Columbus, Ohio website design ToddSantoro.com Designs