Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
How do your printed pages look? When we saw that ours were horrid, Scott whipped the print.css file into shape. Read about the pros and cons of using CSS to make pretty print pages.
Using CSS to Format the Printed Page
Back in my office-working days, I knew a guy named Clint, who didn't like reading his email on the computer screen. He'd print each email, every morning, read through the print-outs, file the important messages and deep-six the others. I wonder if he still does that?
Who really reads online stuff, offline? Not me!
But who am I to criticize and judge others in their efforts at deforestation, eh? Isn't the Internet is supposed to be accessible to all - even folks who prefer reading online content, offline?
For accessibility reasons, innate curiosity and the shocking discovery that our printed pages looked horrible, I decided to spend some time and pretty them up. If you think visitors might want to print your blog articles (for reference or offline reading), then think about using Cascading Style Sheets to format the page.
Read on to see what a difference it made to our pages...
AstonishMe! brings you "Google Spell-Check Plugin", adding spell-checking capabilities to your b2evolution (v1.0+) posts and comment forms. It uses Google's API and has many similar features to the Gmail spell-checker. It supports 8 different languages. Learn more.
An AstonishMe! Public Release
If you want to get a really nifty spell checker for your b2evolution blog, then look no further than AstonishMe!
Now publicly available, our "Google Spell-Check Plug-in" is a back-office and comment form spell-checker, which uses the Google Spell-Check API. If you use Gmail, then you're already familiar with the interface, as ours has the same look-and-feel and uses the same dictionary. It's a piece of cake to install, easy as pie to use and makes for a delicious add-on to your b2evolution blog.
To learn more about "Google Spell-Check" and obtain your copy, continue on ...
SiteGround Suspends Randsco.com
We had been experiencing FTP problems at our hosting service, SiteGround, for several days. I opened a support ticket and was working at solving the problem (automatic disconnection after less than a minute of inactivity) when, all of a sudden, our site went down.
This has happened before and service is usually restored in a ... matter of minutes. As usual, I spot checked site access at Alertra (checking availability from a half-a-dozen world-wide locations). Nothing but errors. It was not our ISP. Randsco was definitely down.
I submitted a trouble ticket and received the usual prompt reply from SiteGround, only a few minutes later. The contents were unexpected:
Your account [is] currently limited. I will now forward your ticket to our abuse department.
LOL ... my name isn't "Alertra"! What does "limited" mean? The Abuse department?
Our site remained down, as I patiently waited for word from SiteGround. A half-hour later, I received the following email/ticket entitled "Abuse".
During the last 24 hours your website ... overloaded the server several times ... dangerous for the other users ... transferring your website to a special server ... will take up to 24 hours ... website will remain accessible ... but will [have] some limitations ... may result in occasional server error messages. ... will NOT experience any downtime ... Once the transfer is completed you will be notified ...
And just like that, Randsco was off the 'net.
If you have a shared hosting account, or have shared hosting and your site has overloaded a server, you will be interested to read about our experience and "post mortem" of the event ...
Introducing Photo-caption Zoom (version 3)! If you liked earlier versions, you'll love PZ3. The IE z-index bug is squashed, no more image resizing, choose thumb sizes 'on-the-fly' & do it with 70% less code. The easiest PZ ever. This version does more, with much less.
EZ PZ3 - Better, easier, lighter.
Images in this article utilize the newest, third version of a pure-CSS image zooming technique I've named "Photo-caption Zoom" ( or PZ3 ). When you move your mouse over an image, it will 'zoom' to reveal a larger image with a caption. There are a variety of pure-CSS image zooming methods, but this was the first to combine an image with a caption. It saves page real estate, it looks nice and this third version is more robust and easier to use than ever.
Although the end results of PZ3 appear identical to the last version (PZ2), the underlying CSS methodology is completely different! PZ3 offers significant improvements over PZ2 and does it with nearly 70% less code. It does more, with a lot less!
PZ3 satisfies most everything on my original wish list for a photo-caption solution. This version is the culmination of over a year's-worth of trial & error, of CSS/XHTML learning & experimentation and of countless hours searching the Internet for existing solutions. The results of PZ3 speak for themselves.
- PZ HZtory -
Photo-caption Zoom is a pure-CSS, xhtml-valid technique that I developed over a year ago. It zooms a thumbnail image on mouseover, showing a larger picture with a caption. It uses a single, simple image for both the thumbnail and zoom. It's designed to be easily deployed.
- PZ1 - Jan 31, 2005: The original. It rearranges page flow, making room for the zoomed image and its caption. (i.e., one can still read the document when the image is zoomed).
- PZ2 - Jun 15, 2005: Version 2. The zoomed image overlays the document, which means that page elements no longer shift or migrate. (A IE z-index bug is documented and a work-a-round is achieved, which limits usage).
- PZ3 - Apr 11, 2006: This third version supercedes its predecessor - PZ2. The IE z-index bug that limits PZ2 has been fixed, it's 70% lighter (less code), and pixel-perfect thumb/zoom sizes are defined in the HTML. Basically, it rocks! It's so easy, I'm calling it EZ-PZ.
- PZ3 - 30-Jun-2008: Version numbers added (dated version numbers, starting with "v080630", have been added to the CSS file, so users can tell at a glance if they have the latest CSS/XHTML code)
CSS corrected to allow correct toggling of the caption (Cap|noCap option)
If you're new to the Photo-caption Zoom technique, I recommend you begin here, which has links to all the Photo-caption Zoom pages on this website and covers 9 different methods, in detail. (Even those that I investigated early on). Each has cut'n-paste CSS/XHTML code you can use on your own pages.
Collaborating to develop PZ3 proves that two heads are better than one. This code resulted from batting it back and forth, across the Atlantic Ocean, to my U.K. business partner and mate, ¥åßßå. I owe him a deep debt of gratitude for his efforts and the time he spent helping me. Thanks ¥åßßå!
(Items in RED are enhancements over PZ2)
• Valid XHTML code
• Cross-browser/Cross-platform compliant
• Single image for both thumb/zoom
• Nice-looking (customizable) caption
• Overlays document (no layout shifting)
• IE z-index bug: SQUASHED!
• No image resizing necessary!
• Thumb sizes defined on the fly!
• Toggle borders on|off
• Toggle link cursor on|off
• Toggle caption on|off
• Code reduced by nearly 70%
• Quirks-mode support
• 30-Jun-2008 - Version numbers added
• Easiest PZ ever - EZ-PZ!
The code is cross-browser/platform compatible: PC Browsers tested - MSIE (IE6, IE7 & IE8), Firefox (v1.5, v2.0 & v3.x), Netscape (v8 & v9), & Opera (v8.x, v9.02§, v9.x); winSafari; Google Chrome (v1 & v2); Flock (v1 & v2); Mac Browsers tested - Firefox, Opera and Safari (v2.x & v3.x).
To date, there have been no reported browser problems. Please comment on viewbility if you're using a different [O/S|browser] combination.
To get the code and learn more about PZ3, please continue ...
"Latest News" - Site Feature Added
Blogging isn't as easy as one might imagine. (Of course, nothing is easy when you're a perfectionist) - cough, cough - but even still, it does take TIME to cobble blog entries together. You need to find a topic worthy of an entry, then get images organized, edited, optimized and transferred. Correct spelling and XHTML coding count ... which takes additional time. Links need to be added and checked. The blog entry length must be "just so" (not too long to bore anyone, but long enough to wrap around how ever many photos there are). Having a 'liquid layout' also means making sure the entry doesn't 'break' in super wide screens (high resolution) and still works for 800x600 resolution. XHTML validation, special CSS coding ... all these things must be taken care of. Plus, I like to add special formatting that (I think) helps make each entry unique and (hopefully) visually appealing and interesting.
Whew! It's a lot of work!
So, I've created a "Randsco News" icon in the Site Tools section, in the sidebar. (It's the newspaper - 3rd row down in the Site Tools section, first icon on the left).
It links to a special blog entry, called "news", which contains the absolute LATEST news. Stuff that happened today and yesterday - though you can also paw backward in time too. Each entry is brief and presently, none contain photos (though I'm thinking of adding some, but just not sure if I want to). The goal is to keep is short and simple, but UP-TO-DATE. Rather than having to spend an hour or more typing up a complete blog entry, I can just add a paragraph to the existing "news" one and then blammo ... it's been added.
If you want the lasted scoop ... then this is the place to go. Not everything posted in "news" will make it into a blog entry, so it will also contain information above and beyond what's posted on the front page.
I've also coded it so that it's easy to see if we have any 'breaking news'. If, within the past 24-hours, anything has been added to the news page, the newspaper icon will be animated. If there hasn't been any news with the past 24 hours, the newspaper icon will be static. Here's an example:
We hope you find it useful.