I have a different CSS that's applied when someone is printing (below is an example of how I'm doing it). But I'm wondering, I'd like to make a custom "Preview Print" (instead of the regular one in the browser) but I'm wondering if it's possible to somehow get it so that the print media css will be applied, because I'd like to show a preview on the screen of what they'll be printing on paper. Any ideas?
<html>
<body>
<style type="text/css">
body
{
font-size: 62.5%;
background-color:black;
}
h1
{
color: red;
}
#media print
{
body{
background-color:yellow;
}
h1 {
color: black;
}
}
</style>
<h1>This is just a test</h1>
</body>
</html>
The easiest way would be to create a print.css style sheet that's normally included with print media specified.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Then on your print preview screen, you could use the same print.css with screen media set:
<link rel="stylesheet" type="text/css" media="screen" href="print.css" />
I usually open a new window, write in my own generic html/body wrapper that uses the print stylesheet as the main stylesheet, the use JavaScript to copy the body from the opener to the window.
Related
I am building a website in asp.net, I have made a masterpage with a link tag to my css files. I made use of 1 global css file for every format of screen and 3 css files for small, medium and large screens.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Styles/style.css" media="all">
<link rel="stylesheet" type="text/css" href="Styles/small-style.css" media="all and (max-width:699px)">
<link rel="stylesheet" type="text/css" href="Styles/medium-style.css" media="all and (min-width:700px) and (max-width:1499px)">
<link rel="stylesheet" type="text/css" href="Styles/large-style.css" media="all and (min-width:1500px)">
For some reason in my content file the global css file (for every format) is getting used by the html elements. For example (style.css) this works for a div in my content page with class contactPage:
.contactPage {
margin-bottom: 140px;
}
Except for the 3 css files that make use of a min- and max-width, these are not used by the html elements in my content page (for some reason). For example (medium-style.css):
.contactPage {
background-image: url(../Images/ContactBackground.jpg);
background-size: 300px 500px;
background-repeat: no-repeat;
background-position: top right;
}
However in my master page these css links work file for all page sizes.
What I tried:
Adding a viewport in my content file.
Making use of <style></style>, this works but I don't want any of my style in my html.
Making a link element in my content page to the css files.
I hope someone could help me out.
Thank you in advance.
instead of your html doing the media query combine all 3 pages into one css and then separate them with something like
all css {
your css here
}
#media screen and (max-width: 699px){
css for max-width for 699{
your css here
}
#media screen and (min-width:1500px){
css for max-width for 1500{
your css here
}
i would let the media query in css handle it, not your html
How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}
When I use css for printing into a pdf for ex. content of my webpage it print more than I need like the header, footer, like of my webpage ,labels, the date ... etc which I don't want to print?!
Here is an example:
<html>
<body>
<img src="Snapshot_20120326.jpg"/>
<h1>Mezoo</h1>
<h2>The big member</h2>
<button onclick="window.print();">print</button>
<style media="print">
h1 ,img {
display: block;
}
h2, button{
display: none;
}
</style>
</body>
</html>
It'd probably be best to set #media print styles in a separate CSS stylesheet ...
So for example, to hide the header:
#media print {
.header, .hide { visibility: hidden }
}
You can learn more about media styling here: http://www.w3.org/TR/css3-mediaqueries/
You can use the media tag on a link.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
The print css could then turn off visibility on things you don't want to see.
I have a print page here:
http://www.souq4cars.com/ppreview.php?id=611111161&u=10064&t=users_cars
How do i hide the links at the bottom saying 'Close Window' and 'Print Page' from being printed on the printed page?
You could use the CSS #media rule for this. To start, add a class noprint to the both elements:
<a class="noprint">foo</a>
and then add a #media print rule to your CSS which hides the elements during print:
#media print {
.noprint {
display: none;
}
}
#media print
{
div.for_hide {
display: none;
}
}
or you can include some css with this by including
<link rel="stylesheet" type="text/css" media="print" href="/css/print_version.css">
in your html code.
You have to make a new style sheet which uses different css.
<link href="style-print.css" rel="stylesheet" media="print" type="text/css">
Name divs, where you have text, that you don't want to print:
<div style="float: right;" id="print">
<strong>Print Page</strong>
</div>
In style-print.css set this divs to hidden.
#print {
display: none;
}
You should use a print stylesheet and hide the relevant elements there by setting display: none.
You can include a print sheet by adding the following between the head tags:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Normally you would set the media attribute to screen or something similar.
Here is a page I am trying to make print friendly, so it will list everything in two columns
view the page here
Here is the css for the div each block of information is in
#off-campus-print-friendly {
font-family:arial;
border:1px solid red;
overflow:auto;
font-size:.8em;
line-height:1.5em;
padding:10px;
}
#off-campus-print-friendly div {
width:45%;
float:left;
}
#off-campus-print-friendly p {
margin:5px 0;
}
When I go to print the page, it only prints it in one column, instead of how it looks on the page.
Any help is appreciated.
Change your link to the stylesheet to be screen and print
<link rel="stylesheet" type="text/css" media="screen, print" href="http://www.herkimer.edu/?css=styles/print.v.1245694939" charset="utf-8" />
Tested this by editing the source on your page (firebug), it works.
Best practice is that you should have a 2nd css file specifically for printing included on your original page. This eliminates the need for a second print friendly page:
<link rel="stylesheet" type="text/css" media="print" href="print.css" charset="utf-8" />
Also, if you'd rather have a single stylesheet cater to all mediums, you can use this:
<link rel="stylesheet" type="text/css" media="all" href="master.css" charset="utf-8" />
And you can also use blocks within your CSS files to segregate medium specific styles like this:
#media print {
p { font-size: 14pt; }
}
#media screen {
p { font-size: 12pt; }
}