Print site logo just on first page (#media print ) - html

I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}

The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.

#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.

Related

#page :first not working

I have to use two different headers in the print version: one for the first page and one for the other pages. I would like to put a header (fixed on the top) for the other pages and use the css display: none for the first page. But I have not any effect with #page :first.
This is my code:
#page :first {
.header {
display: none;
}
}
I tried also putting !important in the css but nothing happens.
What should I do?
:first allows only few CSS properties. You can only change margins, page breaks and windows with it.Other CSS properties will be ignored. So i assume display:none may not work.
Though you can refer more about how to use #page and with what type of CSS properties it works.
https://developer.mozilla.org/en/docs/Web/CSS/:first
According to: https://developer.mozilla.org/en/docs/Web/CSS/#page
The #page CSS at-rule is used to modify some CSS properties when
printing a document. You can't change all CSS properties with #page.
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
And also for the :first https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Note: you cannot change all CSS properties with :first. You can only
change the margins, orphans, widows, and page breaks of the document.
All other CSS properties will be ignored.
So since you're trying to remove one of your own elements - try using media queries instead:
#media print {
.header { display: none; }
}
https://benfrain.com/create-print-styles-using-css3-media-queries/
It looks like it's a Mozilla bug.
I am not able to get margins working, even when following their own example here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:first
Both pages are printed in an identical way, no difference.

html - verify that each div will be on separated print page

I have many divs that proposed to be printed - on different pages.
How can I make sure that when the user is clicking the print button, each div will be on a different page?
Thanks!
You can use the page-break-after attribute in the print media query. The advantage is, that you don't have to change the size of your divs, it just makes sure that the page break will be after the div.
#media print {
div {
page-break-after: always;
}
}
More information about page-break-after on MDN.
In css, there is a media query you can use to specifically format your web page for when you want to print it:
#media print {
/* insert your style declarations here */
div {
page-break-after: always; /* ensures the next will we appear on new page */
}
}
You can use this media query to make each div fill up an entire page when the user decides to print. You can use this to modify things like removing the navbar when the user decides to print.
On the other hand, to avoid direct breaks after a certain element use page-break-after: avoid;
You can also for the use to print in a certain format that you want to specify using the follow:
#page {
size: A4; /* or A4 landscape or A5 */
}

How do I make a footer visible with CSS for print?

I have a page with some data and content. I want to make a print version that will display the content and footer not to worry much about the header.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:block". Is that doable?
How do I achieve this?
EDIT: This is what I have so far:
/* Print Style - SuccinctNate */
#media print {
* {display:block;}
.printable, .printable > * {display:block;}
#footer {display:block;}
}
your code seems correct . you can set display:block to the items you want to show on the print and display:none on everything else.
#media print {
* { display:none }
.item_i_want_to_print { display:block;}
}
or you could just hide the ones you don't want to appear on the print
#media print {
.item_i_do_not_want_to_print { display: none;}
}
it is compatible with every browser . so use it with confidence
see more here : media print

Print page in same size for all screens

maybe this question is too weird or even is off-topic, sorry for that but I have this doubt:
Exists a way to show a HTML page in the same size for all screens when the user types control + p (print page)?
For example my laptop have this screen resolution: 1600x900 and when I type control + p the HTML page look perfect (all in 1 page)!
Problem appears when I use a bigger(page appear in 2 or more pages) or smaller screen(page appear in 1 page but with a lot of blank spaces).
At the moment I tried with #page margins but not work at all, just in some cases, however here is the code:
<style>
#page :left {
}
#page :right {
margin-top: 0.2cm;
margin-bottom: 0.2cm;
}
body {
font-size: 9.5px;
}
</style>
PD. I'm using JavaScript, jQuery, HTML5, CSS3, Bootstrap.
Control + P means print, right?
Then yes, you should use the media query
#media print{
}
This a good explanation: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

How to give some space to every page in printing only using css

I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*