Serafini Studios

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.

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:

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

• selection_back-link.gif (11.3k)
• selection_back-visited.gif (1.4k)

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

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.

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.

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 https://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.