Example of working print.css file
Very often developers create the most elaborate websites and user interfaces (UI). However, it the excitement of creating fantastic looking web pages, they neglect to think about the printed page.
Whilst print is not major factor for a lot of websites, for others it can be a major design consideration.
At the very least, what we’re trying to avoid is forcing people to print out heavy images, page breaks that don’t work on printed pages, links that appear on the page as urls, incorrect page widths, unnecessary headers, footers & navigation bars.
Here is a working example that will help set the basic print rules and which can be used as a starting block for rules that are relevant to individual websites.
/**
* Print Stylesheet fuer Deinewebsite.de
* @version 1.0
* @lastmodified 16.06.2016
*/
@media print {
/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
#content, #page {
width: 100%;
margin: 0;
float: none;
}
/** Seitenränder einstellen */
@page { margin: 2cm }
/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
/* Das spart Tinte */
body {
font: 13pt Georgia, “Times New Roman”, Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
}
h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}
/* Alle Seitenumbrüche definieren */
a {
page-break-inside:avoid
}
blockquote {
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
/* Linkfarbe und Linkverhalten darstellen */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a {
page-break-inside:avoid
}
a[href^=http]:after {
content:” <” attr(href) “> “;
}
$a:after > img {
content: “”;
}
article a[href^=”#”]:after {
content: “”;
}
a:not(:local-link):after {
content:” <” attr(href) “> “;
}
/**
* Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
*/
.entry iframe, ins {
display: none;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
line-height: 0pt !important;
white-space: nowrap;
}
.embed-youtube, .embed-responsive {
position: absolute;
height: 0;
overflow: hidden;
}
/* Unnötige Elemente ausblenden für den Druck */
#header-widgets, nav, aside.mashsb-container,
.sidebar, .mashshare-top, .mashshare-bottom,
.content-ads, .make-comment, .author-bio,
.heading, .related-posts, #decomments-form-add-comment,
#breadcrumbs, #footer, .post-byline, .meta-single,
.site-title img, .post-tags, .readability
{
display: none;
}
/* Benutzerdefinierte Nachrichten vor und nach dem Inhalt einfügen */
.entry:after {
content: “\ Alle Rechte vorbehalten. (c) 2014 – 2016 TechBrain – techbrain.de”;
color: #999 !important;
font-size: 1em;
padding-top: 30px;
}
#header:before {
content: “\ Vielen herzlichen Dank für das Ausdrucken unseres Artikels. Wir hoffen, dass auch andere Artikel von uns Ihr Interesse wecken können.”;
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;
}
/* Wichtige Elemente definieren */
p, address, li, dt, dd, blockquote {
font-size: 100%
}
/* Zeichensatz fuer Code Beispiele */
code, pre { font-family: “Courier New”, Courier, mono}
ul, ol {
list-style: square; margin-left: 18pt;
margin-bottom: 20pt;
}
li {
line-height: 1.6em;
}
}
Adwords (1)
Branding (13)
- Branding 101
- Why we don’t offer standard prices
- Graphic Design Brisbane
- How much should we spend on corporate rebrand
- How to choose a domain name
- Review of latest free web safe Google fonts
- Logo Design
- Logo Design Brisbane
- Is Company Branding Important to Logo Design?
- Questions to consider before building your website.
- Redesigning logos the right way
- Small business branding or Product branding ?
- Why redesign a website
CMS (3)
CSS (6)
Graphic Design (6)
Javascript (1)
PHP (3)
SEO (5)
tech support (5)
Web Design (10)
- Difference between fluid, reponsive & adaptive design
- Why we don’t offer standard prices
- Example of working print.css file
- Graphic design is more than just logos
- Why pay to maintain my website
- Questions to consider before building your website.
- Sample reset css file for web project
- WordPress – 5 reasons why you should use it
- Why redesign a website
- WordPress – Why not to use it.
Web Development (10)
- How risky are WordPress plugins
- Displaying dates using PHP
- jquery conflicts – how to avoid
- Modify the admin menu bar in WordPress
- Why pay to maintain my website
- Questions to consider before building your website.
- Recent updates to Google search results explained
- Sample reset css file for web project
- Why upgrade WordPress if it’s working
- Use Transient to speed up WordPress
Wordpress (17)
- How risky are WordPress plugins
- Bootstrap & Less – compile online
- How important is https for my website
- Create content that will be read
- Modify the admin menu bar in WordPress
- Why upgrade WordPress if it’s working
- Use Transient to speed up WordPress
- WordPress – 5 reasons why you should use it
- WordPress – adding Google Fonts
- WordPress – CF7 – select fields – CPT
- WordPress – what plugins should developers use
- WordPress – Tinymce extra plugins
- WordPress – Why not to use it.
- WordPress working with ACF Pro
- WordPress – working with cookies – Javascript
- WordPress – working with cookies – PHP
- Displaying categories in sidebar using javascript, jquery & php