CMS Made Simple Forums

Posted: **Wed Dec 22, 2010 6:23 am**

Here is a website that has just been finished with CMS Made Simple.
The Patriot's Conference & Historic Ball

First, I purchased the Columbia Theme from Themeforest.net:
http://themeforest.net/item/columbia-corporate-theme-with-product-showcase/124113

But it was not in HTML5, so I converted it using Paul Irish's HTML5 Boilerplate.

Dynamic Menu Sprite with TruetypeText Module

I wanted to use the Gaudy Trajan Font with this website, but it does not have a license for @font-face. Therefore I had to choose between using static menu sprites, or using TruetypeText with a menu template to make it dynamically generate the menu images and combine them into one sprite to conserve page loading time.

So, I successfully did this, and will be happy to share the menu template and style.

I could have just used the script that created the roll-over effect for the original theme, but I wanted to use css-transitions. So I did that, and you can see nice roll-over effect in Chrome and Safari. It is as smooth as Flash. I'm still working on a script to do the roll-over effect for other browsers, but it keeps dying in IE for some reason.

Accessible Music With Iframe

The client wanted music for this site that doesn't reload when the visitors click on another page. So I wanted to add it using the avplayer module, in a way that allowed the visitor to easily turn it off.

So the home page template is special, because it uses javascript to detect the window size, and then refreshes and adds a couple of url parameters if the user has javascript turned on. I used {$smarty.get.height} and {$smarty.get.width} to construct the iframe so it perfectly fits the window on the first try.

If the visitor clicks the X to turn off the music is sets a cookie. So my home page template also checks {$smarty.cookies.xmusic} so it doesn't reload the music if they turned it off. [ For some reason this behavior is not working in Chrome. And my div that contains the player and the X to turn it off cannot be seen in IE7, but it works in IE6 and IE8. ]

Script Deploy and Mod_Pagespeed

In order to optimize the download time for this website, I have installed mod_pagespeed on the server. Not all of the filters are turned on, but it takes the TruetypeText images and makes them inline.

I used ScriptDeploy to combine and compress the CSS and the Javascript.

I also used the supersizer plugin to optimize images in the History section which is running on the CGBlog module.

There are three problems I have not been able to solve yet:
1. The #player div and the X to turn it off is not visible in IE7.
2. The jquery to turn off the music doesn't work in Chrome.
3. The IE9 script is not fixing the png background images in IE6.

Any suggestions would be very welcome.

I have really enjoyed building this website in CMS Made Simple! I am very grateful to everyone who has participated in building this excellent content management system. It really is very powerful.

CMS Version
1.9.1

Installed Modules
CMSMailer
2.0
FileManager
1.0.3
MenuManager
1.7.2
ModuleManager
1.4
News
2.11
nuSOAP
1.0.2
Printing
1.1.1
Search
1.6.7
ThemeManager
1.1.3
TinyMCE
2.8.1
TemplateExternalizer
1.2
ScriptDeploy
0.8
CodeMirror
0.1.8
AdvancedContent
0.7.1
TruetypeText
2.1.1
Gallery
1.4.3
CGSimpleSmarty
1.4.7
CGExtensions
1.22.1
CGBlog
1.7.1
CGFeedMaker
1.0.11
CGCalendar
1.5.6
JQueryTools
1.0.10
FormBuilder
0.6.4
PHPMyAdmin
3.1.1
avplayer
1.3.1
SEOTools
1.1

Posted: **Wed Dec 22, 2010 6:25 am**

I neglected to mention that I had to completely rewrite the TruetypeText module because the version in the repository is buggy.

I submitted my revised version to the project admins last Spring but they have not used it or updated the module, unfortunately.

TruetypeText module is extremely useful, it is a shame it is not being actively developed anymore.

Posted: **Wed Dec 22, 2010 10:09 am**

Hey there.. thougt I'd alert you to this error..

http://screencast.com/t/2RpQ2wt8T

the is IE9 but something to note.. also on a side note, thou it's ture TruetypeText is dones atm, I am making a module that will be out in about 2 weeks called Fontin that will let you install over 600+ fonts atm with no more then a click. It's a good match for the .htaccess that is in the Paul Irish's HTML5 Boilerplate.

Just thougt I'd drop a line.. nice stuff..

Cheers -Jeremy

Posted: **Wed Dec 22, 2010 11:03 am**

Very nice work.

I bumped in another glitch, not sure how it happend either by opening the "register" panel or moving to anothr page, i suddenly had the player twice at the bottom after refreshing or clearing bcache no player appeared in Chrome.

There is also a minor glitch with first-letter and letter J on Patriots Ball page.

Posted: **Wed Dec 22, 2010 6:36 pm**

Here is the template for the Main Menu (MenuManager):

Code: Select all

{strip}
{if $count > 0}
    <ul id="nav">
        {* setup $menu_style to hold css for <head> *}
        {capture assign='menu_style'}<style type="text/css">{/capture}
        
        {foreach from=$nodelist item=node}
      {if $node->depth == 1}
        {* Build the SPRITE and CSS for the menu top level *}
      
        {* Add three spaces to separate words *}
        {capture assign='menusprite'}{$menusprite}   {$node->menutext}   {/capture}
        
        {* Determine the width of the Menuitem image *}
        {capture assign='nodeimg'}
          {cms_module module='TruetypeText' style='Menu' text='   '|cat:$node->menutext|cat:'   ' imagesrc='1'}
        {/capture}
      
        {* UDT nodeimg_width sets $xpos and $width *}
        {nodeimg_width nodeimg=$nodeimg xsum=$xsum}
        
        {capture assign='menu_style'} 
          {$menu_style}
          #nav #{$node->alias} {ldelim}
          width:{$width}px;
          background-position:-{$xpos}px -50px;
          {rdelim}
          #nav #{$node->alias}:hover {ldelim}
          background-position:-{$xpos}px 10px;
          {rdelim}
        {/capture}
        
      {/if}
      
      {if $node->depth > $node->prevdepth}
        {repeat string="<ul>" times=$node->depth-$node->prevdepth}
      {elseif $node->depth < $node->prevdepth}
        {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}</li>
      {elseif $node->index > 0}
        </li>
      {/if}
	  
	  {assign var='nodeclass' value=''}
	  {if $node->haschildren == true}{capture assign='nodeclass'}{$nodeclass} menuparent{/capture}{/if}
	  {if $node->current == true}{capture assign='nodeclass'}{$nodeclass} menuactive{/capture}{/if}
	  {if $node->type == 'sectionheader'}{capture assign='nodeclass'}{$nodeclass} sectionheader{/capture}{/if}
	        
      {if $node->type == 'separator'}
	          <li id="{$node->alias}" class="separator"> <hr />
	  {else}
	  
	  <li id="{$node->alias}" class="{$nodeclass}"><a href="{$node->url}">{$node->menutext}</a>
      
      {/if}
	  
    {/foreach}
        
    {repeat string="</li></ul>" times=$node->depth-1}</li></ul>
{/if}

{capture assign='sprite_url'}{cms_module module='TruetypeText' style='Menu' text=$menusprite imagesrc="1"}{/capture}

{capture assign='menu_style'}
  {$menu_style}
  #nav>li {ldelim}
    background:url({clean_string text=$sprite_url}) no-repeat;
  {rdelim}
  </style>
{/capture}
{* don't forget to put {strip}{$menu_style}{/strip} in your <head> element after your stylesheet links *}
{/strip}

In the head I put the {strip}{$menu_style}{/strip} right before to insert the styles with correct background positions for the menu. ( I haven't figured out how to remove the whitespace from it. For some reason {strip}{/strip} doesn't seem to work.

Here is the stylesheet for the menu:

Code: Select all

#nav{
    position:relative;
    float:right;
    top:90px;
    right:0;
    z-index:99;
}
#nav li{
    position:relative;
    float:left;
    height: 40px;
}
#nav > li{
  transition-property: background-position;
  transition-duration: 1s;
  transform: translate(30px);
  -webkit-transition-property: background-position;
  -webkit-transition-duration: 1s;
  -webkit-transform: translate(30px);
  -moz-transition-property: background-position;
  -moz-transition-duration: 1s;
  -moz-transform: translate(30px);
  -o-transition-property: background-position;
  -o-transition-duration: 1s;
  -o-transform: translate(30px);
}
#nav li .global_nav_separator{
    position: absolute;
    top: 14px;
    left: 0;
    width: 1px;
    height: 12px;
    background: url([[root_url]]/assets/images/skin1/nav_separator.png) no-repeat;
}
#nav li a{
    display: block;
    height:58px;
}
/*level two*/
#nav ul{
    background: url([[root_url]]/assets/images/skin1/dropdown_shadow_bg.png) center top repeat-y;
    width: 206px;
    visibility: hidden;
    position: absolute;
    top: 58px;
    left: 0;
	border: none;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	border-radius: 5px;
	-moz-border-radius: 5px;
}
#nav ul.dropdown_shadow_bg{
    background: url([[root_url]]/assets/images/skin1/dropdown_shadow_bg.png) center top repeat-y;
}
#nav ul li.dropdown_shadow_bottom_bg{
    position:absolute;
    background: url([[root_url]]/assets/images/skin1/dropdown_shadow_02_bg.png);
    margin: 0;
    padding: 0; 
    width: 206px;
    height: 9px;
    border: none;
}
#nav ul li{
    background: url([[root_url]]/assets/images/skin1/noisy_bg.jpg);
    float: none;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 12px; 
    text-transform: uppercase;
    margin: 0 4px 0 2px;
    padding: 0 10px;
    line-height: 36px;
    width: 184px;
    height: 36px;
  border-bottom: 1px solid #EFEFEF;
}
#nav ul li div{
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #EFEFEF;
    width: 180px;
    height: 34px;
}
#nav ul li:first-child{
    border-top: none;
    height: 35px;
}
#nav ul li:last-child{
    border-bottom: none;
    height: 35px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
}
#nav li a{
    display: block;
    margin: 0 10px;
    color: #3c7ba6;
    text-decoration: none;
}
#nav li a:hover{
    color: #183243;
    text-decoration: underline;
}

#nav>li>a{
  text-indent:-9999px;
}

/* ie 6 & 7 needs inline block */
#nav ul li a{
    border-right: none;
    width: 100%;
    display: inline-block;
}

I had to use two User Defined Tags to calculate the x-positions and widths for the Menu li.

Code: Select all

// UDT nodeimg_width
// Parameters: nodeimg (required), xsum
// This tag will pass the width of the node image to $width
// The total width of the menu so far to $xsum
// And the x-position for the current node to $xpos

$gCms = cmsms(); //global $gCms;
$smarty = &$gCms->GetSmarty();
$config = $gCms->GetConfig();

if (!isset($params['nodeimg']))
  {
    print ('Error, $nodeimg parameter is missing.');
    return;
  }
  
if (!isset($params['xsum']))
  {
    $xpos = 0;
  }
else 
  {
    $xpos = $params['xsum'];
  }

$img_fname = trim(end(explode('/', $params['nodeimg'])));
$path = $config['root_path'].'/modules/TruetypeText/cache/'.$img_fname;

list($width, $height, $type, $attr) = getimagesize($path);

 // Assign UDT variables to template
 $smarty->assign('width', $width);
 $smarty->assign('xpos', $xpos);
 $smarty->assign('xsum', $xpos+$width-2);
 return;

This second string was required because the TruetypeText module spits out a non-ASCII character at the beginning of the URL if you use urlonly. I didn't have time to locate the offending character in the module code, so I just wrote a UDT to clean the string.

Code: Select all

// UDT clean_string
// text='whatever'
// removes non-ascii chars from string and prints it

if ( !isset($params['text']) ) return;
 
print( preg_replace('/[^(\x20-\x7F)]*/','', $params['text']) );

return;

Posted: **Thu Dec 23, 2010 5:17 am**

Nice, well done.............

Posted: **Thu Dec 23, 2010 9:37 am**

uniqu3 wrote: I bumped in another glitch, not sure how it happend either by opening the "register" panel or moving to anothr page, i suddenly had the player twice at the bottom after refreshing or clearing bcache no player appeared in Chrome.

Experienced the same thing in latest Opera 11.
Every click on the top menu opens a new player at the bottom.

Bernd

Posted: **Thu Dec 23, 2010 4:49 pm**

Dr.CSS wrote: Some of your problem may be related to not having a true DOCTYPE declaration...

http://validator.w3.org/check?verbose=1 ... all.com%2F

@Dr.CSS

But it was not in HTML5, so I converted it using Paul Irish's HTML5 Boilerplate.

-> HTML5

Posted: **Thu Dec 23, 2010 6:02 pm**

I found the problem that was causing the multiple music bars.

In the main menu I used tags instead of to wrap section headers. Since the default href is "#" if you click the section header it takes you back to the landing page, which spawns another iframe.

I will fix it today by doing two things:

- Changing the back to for non-linking menu nodes.

- Creating an iframe cookie when the iframe is first created, and checking that cookie before creating iframes.

Hopefully that will fix it.

Drop Caps
That "first-letter glitch" is a drop-caps style created in the stylesheet so that the first letter of the first in the content section of a page is large bold, and drops down three lines.

CMS Made Simple Forums

The Patriot's Ball

The Patriot's Ball

TruetypeText

Re: The Patriot's Ball

Re: The Patriot's Ball

Here is how I did the Menu Sprite with TruetypeText

Re: The Patriot's Ball

Re: The Patriot's Ball

Re: The Patriot's Ball

Found it