Mesmer Lab » html

Wordpress Plugin: WP-Table Reloaded

Jason — Thu, 22 Oct 2009 19:51:46 +0000

So I wanted to have a table with zebra stripes in a Wordpress installation. I found a quick and full-featured plugin that allows the stripes, plus so much more.

WP-Table Reloaded will let you import a table from a CSV, HTML or XML file. You can enter the cell data directly into the admin page. You can swap column or row order with minimal effort. You can hide or show columns or rows.

Extra Features

But then there are extra features that really make this plugin shine.

Alternating row colors: Every second row will have an alternating background color.
Use Table Headline: The first row of your table will use the tag.
Print Table Name: The Table Name will be written above the table in a
tag.
Print Table Description: The Table Description will be written under the table.
Use Tablesorter: You may sort a table using the Tablesorter-jQuery-Plugin.

I’m currently using this plugin on a website for a sprinkler company in Houston, Texas. Everything you see on the page is pretty much stock settings. There is one table for the service fees, since I didn’t want zebra stripes on a 2-row table. Then another table for the rest of the services.

I just wanted to give a quick nod to this well-rounded and very functional Wordpress plugin for implementing HTML tables. Thanks go to the author of this plugin. (Apparently this is his first WP plugin!)

Related Blogs

Create a New Email Template in Magento

Jason — Mon, 29 Jun 2009 21:26:30 +0000

Emails are a big part of the online world, so it follows that a professional ecommerce site should have professional email templates. A full-featured ecommerce solution is what you’ll find with Magento, an open source solution for selling products online. Magento provides a system to keep the more basic contact times with your visitors smooth and carefree. With open source comes great customization (and complexity).

This tutorial will guide you through the steps to create a new email template in Magento. Specifically, you’ll create the email that your visitors will receive when they sign up for your newsletter.

Requirements

Access to your website’s Magento admin panel
A little knowledge of how HTML emails work
This tutorial

Step One: Create the Template

I said you need to know a little about how to create an HTML email, but since Magento comes with many templates you can kind of get away without the knowledge at first.

Log into your admin panel and navigate to System > Transactional Emails.
Click the ‘Add New Template’ button on the top right.
Choose one of the default templates from the first drop down box.

Transactional Emails" title="System > Transactional Emails" width="300" height="222" class="alignnone size-medium wp-image-571 postimage" />In this tutorial we’ll be using the ‘Newsletter subscription confirmation’ template. This would typically be the first email your visitors would receive so I figured it would be a good choice. Choose the locale of course, then click the ‘Load Template’ button.

This will load the appropriate template which in this example is located in the /app/code/locale/en_US/template/email/ directory. The filename is ‘account_new_confirmation.html’. As you can see, it is very easy to alter the templates for international support. You can leave most of the template as they have presented it. I’ve changed the email addresses, the phone number, the store name and the source URL for the logo.

Back in the admin panel, give your template a name. To keep things simple, I’ve used ‘Newsletter Subscription Confirmation’ for the name and the subject. Now here’s where you can modify the template to suit your specific needs. One of the key features of Magento is the ability to have multiple stores within one installation. Therefore you can load the same template in the first half of this step, then modify it for each store in the second half.

Click the ‘Save Template’ button on the top right and you’ll see your new template in the list of Transactional Emails. Now lets move on to implementing it into your site.

Step Two: Using Your Template

From the top horizontal menu, navigate to System > Configuration.

Newsletter" title="Customers > Newsletter" width="300" height="192" class="alignnone size-medium wp-image-564 postimage" />Scroll down to the Customers section on the left menu and select Newsletter.

In the drop down box for Confirmation Email Template, choose the new template you just created. The option just above it should be set to Customer Support. Click the ‘Save Config’ button on the top right and you’re done.

Step Three: Testing Your Template

Now navigate to the public version of your site to the Newsletter box.

Type in your email and click ‘Subscribe’. Sync your email client and you should see a new email from ‘[Site Name] – Customer Support’ with the subject of ‘Newsletter subscription confirmation’.

Check all the text, make sure the logo shows up and the email addresses and phone number is correct. Make any changes back in the admin at System > Transactional Emails (second image in step one).

Conclusion

Magento Commerce, the open source ecommerce solution, can be very intimidating to those of us coming from Wordpress. Its configuration options are very intricate, allowing you to customize designs, layouts and almost every other piece of the site on a per-page basis. Hopefully I’ve shared some useful knowledge on how to create a new email template in Magento.

Make sure you test your emails extensively. They are acting as your host/hostess, concierge and valet. You want them to be as professional as possible. No typos, easily readable text, and please, be sure to quadruple check your email address and phone number.

A key nugget to remember about HTML emails is you have to put your CSS styling inline. You can’t reference an external CSS file or even have it in the HEAD. All HTML emails are contained within the BODY tag. Also, don’t even try using DIVs for your layout. Go old school. Bring out the TABLE tag and party like its 1999. Just look at the example templates they have to get a feel of what is or isn’t acceptable. If there’s enough interest, I’ll write a post on my experience with HTML emails.

I will be adding more quick tutorials like this for Magento as I wade through their user guide and forum. Please feel free to comment or ask a question in the form below.

FireScope: The SitePoint Reference Tool for Firebug

Jason — Wed, 28 Jan 2009 11:44:57 +0000

SitePoint has released FireScope, a browser plugin for Firefox that puts an HTML and CSS reference only a click away.

After installation, just do the typical ‘inspect element’ action and you’ll see the new ‘Reference’ tab. Click the tab and you’ll see information about the element you chose plus any attributes that are defined for that element. You’ll see information about the element, what browsers support it, and a ‘more’ link to the reference section on SitePoint’s website.

I have always respected SitePoint for being a leader in almost everything related to web development. They have published books on a wide variety of internet technologies and continually push out new content. I’m sure this new plugin will help spread their knowledge to more web developers.