{"id":630,"date":"2009-12-16T11:20:56","date_gmt":"2009-12-16T16:20:56","guid":{"rendered":"https:\/\/toddsantoro.com\/wordpress\/?p=630"},"modified":"2009-12-16T11:20:56","modified_gmt":"2009-12-16T16:20:56","slug":"sifr-is-how-we-made-our-headlines-look-so-smashing","status":"publish","type":"post","link":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/","title":{"rendered":"sIFR is how we made our headlines look so smashing"},"content":{"rendered":"<h3>Like the fonts our headlines are in?<\/h3>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-808 alignnone\" title=\"headlines_using_sifr\" src=\"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/headlines_using_sifr.jpg\" alt=\"headlines_using_sifr\" width=\"506\" height=\"146\" \/><\/p>\n<p>We accomplished this with a small piece of <a href=\"http:\/\/www.mikeindustries.com\/sifr\">opensource JavaScript and Adobe Flash software called sIFR<\/a> or <a href=\"http:\/\/en.wikipedia.org\/wiki\/Scalable_Inman_Flash_Replacement\">Scalable Inman Flash Replacement<\/a>. Come on, I&#8217;ll show you how to do this in 15 minutes or less.<\/p>\n<h3><em><span style=\"font-style: normal;\">This is a quick start tutorial and will accomplish two things:<\/span><\/em><\/h3>\n<ul>\n<li>Replacement of your site&#8217;s &lt;h1&gt; tags, if you have any<\/li>\n<li>Replacement of a CSS class named &#8220;replace-me&#8221; which we will create on a page<\/li>\n<\/ul>\n<h3>Things you will need for this tutorial:<\/h3>\n<ul>\n<li>A simple text editor (I use Dreamweaver CS3 &#8211; you can use anything)<\/li>\n<li>Adobe Flash (I use Flash CS3 Professional)<\/li>\n<li>A font you like (I like to look on <a href=\"http:\/\/dafont.com\">daFont.com<\/a> &#8211; they are free:)<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h3>Lets get started<\/h3>\n<p><strong>Step #1: <\/strong><a href=\"http:\/\/www.mikeindustries.com\/sifr\">Download and unzip the latest version of the sIFR project here<\/a>. This tutorial uses <a href=\"http:\/\/www.mikeindustries.com\/blog\/files\/sifr\/2.0\/sIFR-2.0.7.zip\">sIFR-2.0.7<\/a><br \/>\n<strong> Step #2:<\/strong> Fire up Adobe Flash and open <strong>sifr.fla <\/strong>(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 <a href=\"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/sifr_cs3.zip\">download a compatible version here<\/a><br \/>\n<strong> Step #3:<\/strong> Double click on the stage.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-large wp-image-819 alignnone\" title=\"sifr_step_3\" src=\"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/sifr_step_3-480x327.jpg\" alt=\"sifr_step_3\" width=\"480\" height=\"327\" \/><\/p>\n<p><strong>Step #4:<\/strong> Select the Dynamic Text box on the stage.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-820\" title=\"sifr_step_3b\" src=\"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/sifr_step_3b-480x327.jpg\" alt=\"sifr_step_3b\" width=\"480\" height=\"327\" \/><\/p>\n<p><strong>Step #5:<\/strong> Change the font to one you like. Don&#8217;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.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-818\" title=\"sifr_step_3c\" src=\"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/sifr_step_3c-480x327.jpg\" alt=\"sifr_step_3c\" width=\"480\" height=\"327\" \/><\/p>\n<p><strong>Step #6:<\/strong> 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.<\/p>\n<p><strong>Step #7:<\/strong> Open up your text editor and follow along.  It is pretty easy to just cut and paste:)<\/p>\n<p><strong>Step #8:<\/strong> Open <strong>customize_me.as <\/strong>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.<\/p>\n<p>example:<\/p>\n<pre lang=\"PHP\">allowedDomains = new Array(\"*\",\"www.toddsantoro.com\",\"toddsantoro.com\");<\/pre>\n<p><strong>Step #9:<\/strong> Open up your site&#8217;s <strong>stylesheet<\/strong> (Hint: its a .css file)<\/p>\n<p><strong>Step #10:<\/strong> Add these lines to your sites stylesheet:<\/p>\n<p>example:<\/p>\n<pre lang=\"CSS\">.replace-me { font-size: 18px;  display: none !important; }\nh1 { display:none !important; }<\/pre>\n<p>OR<\/p>\n<pre lang=\"CSS\">.replace-me { font-size: 18px; height:75px; width:250px; padding-left:25px; }\nh1 { display:none !important; font-size: 22px; }<\/pre>\n<p>The class <strong>replace-me<\/strong> 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 &lt;h1&gt; tag&#8230; everywhere a &lt;h1&gt; tag is on your site, sIFR will replace it with a Flash movie.<\/p>\n<p><strong>Step #11:<\/strong> 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.<\/p>\n<p>Add these lines to the &lt;head&gt;&lt;\/head&gt; of your page:<\/p>\n<pre lang=\"javascript\"><script src=\"sIFR-2.0.7\/sifr.js\" type=\"text\/javascript\"><\/script>\n<script src=\"sIFR-2.0.7\/sifr-addons.js\" type=\"text\/javascript\"><\/script>\n<\/pre>\n<p><strong>Step #12:<\/strong> Add this line somewhere in the &lt;body&gt;&lt;\/body&gt; of your page:<\/p>\n<pre lang=\"PHP\">\n<div class=\"replace-me\">This is the text I wanted to replace.  Yippie!<\/div>\n\n<\/pre>\n<p><strong>Step #13:<\/strong> Open up <strong>footer.php<\/strong> if you have one or continue working with the file you were just working with in <strong>Step #12. <\/strong>Add these lines just before the ending <strong>&lt;\/body&gt;<\/strong> tag:<\/p>\n<pre lang=\"javascript\"><script type=\"text\/JavaScript\">if(typeof sIFR == \"function\"){\n\n        sIFR.replaceElement(named({sSelector:\"h1\", sFlashSrc:\"sIFR-2.0.7\/swatch_it.swf\", sColor:\"#4E4C00\", sLinkColor:\"#4E4C00\", sHoverColor:\"#4E4C00\", sWmode:\"transparent\"}));\n\n  }<\/script>\n\n<script type=\"text\/JavaScript\">if(typeof sIFR == \"function\"){\n\n        sIFR.replaceElement(named({sSelector:\"#replace-me\", sFlashSrc:\"sIFR-2.0.7\/swatch_it.swf\", sColor:\"#4E4C00\", sLinkColor:\"#4E4C00\", sHoverColor:\"#4E4C00\", sWmode:\"transparent\"}));\n\n  }<\/script>\n<\/pre>\n<p>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:<\/p>\n<pre lang=\"javascript\"><script type=\"text\/JavaScript\">if(typeof sIFR == \"function\"){\n\n        sIFR.replaceElement(named({sSelector:\"h1,#replace-me\", sFlashSrc:\"sIFR-2.0.7\/swatch_it.swf\", sColor:\"#4E4C00\", sLinkColor:\"#4E4C00\", sHoverColor:\"#4E4C00\", sWmode:\"transparent\"}));\n\n  }<\/script>\n<\/pre>\n<p>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 &lt;h1&gt; tags and the replace-me class.<\/p>\n<p><strong>Step #14: <\/strong>You are done! \u00a0Upload all of your files to your server and check out your work. \u00a0If you have problems&#8230; 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.<\/p>\n<p>I will try to help troubleshoot if you post your comments below.<\/p>\n<p>Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,23],"tags":[24,12,82],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>sIFR is how we made our headlines look so smashing - Todd Santoro Designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"sIFR is how we made our headlines look so smashing - Todd Santoro Designs\" \/>\n<meta property=\"og:description\" content=\"We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\" \/>\n<meta property=\"og:site_name\" content=\"Todd Santoro Designs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/toddsantorodesigns\" \/>\n<meta property=\"article:published_time\" content=\"2009-12-16T16:20:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/headlines_using_sifr.jpg\" \/>\n<meta name=\"author\" content=\"Todd Santoro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@toddsantoro\" \/>\n<meta name=\"twitter:site\" content=\"@toddsantoro\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Todd Santoro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\"},\"author\":{\"name\":\"Todd Santoro\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1\"},\"headline\":\"sIFR is how we made our headlines look so smashing\",\"datePublished\":\"2009-12-16T16:20:56+00:00\",\"dateModified\":\"2009-12-16T16:20:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\"},\"wordCount\":677,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/toddsantoro.com\/#organization\"},\"keywords\":[\"sIFR\",\"tutorial\",\"Web Design\"],\"articleSection\":[\"Web Design\",\"Web Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\",\"url\":\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\",\"name\":\"sIFR is how we made our headlines look so smashing - Todd Santoro Designs\",\"isPartOf\":{\"@id\":\"https:\/\/toddsantoro.com\/#website\"},\"datePublished\":\"2009-12-16T16:20:56+00:00\",\"dateModified\":\"2009-12-16T16:20:56+00:00\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/toddsantoro.com\/#website\",\"url\":\"https:\/\/toddsantoro.com\/\",\"name\":\"Todd Santoro Designs\",\"description\":\"Web, Logo, Identity, Branding, Website Design in Key West, Florida and Columbus, Ohio\",\"publisher\":{\"@id\":\"https:\/\/toddsantoro.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/toddsantoro.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/toddsantoro.com\/#organization\",\"name\":\"ToddSantoro.com Designs\",\"url\":\"https:\/\/toddsantoro.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png\",\"contentUrl\":\"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png\",\"width\":400,\"height\":400,\"caption\":\"ToddSantoro.com Designs\"},\"image\":{\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/toddsantorodesigns\",\"https:\/\/twitter.com\/toddsantoro\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1\",\"name\":\"Todd Santoro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g\",\"caption\":\"Todd Santoro\"},\"sameAs\":[\"https:\/\/toddsantoro.com\",\"https:\/\/twitter.com\/toddsantoro\"],\"url\":\"https:\/\/toddsantoro.com\/blog\/author\/todd\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"sIFR is how we made our headlines look so smashing - Todd Santoro Designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/","og_locale":"en_US","og_type":"article","og_title":"sIFR is how we made our headlines look so smashing - Todd Santoro Designs","og_description":"We accomplished this with a small piece of opensource JavaScript and Adobe Flash software called sIFR...","og_url":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/","og_site_name":"Todd Santoro Designs","article_publisher":"https:\/\/www.facebook.com\/toddsantorodesigns","article_published_time":"2009-12-16T16:20:56+00:00","og_image":[{"url":"https:\/\/toddsantoro.com\/wp-content\/uploads\/2009\/12\/headlines_using_sifr.jpg"}],"author":"Todd Santoro","twitter_card":"summary_large_image","twitter_creator":"@toddsantoro","twitter_site":"@toddsantoro","twitter_misc":{"Written by":"Todd Santoro","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/#article","isPartOf":{"@id":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/"},"author":{"name":"Todd Santoro","@id":"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1"},"headline":"sIFR is how we made our headlines look so smashing","datePublished":"2009-12-16T16:20:56+00:00","dateModified":"2009-12-16T16:20:56+00:00","mainEntityOfPage":{"@id":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/"},"wordCount":677,"commentCount":0,"publisher":{"@id":"https:\/\/toddsantoro.com\/#organization"},"keywords":["sIFR","tutorial","Web Design"],"articleSection":["Web Design","Web Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/","url":"https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/","name":"sIFR is how we made our headlines look so smashing - Todd Santoro Designs","isPartOf":{"@id":"https:\/\/toddsantoro.com\/#website"},"datePublished":"2009-12-16T16:20:56+00:00","dateModified":"2009-12-16T16:20:56+00:00","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/toddsantoro.com\/blog\/sifr-is-how-we-made-our-headlines-look-so-smashing\/"]}]},{"@type":"WebSite","@id":"https:\/\/toddsantoro.com\/#website","url":"https:\/\/toddsantoro.com\/","name":"Todd Santoro Designs","description":"Web, Logo, Identity, Branding, Website Design in Key West, Florida and Columbus, Ohio","publisher":{"@id":"https:\/\/toddsantoro.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/toddsantoro.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/toddsantoro.com\/#organization","name":"ToddSantoro.com Designs","url":"https:\/\/toddsantoro.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/","url":"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png","contentUrl":"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png","width":400,"height":400,"caption":"ToddSantoro.com Designs"},"image":{"@id":"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/toddsantorodesigns","https:\/\/twitter.com\/toddsantoro"]},{"@type":"Person","@id":"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1","name":"Todd Santoro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/toddsantoro.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g","caption":"Todd Santoro"},"sameAs":["https:\/\/toddsantoro.com","https:\/\/twitter.com\/toddsantoro"],"url":"https:\/\/toddsantoro.com\/blog\/author\/todd\/"}]}},"_links":{"self":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts\/630"}],"collection":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":0,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"wp:attachment":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/categories?post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/tags?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}