This will therefore reduce your ink expenditure by 50% when printing your web page. The result is a little gray :) but our planet and your budget are good.
Solution put 50% opacity in media print (css) on your boby page.
Here the print css code to add in your css work or your favorite CMS theme.
@media print {
body {
background: #fff none !important;
color: #000 ;
opacity: 0.5 !important;
}
Here the print css code to add to your CSS style files of your WordPress :
@media print {
.wp-block-navigation__container:only-child, .wp-block-page-list:only-child {
}
.entry-content {
font-size: 14pt;
line-height: 1.6em;
}
.entry-title {
font-size: 16pt;
}
body {
background: #fff none !important;
color: #000 ;
opacity: 0.5;
}
.wp-block-post-title
{
font-size: 16px;
}
#wrapper {
clear: both !important;
display: block !important;
float: none !important;
position: relative !important;
}
.wp-block-post-title {
box-sizing: border-box;
word-break: break-word;
font-size:14pt;
}
h1, .headingclass {
font-size: 14px;
}
#header {
border-bottom: 2pt solid #000;
padding-bottom: 18pt;
}
#colophon {
border-top: 2pt solid #000;
}
#site-title,
#site-description {
float: none;
line-height: 1.2em;
margin: 0;
padding: 0;
font-size: 13pt;
}
#site-title {
font-size: 13pt;
}
.entry-content {
font-size: 13pt;
line-height: 1.2em;
}
.entry-title {
font-size: 16pt;
}
#access,
#branding img,
#respond,
.comment-edit-link,
.edit-link,
.navigation,
.page-link,
.widget-area {
display: none !important;
}
#container,
#header,
#footer {
margin: 0;
width: 100%;
}
#content,
.one-column #content {
margin: 24pt 0 0;
width: 100%;
}
.wp-caption p {
font-size: 11pt;
}
#site-info,
#site-generator {
float: none;
width: auto;
}
#colophon {
width: auto;
}
img#wpstats {
display: none;
}
#site-generator a {
margin: 0;
padding: 0;
}
#entry-author-info {
border: 1px solid #e7e7e7;
}
#main {
display: inline;
}
.home .sticky {
border: none;
}
}
Leave a Reply