If you're impatient and don't want to wait for a report from Akamai to be emailed to you, here's a little CSS that will clean up the Site Delivery page nicely.
@media print {
html {
margin-bottom:0;
min-height:auto;
}
#iframeheaderwrapper, #iframefooterwrapper, .navwrapper, #moreoptions, #maininside > form, .helplink {
display:none !important;
}
.iframepage .contentarea {
min-height:auto;
}
.contentarea {
margin-left:0;
}
#moreoptions + * + .shadowwrapper + .shadowwrapper + .shadowwrapper,
#moreoptions + * + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper,
#moreoptions + * + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper + .shadowwrapper {
page-break-before:always !important;
}
} |
Notice the lovely use of adjacent child selectors to ensure proper page breaks. Most browsers don't support nth-child or page-break-inside so statements like following don't help.
.shadowwrapper {
page-break-inside:avoid !important;
}
.shadowinside, .shadowinside2, .titlebox {
page-break-after:avoid !important;
}
.graphbox {
page-break-before:avoid !important;
}
.tableinsidegraphbox, .titleboxinside {
page-break-before:avoid !important;
page-break-after:avoid !important;
} |
The result is a cleanly printing report that doesn't have boxes breaking across pages. If you want to this be the default print settings for Akamai, you can add a site-specific CSS rule in Firefox.
Ever wished you could customize the look and feel of a website you frequently visit, and have the changes stick? Sure you can use the Web Developer
toolbar or Firebug, but that's a pain and also isn't persistent. Overriding settings globally for things like link colors and font has been around for ages, but per-site customizations are a bit newer.
All you need is a text editor (or ChromEdit Plus) and a basic understanding of CSS.
- Create a file called userContent.css in your Firefox profile directory, inside of the chrome directory. On OS X this will be inside of
<home>/Library/Application Support/Firefox/Profiles/>random characters>.default/chrome/ and %appdata%\Mozilla\Firefox\Profiles\<random characters>.default\chrome on Windows. If you've been upgrading since very old versions of Firefox the profile directory might be called default.xxx
- Paste the CSS you want into userContent.css, but wrap it in an @-moz-document rule like this (assuming you want to see a white background on my site).
@-moz-document domain(coreygilmore.com) {
#bd {
background:none;
}
} |
- Save userContent.css, close and re-open Firefox. Each time you edit userContent.css you'll need to quit and restart Firefox. This is obnoxious, but not a high priority for Mozilla given the 5 year old enhancement request.
@-moz-document options
You can chain options also:
@-moz-document url(http://lodoconversations.com/), domain(backupmoxie.com) {
color:red;
} |
Why is this useful?
Some sites are just ugly, but a more common case is fixing printable output. Use the @media rule to specify a list of items that should be hidden, or have more print-friendly colors. You could also hide all advertising blocks or remove the underlining from links.
Another option for per-site custom CSS is to use the Stylish extension which can be thought of as Greasemonkey for CSS.
