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

Schreibe einen Kommentar

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

WordPress.com-Logo

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

Twitter-Bild

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

Facebook-Foto

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: