Magento 1.6 Theming Admin Pages

May 10th, 2012

Creating an Admin Theme to match your frontend

As it turns out, this is simple. Here’s the steps:
1) Look in skin/adminhtml/default – inside the folder, you will see another folder titled default
2) Copy that folder, and rename it to match the name of your frontend themes (for example, “cooltheme”)
3) Modify the boxes.css and images to your liking

The theme will automatically load, so long as the name matches the one you’ve defined in the dashboard under System->Configuration->General->Design (in this example, “cooltheme”)

How to Move Zen Cart to a New Server

May 7th, 2012

Moving Zen Cart is a regular part of my job description.  I do it often enough that I thought it might be useful to share how to do it for others:

  1. Using FTP, copy your entire Zen Cart Directory from the current server to your local computer
  2. Using FTP, copy your entire Zen Cart Directory to the new server
  3. Export the Zen Cart database from your current server
  4. Import the Zen Cart database to the new server

Now things get interesting.  There’s a few adjustments that need to be made both to the database and to the configure.php files:

Note: There are TWO configure files – one is in includes/configure.php, and the other is in admin/includes/configure.php

First, we will address the admin includes file.

In this example, the installation is in a directory titled shop.  If you were to visit the site, the url would be http://www.mydomain.com/shop.

Open it in your favorite editor, and look for these lines:
define('HTTP_SERVER', 'http://www.mydomain.com/shop');
define('HTTPS_SERVER', 'https://www.mydomain.com/shop');
define('HTTP_CATALOG_SERVER', 'http://www.mydomain.com');
define('HTTPS_CATALOG_SERVER', 'https://www.mydomain.com');

In these lines, it’s fairly clear what needs to be done: replace mydomain.com with the new domain name.

Now look for this line:
define('DIR_FS_CATALOG', '/home/yourname/public_html/shop/');

This one can be a bit trickier.  Basically, you have to find out what your new path is to your installation.  Then, you need to replace the path above with your new path.

Then, look for this line:
define('DIR_FS_SQL_CACHE', '/home/yourname/public_html/shop/cache');

Last thing in the admin configure.php file is this:
Finally, we need to deal with the database settings. Look for these lines:
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'caleberg_racetec');
define('DB_SERVER_PASSWORD', '123racetech456 ');
define('DB_DATABASE', 'caleberg_racetech_zen');

Change them to your new host database settings.

Then, FTP this file up to your new server, replacing the admin/includes/configure.php file.

Then Edit the includes/configure.php File

Look for these lines:

define('HTTP_SERVER', 'http://www.mydomain.com');
define('HTTPS_SERVER', 'https://www.mydomain.com');
define('HTTP_CATALOG_SERVER', 'http://www.mydomain.com');
define('HTTPS_CATALOG_SERVER', 'https://www.mydomain.com');

Just like with the other configure file, replace mydomain.com with the new domain name.

Now look for this line:
define('DIR_FS_CATALOG', '/home/yourname/public_html/shop/');

Again, the change is like the other configure file.

Then, look for this line:
define('DIR_FS_SQL_CACHE', '/home/yourname/public_html/shop/cache');

Finally, we need to deal with the database settings. Look for these lines:
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'caleberg_racetec');
define('DB_SERVER_PASSWORD', '123racetech456 ');
define('DB_DATABASE', 'caleberg_racetech_zen');

Change them to match your new server’s database information.

Upload this file to your new server, replacing the includes/configure.php file.

Last thing to do is to update your session key. The Zen Cart team has created a utility that makes it simple – go here and download it, and follow their instructions: Fix Cache Key tool and instructions.

Magento 1.6 Theming Error Pages

May 1st, 2012

Over the past few years, I’ve had the mixed blessing of working with Magento.  It’s a spectacularly powerful open source ecommerce platform.  As a developer, I get to roll around in the dirty underbelly of this monster, and have learned more than a few things the hard way.

Recently, a client requested that the error page be themed to match the rest of the site.  (As an aside, this same client asked that the admin login be themed earlier.  At that time I told them no, but I’ve decided I’ll take that on soon.  I’m hoping it won’t be too bad!)

So, when I Googled Magento Error Page Theme, I didn’t find any current or relevant results.  They all pertained to older versions of Magento, and were not quite accurate.

To help anyone else out there who would like to theme their Magento Error page, I’ve put this together.  Magento has made it fairly easy, so here goes:

In your Magento installation, you will find a folder called errors.  Open that folder up.

Inside you will find a folder titled “default”. Copy it, and rename the copy to your theme name – for this example, lets use “customtheme”

In the errors folder, you will find several files.  The Magento team has been kind enough to give us a sample local.xml file titled local.xml.sample.  Change this file name to local.xml

Now open the local.xml file you just created, and edit the <skin>default</skin> setting to be the name of your custom folder you created above (in this example, “customtheme”)

Finally, open up the files inside of “customtheme” and edit them to your liking. The code that displays the image can be found in page.phtml, and the styles are in css/styles.css

That’s it. You can test them by browsing to them directly: http://www.example.com/errors/report.php, http://www.example.com/errors/404.php, etc.

Installing Windows 7 on an SSD

February 4th, 2012

(For the 3rd time)

AND preserving all of my existing data

My computer has had an elusive problem since it was first built nearly 2 years ago.  After 6 months of running, it started infrequently blue screening, would not start until after 2-3 tries, and random, strange program crashes.

I replaced the power supply. (No luck).

I always suspected the OZC solid state drive, so I replaced that and the memory (upgraded to 8 gig).  And in the process reinstalled Windows 7 Ultimate, keeping all of my critical data on the other 1T drive, and just “pointed” all the programs to it.

Now, after nearly a year, the same sort of problems are manifesting again.  So, I’ve got a new motherboard (after this, the only thing left is the processor!).  And, in order to do this properly, I will be installing Windows 7. With my user profile and program data on another drive.  Again.

The thing is, I’ve forgotten all the little things that go into it, so this time I’m documenting this completely.

Here’s what I need to do:

1) Install Windows, with the user profile data on my D drive.  To do that, I’m going to follow the instructions in the PDF in this post:  http://www.sevenforums.com/tutorials/124198-user-profiles-create-move-during-windows-7-installation.html

2) Install Firefox.  Easy.  Nothing special.

3) Install Thunderbird.  In order to do this, I need to open the files on the D drive.  To do THAT, I will simply make sure I copy over the profiles.ini and profiles folder from the AppData/Roaming/Thunderbird folder.  I MAY need to edit the profiles.ini folder.  I’ll edit this if so.

Next, since this is my environment for developing web apps, I need to a WAMP setup going:

1) Apache.  For this, as well as PHP and MySQL, I’ll be following the steps in this write-up: http://webdevcodex.com/tutorial-installing-apache2-php5-mysql5-phpmyadmin3-windows-7-vista/ .  Yes, I am aware of xampp, and for beginners it’s great.  However, it does a few things that I don’t want, and besides – I’ve done this enough times now, though, that it’s nothing new, and should take only 30-60 minutes.

2) PHP (see Apache above).

3) MySQL (see Apache above).  This one will require I point MySQL at the data files I want – which is simply a matter of finding the my.ini file inside the mysql installation directory.  In my.ini, find the line referencing datadir, and modify it to match the location of the data files.  It seems as though doing this gave me a strange set of issues last time, so when/if I figure that out, I will post those comments here.

4) Adobe Photoshop CS5.  Nothing challenging here.

5) Eclipse.  It’s awesome.  Simple to install, just a matter of grabbing a few modules for php, etc.

6) EditPad Pro.  For “get in and get out quick” edits, I still love EditPad Pro, so I just have to find my license and install that.

7) Last time I installed and moved iTunes, but since then I’ve completely moved everything iTunes to my Macbook, so I won’t be doing that this time.

 

(Almost) Cross Browser Text-Stroke (Outline Text)

October 24th, 2011

Or how to fake it in most browsers

Super-short, super simple:

Using text-shadow, which is supported across most modern browsers, you can achieve the text-stroke (outlining the text) like so:

a.hover {
text-shadow: -1px -1px 0 #990000,
1px -1px 0 #990000,
-1px 1px 0 #990000,
1px 1px 0 #990000;
}

But, IE9 and earlier stubbornly refuses to participate. So, drop this in:
filter: glow(color=#990000,strength=1);

And, last but not least, add a width and height (to make it work in IE7 and earlier):

a.hover {
width: auto;
height: auto; /* width/height so IE7 and lower will work */
filter: glow(color=black,strength=1);
text-shadow: -1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

And there you have it! Works in IE8 and later!

Example:

Cross Browser Text-Stroke

Free Stuff for Our Clients

July 9th, 2011

My core business is web development, but there’s a lot of accessories that seem to go along with owning a website. So, I’ve invested in some tools and services that I offer my clients, at no extra charge:

Font Libraries

I’ve got the professional subscription to TypeKit (see the article I wrote on it here: Typekit and Google Expand Web-Safe Fonts), which means I can use it on as many websites as I like. What that means for you (if you are one of my clients), is that if you choose, you can use this service on your site at no charge.

E-Mail Testing

One of the things that many people don’t realize is that sending a good looking e-mail is actually MUCH more difficult than making a website look good across multiple browsers. That’s because ever e-mail client displays the e-mail slightly differently. While I USED to test manually in a handful of e-mail clients, the problem was that I could never test in ALL of them effectively – until I started using Email on Acid. This service shows me what the e-mail looks like in over 40 different e-mail clients, including Outlook (all the different versions), Yahoo!, GMail, Hotmail, AOL, and more. This allows me to be sure your e-mail will work properly in the e-mail clients that are important to you.

 

Staging Hosting

While your site is in development, we will host it (with a domain name such as yourname.acgdemo.com).  And when it’s ready to be launched, we’ll move it to it’s permanent home as part of our service.

 

WordPress More Tag Not Working on Custom Blog Template

June 21st, 2011

Many of the themes I create have a custom structure – I set up a template for the blog page, which allows separate sidebars, as well as a variety of other features to be available in the themes.

However, I recently had a request for the “Read More” link to be included in this template (rather than listing the whole post), and was a bit stumped.

So, a quick and easy way to correct this was to add the following to the php before the loop:
global $more; $more = 0;

While you can put it where you like (before the tag), just be sure it is inside php tags somewhere, such as: <?php global $more; $more = 0; ?>

Free Services We Perform

June 1st, 2011

As a part of our full-service approach to every customer, we include many services at no extra charge:

Free “Staging” Hosting

While we’re developing your site, we set you up in a private location, on our servers, so that your live website is not impacted. It allows you to get a full experience of the site, without interrupting your ongoing business.

Set Up New Hosting

We do everything, from soup to nuts, to set your site up on your new host. Setting up databases, moving files, configuring 301 redirects – you name it, it’s included. We take care of these things to save you the frustration.

Free Domain-Name Pointing

Once you’re ready, we point the domain name over to your new hosting. And, BEFORE we do it, we do a….

Careful Migration Analysis

You can’t afford for your e-mail to be down at all, or your site to be down during the migration. We look at everything carefully prior to moving your site, to be sure that your move is seamless and painless.

Lifetime Warranty

The work you get is only as good as the warranty behind it, and we believe that our work should serve you perfectly for as long as you have the site. And while we are diligent about eliminating bugs before they happen, the truth is that they DO happen, and sometimes they aren’t discovered for some time. Whether we finished your project one week ago or 5 years ago, we’ll fix that bug, and we’ll do it quickly, with a smile on our faces.

Beware of WordPress Plugin Bloat

May 26th, 2011

I Love WordPress

WordPress is amazing, there’s no two ways about it. I’m a huge fan, and I’ve therefore found myself doing lots of WordPress development and programming for my clients.

One of the things that makes WordPress so amazing is the wide variety of plugins available. I’ve written many, and I’ve even published a few of my plugins for anyone to use – for free.

The Truth of WordPress (and Life)

And, like all things in life it seems, those very qualities that make something attractive, are also the same qualities that can be annoying.

What is Plugin Bloat?

Many plugins have their own set of css and/or javascript that needs to be loaded for the plugin to work properly. So, they each throw the link to their external files in the header (or footer), so that those css and javascript files are loaded. Now anyone who’s interested knows that every single external file results in whats called a Round Trip (round trip because the site first requests the file, then the file is returned). So, a strategy used to keep site speeds up is to minimize the number of round trips (there are other excellent suggestions in Google’s article about Minimizing Round Trips). I’ve read articles that suggest a maximum of 6 external files. When I develop a website, I try to blend the best of both worlds of engineering the site with good engineering of modular resources, and being conscientious of the speed-costs of round-trips to load external files. Most pages I program will load a maximum of 4-6 external files (2 css stylesheets, and 0-4 javascript files).

WordPress Site Loading Slowly?

With WordPress, even a site that is just mildly-plugged-in will load 10-12 external files, and I’ve seen sites that are heavily plugged loading 20 or more css and javascript files. This has a REAL impact on the load times for the site, which means that the visitor is waiting for the site to load, and many visitors will become impatient if the site they are visiting performs slowly.

How to Avoid Plugin Bloat
(or how to speed up your WordPress site)

Great. Now that you’re aware of it, what do you do about it?

Well, the obvious thing to do is to uninstall any plugins that you don’t absolutely need. Clearly, remove those you aren’t using. Then, prioritize the ones you ARE using, and if at all possible, remove some that are lower priority.

The next thing to do is to be aware of the coding practices used in the plugin. As the Google article I mentioned above discusses, there are other things that can be done to minimize the speed impact of those files. Loading them in the proper order, combining css files, combining javascript files, and combining images all improve the performance. A good plugin will allow you to turn OFF the stylesheet for that plugin, so that you can simply put your styles in your main style.css document. A good plugin will load only ONE css file, will load it properly via the wp_enqueue_script method, and will ONLY load it on pages where the plugin needs it. And the same is true for the javascript files – only one, and only when it needs it (it’s not likely that you’ll be able to turn off the javascript files for a plugin).

But really, the single most effective thing you can do is not be a plugin collector. Remove those plugins you don’t use, then remove those plugins you don’t really need, and then if you can, remove more plugins.

Alternatively, you can always hire a developer who is aware of these things to combine functionality for you. For example, when I develop a theme for my client, I build the functionality I know they will need into the theme. This has the benefit of being able to combine javascript files, combine css files, and to write lean code that only does what the client needs, without a bunch of extra code bloating things up.

LastPass Has Made Me More Productive

May 26th, 2011

I started using LastPass nearly a year ago. At first, it was for the security reasons – it was featured on the Security Now podcast (an excellent resource for anyone in the Web or IT industry).

But since then, I’ve found that it has made me much, much more productive.

First things first: LastPass is a password manager like no other. 100% secure, powerful extras, and best of all – update or add a password on one computer, and it’s added/updated on ALL of your computers (that you have LastPass installed on). It installs as a button on Firefox, IE, and Chrome, and makes navigating this world wide web a much simpler, safer experience.

As a web developer, I’m constantly logging in to various web-sites, control panels, admin dashboards, and so on. And LastPass does so much more than just remember your passwords (securely!) for you, it is smart. I typically can log in to a site with ONE click, or, if it’s a site where I have multiple logins, it takes TWO clicks. Clicks – that’s it. No typing, no looking up passwords or usernames – just a click or two and I’m in.

Plus, LastPass shines when it comes to testing the e-commerce sites that I develop. With it’s built-in “Fill Form” functionality, when I am testing an e-commerce form for the millionth time, I don’t have to hand-type everything – I just fill the form (with three clicks – one on LastPass, then one on “Fill Form”, and then one on the form profile I want to use). Bam! In goes all my name, address, credit card, phone, and any other info I need. Easily saves me hours per month in testing forms!

Did I mention LastPass is free? Even the premium version, for $12 per year, is a screaming bargain. I’m certain that it saves my clients hundreds – maybe thousands of dollars per year.

Close [X]