Blog

Blazing Products, Inc. New Website Launched

The new site for Blazing Products, Inc. is launched.

Formerly known as Tom King Harmony Products, Inc. (TKHP) we helped craft a new identity system for the company.

Blazing Products logo

After extensive consultation, TKHP decided to change their company name, website, and packaging to reflect their core value - helping people in the irrigation and landscape lighting industries install faster. Thus was Blazing Products, Inc. born.

The new site is now live and includes their new logo, layout and content.

Evolution of Tom King Harmony Products - Blazing Products, Inc.

http://www.blazingproducts.com

How to: Add an “Edit” link to each post in WordPress

This hack adds an “Edit” link next to each entry if you’ve logged in and the cookie still exists on your computer. This is not the ultimate security, since the real security functions are still provided by b2verifauth.php, but it does hide the link from users who are not logged in.

To add this to your WordPress site:

1. Add the following code to your b2template.functions.php in the Post tags section:


/* Hack by Gabriel Serafini to add an "Edit" tag by */
/* each post if you're logged in */
function edit_this(){
    global $id, $HTTP_COOKIE_VARS;
    if (!empty($HTTP_COOKIE_VARS["wordpressuser"])) {
        $output = ‘- <a href=”/blog/wp-admin/wp-post.php?action=edit&post=’.$id.’” title=”Edit this post”>Edit</a>’;
        echo $output;
    }
}

2. Add the following code to your blog index page (usually index.php) where you want your edit tag to live:


<?php edit_this() ?>

I’ve placed mine next to the …posted in Category by Gabriel at … links at the bottom of each post.

The final result is a nice link that lets you instantly edit any post on your site, which is very nice if you tend to like to edit your posts on a regular basis.

Upgraded to WordPress .73 from CVS

Just upgraded to WordPress version .73 mainly because of the search-engine friendlier urls it now has built in.

Instead of the archived post links being in the form /blog/posts/18 they are now written as /blog/archives/2003/10/24/google-adwords-article.

Thanks for the great work, Matt! :)

I need to work with the calendar again to get it to follow the same structure.

Still need to re-do the archive links from within the calendar. Might try to submit to CVS. Possibly.

How to: Add “marching ants” Photoshop selection style to your links

Something I’ve thought could be interesting for a while now is a way of using CSS to create a link style that mimics a Photoshop selection (commonly referred to as marching ants).

I finally created the graphics and figured out the code. It adds just under 13k to the size of your pages (on the first load). After that it is cached and should not add any additional load on your pages.

Here is a sample link: selection_back-link.gif

Before you click on the link, the text should have a moving border similar to a Photoshop selection and a yellow background. After you click the link, the text should lose the yellow background and you should see the dashed border stopped and greyed out. The hover state should be a slightly darker orange color.

Want to use this effect on your site?

1. Add the following style information to your style sheet:


/* Style adding "marching ants" selection effect to links */
/* CSS and graphics by Serafini Studios - http://www.serafinistudios.com/ */
a.ants {background:#ffffcc url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;
padding-top:2px;padding-left:4px;padding-right:0px;padding-bottom:0px;}
a.ants span {background:#ffffcc url(/images/selection_back-link.gif) bottom right no-repeat;
padding-top:0px;padding-left:0px;padding-right:4px;padding-bottom:2px;}
a.ants:visited {background:#ffffff url(/images/selection_back-visited.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:visited span {background:#ffffff url(/images/selection_back-visited.gif) bottom right no-repeat;}
a.ants:hover {background:#ffcc66 url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:hover span {background:#ffcc66 url(/images/selection_back-link.gif) bottom right
no-repeat;}
a.ants:active {background:#ffcccc url(/images/selection_back-link.gif) top left no-repeat;text-decoration:none;color:#000000;}
a.ants:active span {background:#ffcccc url(/images/selection_back-link.gif) bottom right
no-repeat;}

2. Upload these 2 graphics to your /images/ directory:

3. To make the ants march around your link, use the following code:

<a href="http://yourlinkhere/" class="ants" title="Link title here"><span>Linked text</span></a>

Explanation:
There are two inline elements at play here - the <a> and the <span> tags. By applying a background:url(...) style to each and using the positioning elements (top left and bottom right) we are able to position the top left of the animated marching ants graphic behind the <a> tag and the bottom right of the graphic in the background of the <span> tag.

Known Limitations:
If you are linking more than one line of text, the effect gets screwed up. Also, different browsers will render this in slightly different ways.

Credits:
If you use this code, I ask that you add a comment below and indicate the URL where you are using the code. Also, if you have any suggestions for improving this, let me know, or if you find it breaks horribly in any given browser add a comment. Thanks.

2004 Principia College Reunion Artwork Completed

Reunion logo

We finished the artwork for the 2004 Principia College Reunion project the other day. The object was to go for a kind of retro celebration feel - a litttle circus, a little carnival, basically a fun party concept. The curve of the drapes is also meant to evoke the St. Louis Arch.

Oval version of logo

Oval version of the logo. Adds a starburst to the background.

Tent graphic

This tent graphic is to be used as a fun part of the identity for the Reunion Weekend.

Blue and Gold penants

Blue and Gold penants (school colors)

All artwork was created in Illustrator. All images © 2003 Serafini Studios.

New navigation template system completed

I just finished last night the new navigation and template system for this site. It is coded from scratch for the navigation style above — a main level and sub navigation links below.

The template for the site is now also all controlled by one file, so making updates should be easy. Adding a new page means copying a new PHP file, adding the new content, then updating the navigation template to include a reference to the page.

I’ll probably post the PHP code for this soon. It doesn’t require any database or special functionality, other than a familiarity with how PHP works.

Google Adwords Article

Just finished writing an article on Google Adwords for Midwest Technology Journal for the November issue. It is mostly a friendly introduction to how to use their system to get ads up on Google in five minutes.

Now using mod_rewrite for blog urls

After reading a number of sites that discussed the use of Apache mod_rewrite I finally decided that it was time to try implementing this powerful technology.

I found the simple explanation given at www.scribbling.net was very helpful. I used the supplied rules to implement mod_rewrite for this blog.

Here is the .htaccess file currently being used:

RewriteEngine On
RewriteRule ^posts/(.*)/(.*)$ index.php?p=$1&c=$2
RewriteRule ^posts/(.*)$ index.php?p=$1
RewriteRule ^topics/(.*)$ index.php?cat=$1
RewriteRule ^archives/(.*)$ index.php?m=$1

I did end up hacking WordPress a bit to get it to write out my desired url format on its links. It looks like the current code has the option to do “search engine friendly” urls, but it is currently commented out. So I did a bit of searching for the places where the tags are written out and made some changes. :)

Eventually maybe I’ll work on the code some more so that the urls can turn into http://www.serafinistudios.com/blog/this-post-is-titled-something format (even more search-engine-friendly).

Update
Just upgraded to the latest version in CVS of WordPress, and thanks to Matt have this functionality now built in. See this post for more details.

New version of WordPress released.

The final .72 version of WordPress has been released and is now available for download.

Google Adwords Rock.

Google Adwords logo

We’ve been using Google Adwords since August 24, 2003 to advertise author visits for Kristin and have been thrilled with the results.

Advertising results (as of October 10, 2003) for XyzAnt.com
Total clicks: 304
Total impressions: 77,045
Click-through rate: 0.3%
Average cost per click: $0.23
Total Cost: $71.17

Kristin’s gotten a lot of author visit requests as a result of this advertising, and it seems that this is really going to help develop her speaking career as well as help promote her books.