If you’re like me, you’ve lost your work in Drupal a few times when you’ve previewed an edit and then forgotten to save it. Drupal’s preview page hardly looks any different from a normal display page.
When my boss lost his work because of this preview page confusion, I figured I’d better do something about it, so I updated the FriendsLight theme to highlight preview pages visually. I posted some screen shots on my blog. Or, you can try the new theme out by entering a comment to this post and previewing it.
Unfortunately, Drupal does not provide any information to its themes to tell them they are rendering a preview and not a fully saved message. Fixing this requires changing the Drupal core modules
comment.module, but it’s a straightforward one-line change in each. The code simply adds
$comment->preview flags which can be tested in a theme or theme engine.
If you use Drupal, you’ve probably had this happen: You edit a post, preview it and double check it to make sure it’s perfect, and then come back later to find all your work is gone. Then you remember: You didn’t actually save your post, you just previewed it.
I’ve done it more than a few times. But when my boss had it happen to him on our new in-house Drupal site, I figured I’d better do something about it.
There are two problems here, one architectural and one cosmetic. The architectural problem is that Drupal, like so many web-based systems, does not save your work on the server at all when you are editing and previewing. If you just preview and forget to save, your work is lost.
That would take some design effort to fix, but maybe we can fix the cosmetic problem: Drupal’s preview page looks too much like a normal page view.
Here’s a typical Drupal page:
If you edit the page and preview it, it looks like this:
This hardly looks any different from the regular page display. No wonder it’s easy to forget to save the page.
One would think we could use a little bit of CSS in a Drupal theme to style the preview differently. But in searching the Drupal 4.5.2 and 4.6.0RC code, I couldn’t find any way to do this. Drupal just doesn’t mark the preview in any way that I could find to make use of from CSS.
But if we add one line of code to a couple of Drupal core modules, we can then do a bit of work in the Drupal theme to get this preview page:
With the heavy dashed red border and shaded background, the preview won’t be mistaken for an ordinary display page.
Coding details and an updated version of the FriendsLight theme are on my Drupal test site.
Here’s a treat for Drupal users who support the Markdown and Textile input formats on their sites. The TextBar module adds a formatting toolbar for these input formats to Drupal’s content and comment texarea fields.
To try out the TextBar right now, you can comment on this message. (You don’t need to save your comment unless you want to :-) but you’ll be able to try out the toolbar while editing it.)
You can try it with both the Markdown and Textile input formats (and if you select the Filtered HTML format the toolbar will disappear). The Textile input filter is not actually installed on this site, though, because of a conflict between the Markdown and Textile modules. So you won’t be able to actually post a comment in Textile, but you can see how the TextBar generates Textile codes.
I turned off the page border completely. I think it looks a lot better this way. Also turned off the underline for hover, and replaced the gradient fill in the heading with a solid color. The gradient fill probably looks great on a CRT, but on my ThinkPad it is streaky and distracting.
Will revisit the other issues later.
Here’s the new version. Enjoy!
Inspired by Steven’s efforts, I made a few little changes to his theme and called it FriendsLight. It’s a work in progress, but I like it better than the other Drupal themes I’ve tried.
Drupal is my (current) favorite content management system for building community websites. I keep trying other CMSes but keep coming back to Drupal.
There are always bugs, aren’t there? I noticed that my code to remove the right sidebar for admin and editing pages only works if you use clean URLs. I’ll fix it to work with either kind of URL. Also, the footer text seems too big and bold. Anything else I should fix while I’m at it?
Here is what I changed in FriendsElectric to arrive at FriendsLight:
- Removed all the negative character spacing to make the text easier to read.
- Replaced the graphic margins with a smaller white margin all the way around.
- Moved the footer text into the main column instead of below the left sidebar.
- Made the footer text larger and bold.
- Changed some of the link colors to make them less lipsticky.
- Added a light gray background color when hovering on most links.
- Removed the bullets on the “by Author” and “Author’s blog” lines in each post.
- Moved the “by Author” line up to the top of the post, below the title.
- Fixed a bug where short page content caused the sidebar shading to be lost.
- Lightened the text color of the primary and secondary links.
- Added code to remove the right sidebar on all admin and content creation/editing pages.
If you like these changes, thank Steven Witten for making a theme that is so easy to change. If you don’t like them, blame me. :-)
We got Vonage phone service at home a few weeks ago, and it has been just great. For $27.24/month total cost, we get unlimited calls to the US and Canada, with caller ID, voicemail, and all of the custom calling features the phone company offers and then some. I especially like the simultaneous call forwarding, where incoming calls ring both the Vonage line and another number (such as a cellphone) at the same time, and I can pick up the call on either one. The service works with our existing phones, and we are porting our old landline phone number to Vonage.
I found out about Vonage while shopping for a router at Circuit City. (Don’t laugh, it’s the closest store with a decent selection of computer stuff.) I was going to get another Linksys WRT54G, but then I saw they had the WRT54GP2 combo router and phone interface, so I got that instead. I figured with the router and phone interface combined, I wouldn’t have to worry about any quality of service (QoS) issues.
Big mistake. The first WRT54GP2 wouldn’t work at all. I spent an hour on the phone with Vonage tech support with no success. The replacement worked fine, but there was a problem in the sound quality that I couldn’t stand: a constant background noise similar to the sound a 56K modem makes after it’s connected. I thought, “This is what Vonage sounds like? It stinks!”
I got back on the phone with Vonage hoping they could do something about this, but the problem wasn’t with their network, it was noise being generated inside the unit itself. Even with nothing plugged into the WRT54GP2 but a phone and power, I could hear the noise. Reviewers on Amazon and elsewhere have noted the same problem.
So back this went and I got a regular WRT54G router and a separate PAP2 phone interface. The WRT54G connects to the cable modem as usual, and the PAP2 sits behind it on the LAN side. I updated the WRT54G to the latest firmware, which does support QoS, so I could give priority to the port the PAP2 is plugged into, and we were off and running with fine sound quality and hardly any background noise.
Netflix has a new feature in the works. You will be able to subdivide your account into “profiles” with their own queues and mailing addresses. If you have the typical 3-at-a-time Netflix program (meaning you can have three discs checked out at once), you could split it into three different profiles, each one effectively on a 1-at-a-time program. Or you could have one profile with 2-at-a-time and a second profile with 1-at-a-time.
I got an unintentional sneak preview of this feature when I went to the Change Shipping Address page on Netflix today. It looks like the Related Questions section on this page was accidentally linked to information about the profile feature instead of information about changing your address. In this section is a link to an Assign DVDs page, where you are supposed to be able to split up your queue to your different profiles, but the link doesn’t work.
If Netflix actually does roll this feature out, it will be very cool. But they may want to change the name: They already have something called a “profile” that is completely different (it’s a page where you can publish your reviews and comments).
You can also filter the Netflix site by movie rating for each profile. I’m going to use this to create a separate profile for our kids to log in and see only the family and kid-friendly movies.
Mozilla Firefox is a mighty fine browser right out of the box. If you haven’t tried it out yet, I highly recommend it.
Firefox is also highly customizable. Here are some basic tweaks that make Firefox even better.
The first thing I do when I install Firefox is open the Tools/Options dialog and adjust a few of the settings there. On the General page, I click the Fonts & Colors button and choose better fonts. By default, Firefox uses the mediocre Times New Roman and Arial fonts. Georgia and Verdana are much more readable choices for the Serif and Sans-serif fonts.
I also change both of the Size (pixels) settings to 18, and the Minimum font size to 14. Finally, I change the Display resolution to 120 dpi to match my Windows setting.
Here are my font settings:
These are tuned to look good on the high-density 1600 x 1200 15” display on my ThinkPad. On a lower-density display you may prefer other settings, but in any case you’ll find it worthwhile to spend some time in this dialog.
The Display resolution setting has an unusual user interface. You don’t specify the resolution directly; instead you select Other… in the dropdown combo box, and then another dialog pops up with a line you’re supposed to measure. That’s nifty, but I just wanted to set it to 120 dpi, so I tried various values in the dialog until I found that 6.35 centimeters was the magic number.
By default, Firefox saves all downloaded files on your desktop. I keep a Downloads folder with subfolders for the various programs and files I download. So back in the Options dialog’s Downloads page, I set it to Ask me where to save every file.
In the Advanced page of the Options dialog, I change the Open links from other applications in setting to a new window. The default setting is the most recent tab/window, which I don’t like at all. When I click a link in some other application such as my email client, I don’t want it to replace a website that I had already open, I want a new window.
Firefox’s tabbed browsing is wonderful, BTW. I use it to group related sites together in a single window. For example, I often investigate several topics in parallel. Typically I start by opening a new Firefox window and doing a Google search. Then I hold down the Ctrl key and click on various links from the search results. These pages all open as tabs in that same window.
Then I may have some other topic to research, so I open another new window and repeat the same procedure. So each window contains a set of related search results. It’s a great way to organize related pages, and you can save the entire set of tabs in a window together in a bookmark folder to re-open them as a group later.
Alas, there are still some websites that are hard coded to work only with Internet Explorer, and IE View makes it convenient to get to those sites.
I like the way IE duplicates a window’s current state when you use Ctrl+N to open a new window. Firefox by default opens your home page in a new window when you use Ctrl+N, and if you use Ctrl+T to open a new tab, the new tab is blank.
I like IE’s window cloning, so the Clone Window extension fixes this. I set its Options to New Window command should open: Cloned Window and New Tab command should open: Cloned Tab.
Clone Window isn’t listed on the official Firefox update site, so when you click the installation link it you’ll get a warning at the top of the Firefox window that www.pikey.me.uk is trying to install software on your computer. Click the Edit Options button which will open the Allowed Sites dialog, then click Allow and OK. Finally, click the installation link again to install the Clone Window extension.
Firefox includes a basic Google search (along with several other searches) in its standard toolbar, but it doesn’t have all of the features of the Google toolbar for IE. The Googlebar brings these goodies to Firefox. One thing it doesn’t have is PageRank, but there are a number of variations of the Googlebar that include PageRank.
Like Clone Window, Googlebar isn’t listed on the official Firefox update site yet. The installer is located here (or via the link above). Follow the same procedure described for Clone Window to install it.
There are a lot more extensions than that. Every time I look at one of the Firefox extension sites I see something else I’m tempted to try, such as the nifty Wayback extension which gives you easy access to historical versions of sites from the Internet Archive’s Wayback Machine.
You probably know that Internet Explorer lets you go to a .com site without typing the www. and .com; just enter the domain name without those and hit Ctrl+Enter. Firefox does that too, and it also lets you use Shift+Enter for a .net site and Ctrl+Shift+Enter for a .org site. So, you can type “archive” in the address bar, hit Ctrl+Shift+Enter, and you’re at the Internet Archive.
You can increase the text size of any site (any site) with Ctrl+Plus (you don’t need the Shift key, so I suppose it’s really Ctrl+=, but it’s easier to remember it as Ctrl+Plus), and decrease the text size with Ctrl+Minus.
Ctrl+B opens the handy Bookmarks sidebar. Even if you like to use the Bookmarks menu to access your bookmarks, the sidebar is a great for creating them. To the left of the site address (URL) in the address bar there is an icon for the website you’re viewing. Drag that into the Bookmarks sidebar wherever you want it. (If there’s no icon, the blank spot to the left of http: will work as an icon anyway.)
The rest of the keyboard shortcuts are listed in the Firefox help.
Sorting your bookmarks
Firefox displays its bookmarks in some peculiar order by default. You can easily sort them by name, though.
For the Bookmarks menu, open the menu and right-click on any of the bookmarks, then select Sort by Name.
You can sort the Bookmarks sidebar (Ctrl+B) by opening the separate Bookmarks Manager using Bookmarks/Manage Bookmarks. On the View menu are several sort options which apply to the Bookmarks sidebar as well as the Bookmarks Manager.
Fans of Reason Magazine’s lively Hit & Run blog may have noticed that the text on this blog comes out really tiny in Firefox, because of some unfortunate font choices in in the style sheets used on this site. This is likely to improve now that some of the Reason staffers have switched to Firefox.
But there’s no need to wait for Reason to fix their site. The font settings I listed above will fix most of the problems at Hit & Run. The one remaining problem is that the type used for comment text is still too small. It’s easy enough to fix this with Ctrl+Plus, but a better fix is to override Reason’s style sheet. If you don’t mind a bit of text editing, this is easy to do.
First, you need to find the “profile” folder for Firefox. On a Windows 2000 or XP system, this is located in:
C:\Documents and Settings\your name\Application Data\Mozilla\Firefox\Profiles
That’s a hidden folder, so you’ll need to use Tools/Options on the Windows Explorer folder window and go to the View tab, then turn on the Show hidden files and folders option.
On a Windows 98 or Windows Me system, the Firefox profile is likely to be in:
That location may be different if you’ve enabled multi-user settings in the Users control panel. If you don’t find it, use Start/Find/Files or Folders to search for the Firefox folder.
Mozilla\Firefox\Profiles folder on your system, you’ll see a folder with a name like
v7qf3bzn.default. This is your actual Firefox profile folder. Firefox uses randomized names like this to help protect your profile against intruders.
Inside that folder is a folder called
chrome. This is where you can do some interesting customization. In a fresh Firefox installation, there are two files here with a few examples of what you can do.
userChrome-example.css is for customizing the “chrome”, things like the menu bar, toolbars, and such.
userContent-example.css is about the content of a web page, and it’s the one we’re interested in here.
userContent.css and then edit that new file. Add this text to the end and save the file:
Now close all Firefox browser windows, re-open Firefox and visit Hit & Run again. The comment text will display in the more readable Georgia font at a decent size, instead of the small Times font it uses by default.
One limitation here is that changes in
userChrome.css apply to all sites that happen to use the same style tag, so this may affect other sites besides the one you want to customize. But it can still be very useful for sites like this.
Update: added installation information for Clone Window and Googlebar, and bookmark sorting information.
Looking at political party websites in Firefox tells me a little something about each party. (Click images for full size versions.)
The Republicans may be able to pack two grammatical errors into one sentence (“In 2000, less than 17,194 votes decided five states, and 55 Electoral College votes.”), but they have a big tent and Firefox visitors are welcome:
Popups? We don’t need no steenkin’ popups. And the scrolling banner at the top is awfully annoying, but it offers an interesting optical illusion: Stare at the live GOP site for 30 seconds or so, and then look at the screen shot of the same site. Your eyes will tell you that the screen shot has a scrolling banner too, moving the opposite direction.
The Libertarians may have a very small tent, but it’s a friendly one:
No problems with Firefox here, and no scrolling banner to play tricks on your eyes.
How about the Democrats?
Well! We are not using an approved browser, are we? Firefox users are not welcome here. You will use IE or you will use nothing.
Does it get better if we scroll down the page?
Oh. That’s easy to read, isn’t it?
One of the reasons I switched to Firefox is that I can override the font size of any website by simply using the Ctrl+Plus and Ctrl+Minus keys. What about the folks who are still using IE? Can they change the font size of a website? IE does have a Text Size button, but it only works for sites that are gracious enough to avoid absolute font sizes.
What if an IE user needs really big text because of poor vision? Do these sites allow it? Let’s take a look at each one in IE with the Text Size cranked all the way up. (No large versions this time, since the point is to show how the sites might look to someone who can’t see well.)
It is nice to see that the Democratic Party actually does have a website (as long as you’re using their approved browser). And why should you be able to choose your own font size, anyway? The Democrats, just like the Republicans, have already picked out the font that they know is best for you.
True to their philosophy, the Libertarian Party is the only one that lets you pick your own font size instead of being stuck with theirs.
(Where’s Ralph? Sorry, I got too tired to make that many screen shots. Summary: He’s Firefox-friendly, but just like the Demos and Repos, he knows what font size is best.)
How many clocks did you have to change today? This year I’m pretty lucky. I only had to change 19.
Of course, I’ll probably find a few more in the next few days.
Here’s the list so far, for our family of four:
- Answering machine
- Two wall clocks
- Four cameras
- Sony reverb (yes, it has a clock)
- Two thermostats
- Three alarm clocks
- Fax machine
- Sprinkler system
- Two cars
Some years have been worse. I recall changing 28 clocks about ten years ago. That was before my computers adjusted themselves for daylight time. For a while that made things even worse, though: I was dual booting Windows 95 and NT, and when the time changed, both OSes decided to adjust the time for me. So I was an hour off in the wrong direction.
Now I do all my software testing in VMware virtual machines, and I’ve given up on putting those on daylight time. I let them run on standard time all year around, otherwise it gets too annoying. Revert to a snapshot and it will want to adjust the time all over again.
I do have one atomic clock that set itself back to standard time automatically. But my daughters have atomic clocks that didn’t, and I don’t see any way to change them unless I turn off the radio synchronization and set them manually. Must research this.
I can’t wait for spring, when we do it all over again, and probably get to church an hour late.