[SOLVED] CMS Made Simple - sIFR

[Lucaz]

For a website I made a design and will work with CMS Made Simple.

On every content page, I want a header to show the visitor where he is at that moment.
So when a visitor would go to the contact page, it would say "Contact" on top of that page in a big header ( for example)
These headers I made in Photoshop. But... what if the editor of the website wants to change this tekst? Like change "Contact" to "Contact us". The editor has to contact me and ask me to make a new header in Photoshop I have to send back...

There is a solution for this it is calles sIFR - Scalable Inman Flash Replacement
http://www.mikeindustries.com/sifr
(example on http://www.geenstijl.nl where all headers are Flash and out off a CMS)

It's a solution to link content to a flash file where you can set a special Font to your header (or content).

But, a bug BUT, this does not work in CMS Made Simple.. I tried it but Smarty give an error. I even tried to put the Script that comes with this solution, to set in the User Defined Tags.. But that didn't work either.

So... i've your a guru and know a solution for linking content with sIFR, your a hero.

Lucas

[cyberman]

Hi Lucas,

Forum search is your friend

http://forum.cmsmadesimple.org/index.ph ... 982.0.html
http://forum.cmsmadesimple.org/index.ph ... 286.0.html

[Lucaz]

Hi Lucas,

Forum search is your friend

http://forum.cmsmadesimple.org/index.ph ... 982.0.html
http://forum.cmsmadesimple.org/index.ph ... 286.0.html

Am I a noob or what?

I did a search on google the whole world... and could not find it. I searched this site but not the forum.

Thank you so much!

[Lucaz]

UPDATE: 16:11

I can't seem to get it work 

Smarty gives me this error:

string(362) "Smarty error: [in template:22 line 193]: syntax error: unrecognized tag: # # // This is the preferred "named argument" syntax # sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"swf/font.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC" (Smarty_Compiler.class.php, line 439)" string(112) "Smarty error: [in template:22 line 193]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 583)"

[chipper]

Hi Culas

I will take a look at what I did and write some instructions /tips - btw which version of siFR are you using?

Bye
Lynne

[Lucaz]

Hi Culas

I will take a look at what I did and write some instructions /tips - btw which version of siFR are you using?

Bye
Lynne

Hi, I have used the latest as of today version of sIFR 2.0.2

[chipper]

Hi - just asked that as I have no experience yet of the very latest version 3 -

Here in very basic terms as I am not an expert is what I did to my template - remembering to add the literal tags to the script includes.


Add before closing head tag

{literal}{/literal}

{literal}{/literal}

Add before the closing body tag

{literal}

    //
    {/literal}

And remember to add your SiFr stylesheet to the template! (my particular dumb mistake!!)

As I only wanted h2 headers to be affected I just left that decoy style and then tweaked the settings to get the correct size and spacing.

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
visibility: visible !important;
margin: 0;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 7px;
font-size: 58px;

}

Eventually got it working as you can see when you get past the homepage of my site - just click on any of the page links - (and this site is not finished yet - obviously! - just a warning if you choose to view it!!)

Bye
Lynne

PS Still haven't experimented with transparency as you can see whne my rather long drop down menu covers the heading the background shows as white - I believe (and this might be in error) that this is bettered handled in Version 3

[Lucaz]

Lynne,

I know I had 4 rose, 2 red wine and one Belgium beer with two girlfriends... But I love you man, it works!

I just did not put the {literal} in front of every tag/script.

My design is on http://www.culas.nl/volt/

Thank you very much man!

[chipper]

Hi Culas

Thanks! 

You can't beat that moment when something finally works...

Regards
Lynne

[psy]

Hello

Glad that you got sIFR working.  I have used it for a while with CMS.  It's not 'packaged' as a module or tag but the following works for me.  It uses 3 user defined tags, ie:

sIFR_font

Code: Select all

/* Set up the sFIR replacement fonts

selector:  the css selector you want to use, eg h1 or #foo>p (spaces signify child elements)

flashsrc:  location of the swf file

color: font colour

linkcolor: link colour

hovercolor: hover colour

bgcolor: background colour

paddingtop, paddingright, paddingbottom, paddingleft: if you use padding in the elements you want to replace, you have to set the amount of padding here (in pixels, but without the px part).

flashvars: extra variables you want to pass on to the Flash. These variables are seperated by &. You can use:

    - textalign=center: Center text horizontally
    - offsetLeft=5: Pushes text 5px to the right. Of course you can use any number here.
    - offsetTop=5: Pushes text 5px down.
    - underline=true: Adds underline to links on hover

case: Use upper to transform the text to upper-case, use lower to transform the text to lower-case. Depending on the browser this might give problems when you want to change the casing of special characters.

wmode: Set this argument to transparent if you want to use a transparent background. If you want to stack elements above the Flash movies, you need to set it to opaque. Mozilla browsers can have some difficulty rendering Flash movies with the wmode set. Therefore setting this is not recommended.

*/
$content  = "<__script__ type=\"text/javascript\">\n";
$content  .= "<!--\n";
$content .= "if(typeof sIFR == \"function\"){\n";
$content .= "    sIFR.replaceElement(\n";
$content .= "      \"" . $params['selector'] . "\",\n";
$content .= "       named(\n";
$content .= "         {\n";
$content .= "          sFlashSrc: \"uploads/File/swffonts/" . $params['flashsrc'] . ".swf\",\n";
$content .= "          sColor: \"" . $params['color'] . "\",\n";
$content .= "          sLinkColor: \"" . $params['linkcolor'] . "\",\n";
$content .= "          sHoverColor: \"" . $params['hovercolor'] . "\",\n";
$content .= "          sBgColor: \"" . $params['bgcolor'] . "\",\n";


$content .= "          nPaddingTop:";
if (!$params['paddingtop']){
  $content .= "0,\n";
} else {
  $content .= $params['paddingtop'] . ",\n";
}

$content .= "          nPaddingRight:";
if (!$params['paddingright']){
  $content .= "0,\n";
} else {
  $content .= $params['paddingright'] . ",\n";
}

$content .= "          nPaddingBottom:";
if (!$params['paddingbottom']){
  $content .= "0,\n";
} else {
  $content .= $params['paddingbottom'] . ",\n";
}

$content .= "          nPaddingLeft:";
if (!$params['paddingleft']){
  $content .= "0,\n";
} else {
  $content .= $params['paddingleft'] . ",\n";
}

$content .= "          sCase: \"" . $params['case'] . "\",\n";
$content .= "          sFlashVars: \"";
$i=0;
  if ($params['textalign']) {
      if ($i>0) {
          $content .= "&";
          $i=0;
       }
      $content .= "textalign=" .$params['textalign'];
      $i++;
  }
  if ($params['offsetleft']) {
      if ($i>0) {
          $content .= "&";
          $i=0;
       }
      $content .= "offsetLeft=" .$params['offsetleft'];
      $i++;
  }
  if ($params['offsettop']) {
      if ($i>0) {
          $content .= "&";
          $i=0;
       }
      $content .= "offsetTop=" .$params['offsettop'];
      $i++;
  }
  if ($params['underline']) {
      if ($i>0) {
          $content .= "&";
          $i=0;
       }
      $content .= "underline=" .$params['underline'];
      $i++;
  }

$content .= "\",\n";

$content .= "          sWmode: \"" . $params['wmode'] . "\"\n";
$content .= "        }\n";
$content .= "       )\n";
$content .= "    );\n";
$content .= " sIFR();\n";
$content .= "};\n";
$content .= "//--></__script>\n";

echo $content;

sIFR_js

Code: Select all

/* Put this in the header section of the template

dir:  The path to the directory in which the sifr is located, eg uploads/Files/js


Booleans for sIFR set up

HideBrowserText: Determines whether sIFR will hide the text you want to replace or not.
FixFragIdBug: False NOT recommended!
AutoInit: Initialize sIFR on load.
IsDisabled:  Determines whether sIFR will work or not.

*/

$content  = "<__script__ src=\"". $params['dir']."/sifr.js\" type=\"text/javascript\">";
$content .= "</__script>\n";
echo $content;

sIFR_go

Code: Select all

/* Fire off sIFR */


echo "

<__script__ type=\"text/javascript\"><!--

if(typeof sIFR == \"function\" && !sIFR.UA.bIsIEMac){
sIFR.updateDocumentTitle()
 sIFR();
};
// -->
</__script>
";

sIFR_js and sIFR_font go in the template head tag and sIFR_go at the end of the content, eg:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-- Type the title of your site here -->
<title>{sitename} - {title}</title>
{metadata}
{stylesheet name="Your_sIFR_stylesheet"}

{sIFR_js dir="uploads/File/js"}

{sIFR_font selector="#header>h1>a" flashsrc="papyrus" color="FFBE00" bgcolor="000000" }
{sIFR_font selector="#main>h1" flashsrc="papyrus" color="000000" bgcolor="FFFFFF" }

</head>

</__body>

<div id="pagewrapper" >

<!-- Start Header, with logo image that links to the default start page -->
   <div id="header">
         <h1 class="sIFRtext">
                {cms_selflink page="home" text="Your text goes here"}
          </h1>

   </div> <!-- End Header -->

   <div id="content" class="clearfix">
   
        <h1>{title}</h1> 
         {content} <br />
  
</div> <!-- End Content -->

</div><!-- end pagewrapper -->
{sIFR_go}

<__body>
</__html>

To enable the sIFR fonts to appear in the page content, just define the appropriate css styles and insert the {sIFR_font } with associated params.  The font directory in my example is hardcoded to "sFlashSrc: \"uploads/File/swffonts/" - it's up to you whether or not you want to use or change the way this works.

Hope this is useful and good luck!
Cheers
psy