Customized website layout for printing

Sometimes I want to print a web page. Like today 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 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:

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

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

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

Du kommentierst mit Deinem Abmelden / Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: