I am trying to print a repeating header on a dynamically generated HTML page in print.
The header shows a logo, and uses CSS to display page numbers.
My site lets users add blocks of text, or collages of images, and adds them independently with "add text" and "add image" buttons.
the resultant code is (somewhat) as follows: (slim/HAML syntax)
editable-section.ng-cloak(
ng-repeat='section in story.sections'
editable='false'
)
= render 'header'
.show-content-wrapper
= render 'sections/section'
The size of this content can vary wildly, and so I don't want to place a 'page-break-before:always;" rule before each ... because I may want them to stack more than one on a page to save paper and not look silly.
My problem is, inside each editable-section, I have an HTML header I only want to display if this is the first editable-section on the page.
So the question is, how would I only display the first header on each printed page? I imagine it would be something to the effect of:
#media only print {
#page {
header {
display:none;
&:first-of-type {
display:block;
}
}
}
}
However, "You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document."
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Thoughts?
Are you aware of this javascript?
document.getElementsByTagName('h1')[0]
With the brackets you can select a particular element with the 0th being the first.
Does this help?
Related
I have this to hide the headers in every page of my #media print:
.layout-topbar {
display:none;
}
However I need to show the header in only the first page of every print, haven't been able to find the way.
How to print a html page with header and footer by default (without explicitly clicking checkboxes during printing)?
For example, for displaying background picture, i found "-webkit-print-color-adjust: exact;":
.print-layout {
width: 210mm;
margin: 0 auto;
#media print {
-webkit-print-color-adjust: exact;
}
}
But how to do it for footer and header?
In my HTML page, I don't have any header and footer classes explicitly.Hence in my case,header is name of tab and date, footer is link of site and number of page in my case.
As far as i am aware you cannot get a header and footer added on by just adding css, the new features in HTML allow you to add <footer> and <header> tags to your HTML and you could add in an <a> tag with the URL link to the webpage, again if you need something dynamic like the data changing every time you would have to add in a script with the new Date() method.
The -webkit-print-color-adjust property is a non-standard CSS extension which is not really recommended to be used as it does not give reliable outcomes every time.
I want to remove the Chrome inserted headers and footers (url, page number) on a printed page.
The below removes the header and footer ONLY on the first page; if the content flows over to a second page, the headers and footers both reappear.
#page {
size: auto;
margin-top: 0cm;
margin-bottom: 0cm;
}
Is there any way to remove the printed page header/footer on all printed pages, without manually adjust the system dialog option "Removes headers/footers"?
Chrome does not support removing the print header and footer programmatically. Period. Try to think of it more as them giving the option to the user to add the header and footer rather than it being a part of your page which you have control over.
you could add a class, which hides theses elements on the page.
Use CSS property display
display: none
If you add the media query print, this will only take affect, in that case.
#media print {
...
}
How do I format a paragraph on one page without affecting paragraphs on another page
For example I made my homepage index.html and thats ok but for the next page I want to apply new effects to the text layout. So how to speak to that particular body of text?
It will have a larger font size for the first word and then smaller for the body and this will be repeated several times.
Add a class to the body tag <body class="home"> then you will be able to style all elements uniquely within that page by using the body class.
so as an example:
body.home p {
color: green;
}
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }