Champlain Host

Posted by on Jun 11, 2013 in Portfolio

Champlain Host

Champlain Host is the hosting side of my business. This website runs on the WHMCS Content Management Sysytemd designed specifically for hosting ecommerce websites. The CMS is on the clunky side when compare with WordPress, but the ecommerce part of it is rock solid. I have customized the template and separated the http from the https parts to optimize it for search and for Google Analytics.

Read More »

.htaccess – Changing .php to .html and Getting Rid of www

Posted by on Jun 5, 2013 in Tutorials

This is a good one to use if you’re building your website from scratch. This is not a good one to use with a Content Management System (CMS) like Joomla or WordPress. I know Joomla has its own core htaccess file as well as third party extensions like JoomSEF. I would imagine WordPress has similar options. That being said, if you’re building a PHP site, this is a great way to hide the fact that this a PHP site and possibly causing hackers to overlook your site. There’s no SEO advantage to having a .html extension over a .php extension. The biggest drawback I can see to using this part of the script is if you commonly pass variable through your URLs (ie. filename.php?id=420&action=token). If that is the situation you are in, then you can simply strip that part out of the script. The second feature of this script is eliminating the “www.” option to get to your site. When someone types in http://www.yoursite.com, it will automatically change to http://yoursite.com. This part of the script is important to SEO because it concentrates all of your indexed pages into a single domain, making it more relevant in the eyes of Google. It also makes it much easier to track with Google Analytics and helps to eliminate “self referrals” (when your own website shows up in Analytics as a referring site). The Script RewriteEngine On RewriteBase / RewriteCond %{HTTP_HOST} !^northernseo.com$ [NC] RewriteRule ^(.*)$ http://northernseo.com/$1 [L,R=301] Options +FollowSymlinks RewriteRule ^(.*)\.html$ $1.php [nc] UPDATE This one is much better. It will take any page on your site and serve it without the www. The previous example would redirect all www. requests to the home page. If you have several pages indexed in any of the major search engines, that would be quite disruptive. This new script is seamless. RewriteEngine On RewriteBase / RewriteCond ${HTTP_HOST} . RewriteCond %{HTTP_HOST} !^northernseo\.com RewriteRule (.*)$ http://northernseo.com/$1...

Read More »

Firefox 3D Page Inspector

Posted by on Mar 3, 2013 in Tutorials

Firefox 3D Page Inspector

Over the years, I’ve heard a lot of web developers complain about Firefox. The only big complaint I agree with as being problematic is that it is a memory hog. When I code, I usually work on a PC running Windows XP. I also use a MAC running 10.6 but that’s mostly for graphics and video. Firefox is pretty slow on my MAC. I like Chrome for their web developer tools and some of the other bonus features, as well as the uncluttered layout (and the inability to clutter it up). It runs well on my MAC and my PC. I only use Safari on my phone and for testing. Internet Explorer, which I’ve loathed ever since 5.5 and is a pain in the ass to every web developer I’ve ever known, is only used for testing. When I discovered the 3D Page Inspector included in Firefox (not an add-on) recently, I was blown away. I was a little late in discovering this since it had been out for well over a year before I stumbled across it. It has proved to be the most valuable tool in my web developer toolbox ever since. When customizing a template or theme, this takes all of the guess work out of figuring out any element’s properties. It shows you the inherited properties and the over written properties. Assuming your code is well formed (no broken divs or unclosed elements) the depiction of the page in 3 dimensional stacked elements that you can spin around on an access makes selecting an element quick and easy. If you’ve left Firefox for Chrome, I’d suggest you re-install Firefox and give it another spin, even if only occasionally to spare your...

Read More »

Image Rollover Links with CSS3

Posted by on Nov 6, 2012 in Tutorials

Image Rollover Links with CSS3

Image rollovers have been around since the days of the Flying Toasters, but back then it took either some moderate skill in JavaScript to get them to work. If you had a copy of Dreamweaver, it could spit out the code for you. With CSS3 doing a simple image rollover with a link is easy using only HTML and a little CSS3. There are other CSS3 tricks in the same vein, but I’ll save those for a different tutorial. With any rollover, you need two images, or an image with two parts. You’ll need the initial state of the image and a rollover state. This tutorial uses separate images, instead of combining the two states into one image and transitioning the position when a user hovers over the graphic. I’ll be putting links on the images, but it would be easy to take this code and create your own set of rollovers without links. I’ve made a simple set of buttons that are icons in their initial state. The hover state versions use a faded background of the same icon with a dark text overlay that explain what the icon means. First, to keep things neat and portable, I create a div that wraps around the buttons (I call them tabs in this naming convention). Next I make a class for the individual divs that contain the tabs. This class defines the dimensions and margins. Make the dimensions identical to your graphics and use your margins to give them breathing room. These same divs will have ids so that you can define individual background images that coordinate with the initial images. These are the background images that will show when you rollover the images inside the divs. The CSS transition you’ll see is the top image fading in opacity, revealing the background image behind it when you hover over the div. Now let’s get to the code… CSS .tab_wrapper { width:730px; height:110px; } .top_tab { width:100px; height:100px; float:left; margin:5px 35px 20px; } #agriculture { background:url(http://champlai.wwwssr14.supercp.com/www.champlainwebsites.com//wp-content/uploads/manual/rollover/farm_icon_over.png) no-repeat; } #economic { background:url(http://champlai.wwwssr14.supercp.com/www.champlainwebsites.com//wp-content/uploads/manual/rollover/money_icon_over.png) no-repeat; } #quality { background:url(http://champlai.wwwssr14.supercp.com/www.champlainwebsites.com//wp-content/uploads/manual/rollover/home_icon_over.png) no-repeat; } .top_tab a img { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .top_tab a:hover img { opacity:.01; } .clear { clear:both; } HTML <div class=”tab_wrapper”> <div class=”top_tab” id=”agriculture”><a href=”#”><img src=”http://champlai.wwwssr14.supercp.com/www.champlainwebsites.com//wp-content/uploads/manual/rollover/farm_icon.png” /></a></div> <div class=”top_tab” id=”economic”><a href=”#”><img src=”http://champlai.wwwssr14.supercp.com/www.champlainwebsites.com//wp-content/uploads/manual/rollover/money_icon.png” /></a></div> <div class=”top_tab” id=”quality”><a href=”#”><img src=”http://champlai.wwwssr14.supercp.com/www.champlainwebsites.com//wp-content/uploads/manual/rollover/home_icon.png” /></a></div> <div class=”clear”></div>...

Read More »

Salt River Graphics

Posted by on Apr 10, 2011 in Portfolio

Salt River Graphics

I’ve had several websites at this domain since 2002. The current version is a Joomla 3 website. Joomla has long been a favorite CMS of mine, though WordPress has moved slightly ahead because of the number and availability of responsive themes. Joomla is excellent for large websites, so I hope they close the gap on responsive templates soon. I’m looking into Drupal and I like what I’m seeing so far.

Read More »