July 08, 2004

Q and...A
Posted by Dale Franks

To answer everyone's questions at once about the Mozilla deal, rather than reply to several emails and/or comments.

MT CUSTOMIZATION

I have a version of the bookmarklet entry template (bm_entry.tmpl) and the new entry (edit_entry.tmpl) files. Unlike the stock version of MT, the customizations work equally well with Mozilla 1.7 or IE 5 or 6. As many bloggers are aware, the customizations MT provides do not work with Mozilla at all. My templates fix this problem for me.

Due to the different javascript objects the different browsers use, the tools work slightly different in Mozilla and IE. Actually, they work better in Mozilla. If you work in IE, you must select text--or, often, an empty space--in order for the tools to work. In Mozilla, you are not required to select any text. Instead, the tags will be placed at the cursor location.

In addition, I have created MT-Style buttons to add to the regular MT customization buttons to create the following toolbar:


The toolbar implements the following customizations, from left to right:

Bold: Uses the STRONG tag to bold selected text. (The stock version of MT uses the old B tag.)

Italics: Uses the EM tag to apply italics to selected text. (The stock version of MT uses the old I tag.)

Underline: Uses the U tag to underline selected text.

Blockquote: Applies the BLOCKQUOTE tag to selected text.

Special Blockquote: This is a special function I created to hide long excerpts from quoted materials. This uses a javascript function to hide the BLOCKQUOTE until a user unhides it by clicking on the Show Excerpt button. You will be prompted for a unique blockquote ID each time you use this function. Every blockquote must have an ID that uniquely identifies that blockquote. I use a military date-time group (DTG) to ID the blockquotes for which I use it. For example, if I write an entry at 1:39pm on 8 July 2004, the DTG I will use as the blockquote ID would be 200407081339.

Superscript: Since I am prone to using footnotes to some entries, I use this to superscript footnote numbers. It applies the SUP tag to selected text.

Bullets: This applies the initial opening and closing tags for an unordered list (<ul><li> </li></ul>) to selected text.

Image: This will prompt you for an image location, after which it will place an IMG tag into your post within center-aligned P tags:

<p align="center"><img src="imagename.gif" /></p>

The tool assumes that you have an images folder placed in the root level of your web site, and the prompt already contains the "../images/" portion of the URL.

URL: Adds a hyperlink that opens in a new window.

Amazon: This tool prompts you for a book's ISBN, then creates a hyperlink to Amazon.com out of selected text, e.g., you'd highlight the book's title, then click the tool to create the link.

To download the customization package, which is located in a 15KB zip file named "custom.zip", click here. This package contains the toolbar images, the show/hide images for hidden blockquotes and the two template files.

I am not offering any warranty, express or implied, as to the operation of this customization package. It works for me. I think it'll work great for you. But, maybe it won't. Life's a risk. If it doesn't work, well, hey, sorry it didn't work out for you. I'm just trying to be helpful, here. But you're installing and using this package at your own risk.

To install the package, first go into the "/tmpl/cms" folder and make backups of your "bm_entry.tmpl" and "edit_entry.tmpl" files, then replace them with the template files in the zip archive.

Now, put the "show.gif" and "hide.gif" files in the images folder at the root level of your web site.

Finally, because I use the regular MT setup, I have an "mt-static" folder at the root level. The remaining gifs, which are toolbar buttons with names similar to "bold-button.gif" or "italic-button.gif" all go into the "mt-static/images" folder.

The bad news is that if your MT setup is different, you'll have to modify the TMPL files to reflect the appropriate file paths.

Good luck.

THE CSS PROBLEM

Mozilla users saw the web site in an odd, scrunched up way, because even though I changed from DIV tags to a table structure, some CSS styles still had "position: relative" or "width: 60%" or "float: left" attributes. So, I had to remove all the position attributes in order for the page to display properly in the table within Mozilla. IE ignores such attributes when they are used in tables, Mozilla does not. Removing those attributes fixed the problem.

Yes, I know I'm supposed to use DIV tags instead of tables, but I don't like the DIV tag. They don't always display the way you expect, they're tedious to set up, and even in Dreamweaver Studio MX 2004, they don't display the way they'll actually look. Moreover, if you try to see what's going on by looking at the code, it's difficult to tell where things are supposed to appear on the page. Tables are just easier and quicker.

I'm not a purist.

THE FIREFOX (OPERA, SAFARI, ETC.) QUESTION

Firefox, the next generation of Mozilla, is still in beta. I'm not gonna fiddle with it until it's an actual product, assuming I fiddle with it at all. Because it's beta product, how do I know if the display problem is caused by something I'm doing, or a bug in the software for Firefox that hasn't been worked out yet because it's still in beta? Let's see what the real product looks like before we start worrying about how it displays my code.

Presumably, though, Firefox will implement the Netscape/Mozilla way of doing things, which will mean very little fiddling will even be necessary.

As for the rest, well, if you're a Mac user with the Safari browser, and you don't think the site looks right, well, then, suck it up, Apple-boy. And the same goes for Opera users, or the rest of you using niche-market browsers. I don't even have a Mac, so I can't really help Safari users even if I wanted to.

I just can't fiddle around with trying to make everything look proper in every available browser. There just isn't that much time in the day, especially on a project like QandO, which not only doesn't pay, it costs me money.

Sorry, but that's the way it is.

I hope that answers everybody's questions.

Now, I'm open-sourcing the customization code for free, but if you like it, hitting the tip jar wouldn't kill you.

TrackBack

Comments

Now that QandO is Mozilla friendly, I no longer have ANY to EVER open up IE and it's spyware whoring defects again! I switched about two months ago after getting a worm as well as endless popus, but kept IE to ONLY to read QandO.

Thanks......

Posted by: Dave at July 8, 2004 04:58 PM

suck it up, Apple-boy

Heh. Seriously, I love when you post tech stuff. Very, very informative. I had to go into MT3.0D after the upgrade and redo all my customizations. I only added the blockquote then, but now I'll be adding a few more. Thanks Dale.

Posted by: sean at July 8, 2004 09:48 PM

The nice thing about designing for Moz is that you get Safari and Opera for free. Looks great, glad to finally see the CSS fixed.

(works in Safari)

Posted by: Joe Maller at July 8, 2004 10:50 PM

Good stuff, all. Too bad I already switched to WordPress.

Glad to see your page rendering properly in Firefox now, though.

Posted by: James Joyner at July 19, 2004 01:03 PM

Just FYI, MT3 has all the basic buttons for formatting built in on all contemporary browsers.

Posted by: Anil at July 20, 2004 01:34 PM

Post a comment









Remember personal info?