Customized website layout for printing

Sometimes I want to print a web page. Like today http://www.apache.org/dev/release.html because there are new release instructions coming from infrastructure@apache. But on the print I dont need a navigation bar and that page has two of them. What to do?

In former times I did a copy & paste into Word and printed that …. horrible!

With Firefox it’s much easier: you could modify the DOM and delete all the stuff you dont want to have or you add a custom css.

For some pages I wrote a css I could add via Firefox‘ contextmenu „WebDeveloper > CSS > Add User Stylesheet“. For that page I had written

.navleft, .navright
    display: none;
}

and that’s all.

Oh, I remember I had done the same for eclipse.org and submitted a patch (which was applied) … cant find the number at the moment … It was just that snippet of css:

@media print {
    #header, #topnav, #topnavsep, #leftcol {
        display: none;
    }
}

If you want to have more, I have some for other sites:

// weblogs.java.net
.topbar, #toptabs, #navcolumn, .footer, #powered,  table[cellspacing="10"], #leftcol {
    display: none;
}

// smartgroups.com
table {
    display: none;
}

I wrote about a second possibility: deleting DOM-elements. For that I uses the Aardvark plugin. Very easy, very nice, very useful …

Explore posts in the same categories: en