Optimising a Roller theme for printing

Inspired by Phil Harman's Trials with his roller theme I have wanted to create a better hard copy experience for you. I implemented this earlier this morning on my blog's roller files. It has been tested using Opera's print preview on the main weblog page and the comments view of an article and so should work on a view based on a tag, category, or date.

I have implemented a 2nd CSS file. Because my theme's base is so old, it is not conformant to the stylesheet/theme file structures of today's roller so I implemented it as just any old template file. The form lets you know/set the URL. It contains the following rules.

.noPrint
    { display: none; }
.noshow
    { visibility: hidden;}

It is introduced to the weblog using the following code in the weblog template file, in the HEAD section. The assignment in a LINK or STYLE tag with the MEDIA="print" attribute is what applies this rule only when printing.

<LINK HREF="http://blogs.sun.com/DaveLevy/page/print.css"
    TYPE="text/css" REL="stylesheet" MEDIA="print">

I used the 'new file' form to set the url of the new file as above, but named it _printcss; it needs a preceding _ to become invisible to some of the roller macros such as #showBasicNavBar, and the form won't permit a .css suffix. It might be cleverer to call the file _cssprint, so that the css files are all adjacent to each other in an alphabetic sort, which you get on the 'edit templates' form.

I have applied the 'noPrint' rule to the Banner, the webCategoryChooser and Sidebar. I have not used the 'noShow' rule, which I developed to apply to objects that occupy vertical space in a table. The rules are applied to a DIV for the banner, P for the web catgory chooser and TABLE for the sidebar. Another pointer to the fact I must find time to remove the tables from this theme. I am working on it I promise.

tags:

Comments:

Nice. I have stolen it. However while I can get the sidebar to disappear when printing my entries still do not fit the page which rather spoils the point (not entirely though as single page entries now only consume a single page of paper or at least they will when I work out how to get the "post a comment" bit to disappear.

Now how can you get the same things to happens when displaying to a PDA (iPod?)

Posted by Chris Gerhard on December 28, 2008 at 04:39 PM PST #

I am now looking at how to do this for the ipod. I hope that media=screen will help. I am keeping my notes on my bliki at

http://davelevy.dyndns.info/snipsnap/space/Dave/HTML

Your space management problem is probably because your content pane is specified as a proportionate width. I have now got a fixed width blog page, try resizing the browser, and documented how to do it in an article called

http://blogs.sun.com/DaveLevy/entry/about_css_two_column_page

on this blog. This allows me to define the TD element containing the blog articles/entries as width:100%. This ensures that when the fixed width sidebar is display:none the content expands to fill the space. I know this because I had to change my code, which if you check the page source has the old code commented out.

Posted by Dave on December 28, 2008 at 08:51 PM PST #

Post a Comment:
Comments are closed for this entry.
About

DaveLevy

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today