The Joy of Telus Shared Hosting

Recently I've had the joy (sarcasm here) of working on a Telus shared hosting plan. It's not something I'd recommend for anyone who wants any sort of data driven website but I've found a workable if not ideal solution.

The first thing to note with Telus is how slow the servers are. I can't say whether it is the mysql server or the equipment, or the php (no phpinfo allowed), but I can say with concrete5 it was 30 -90 seconds, timeouts errors and more making the system unworkable.

Note: If you want to use concrete5 I like Bluehost with the auto-installer, and it works fine on Dreamhost as well.

After building the site in concrete5 only to be stifled by the server, I decided to try a wordpress installation. I did find a few websites that said wordpress was terrible on telus too but I had to try it for myself. To my surprise the wordpress site performs reasonably well. True some pages take up to 8 seconds to load but with supercache this may be reduced for site visitors.

I had to manually install wordpress, which includes using the Telus archaic control panel but it really isn't that hard. Note they recommend filezilla for ftp and it seemed to work way better than my Dreamweaver ftp.

The site I'm working on isn't live yet and I haven't tested under any sort of load but I can say at least there is a chance that wordpress will create a reasonably working CMS on Telus hosting.

Creating A Fancy Menu In Concrete5 with CSS

I was working on a subcontract for the Canadian Clean Power Coalition website and received a set of design files which included a very colorful side menu. I had planned to make the site using Concrete5 since the client wanted a CMS and C5 is my favourite.

The menu looks like this

As you can see the menu consists of :
the top level links in grey
the current top level in green with a leaf
sub level links in black
and the active page in red.

Once I created the skeleton of pages in the website I can use the auto-nav feature to create the menu. In this case the menu display all relevant subpages.

The actual html generated by the autonav looks like this:

<ul class="nav">
<li>
<a href="/index.php/about-the-ccpc/">About the CCPC</a>
</li>
<li class="nav-path-selected">
<a class="nav-path-selected" href="/index.php/electricity-sector/">Electricity Sector</a>
<ul>
<li class="nav-selected nav-path-selected">
<a class="nav-selected nav-path-selected" href="/index.php/electricity-sector/electricity-terms/">Electricity Terms</a>
</li>
<li>
<a href="/index.php/electricity-sector/how-a-coal-fired-power-plant-works/">How a coal-fired power plant works</a>
</li>
</ul>
</li>
<li>
<a href="/index.php/clean-power-projects-and-technology/">Clean Power Projects and Technology</a>
</li>
<li>
<a href="/index.php/ccpc-members/">CCPC Members</a>
</li>
<li><a href="/index.php/newsroom/">Newsroom</a>
</ul> 

I like to wrap the nav in it's own div with an id, in this case I wrapped the navigation in a <div id="navBar">. Based on this it is an exercise in CSS using child and descendant selectors.

1. The base menu styles

#navBar{width: 180px; margin: 25px 0px 0px 5px; float:left ;font: normal 12px Arial, Helvetica, sans-serif; text-transform: uppercase;}

#navBar a{display: block; text-decoration: none; margin: 10px 0px 10px 20px; color: #999} // grey color
#navBar ul{margin: 0px; padding: 0px};
#navBar ul.nav li{list-style: none; margin-left: 0px;} // remove the list circles

2. The green on state, uses the .nav-path-selected class generated by autonav

#navBar ul.nav > li.nav-path-selected{background: url(images/nav_leaf.gif) 4px 4px no-repeat;} //place the leaf on the list item, note the descendant since the .nav-path-selected is used on both menu levels.
#navBar ul.nav li.nav-path-selected a{color:#090; font-weight:600;} // change text to bold green

3. The submenu only exists when the parent item is selected so i can still use .nav-path-selected class

#navBar ul.nav li.nav-path-selected ul{margin-left:20px;} // indent the sub menu

#navBar ul.nav li.nav-path-selected ul a{color:#000;} // base color of links is black
#navBar ul.nav li.nav-path-selected ul a.nav-selected{color:#C00;} // active link is red

The result is a 2 tier menu with 4 colors and a graphic leaf, sure it looks a little like Christmas but that's what they wanted.