I generate content for a statement using xsl. Typically the length of a statement is determined by the number of items on it. This means it can run over multiple pages. The statements are quite complex with company details, account details, summary sections, detailed sections for each type summarized, etc.
I need to have a page header on each page containing multiple lines and the page number and put it all inside a frame.
I use page-break-before and page-break-after effectively to start new pages after for example a summary table of the statement and before a detailed table for each summarized item, but I'm struggling to add a page header across all pages and to add page numbers to each page.
This does nothing:
#page :header{
content: "this is my header";
}
Neither does this:
#page {
size: auto;
margin:10%;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
This does not work:
in .css:
#page {
#top-center{
contnent: element(pageHeader);
}
}
in .xsl:
<div id="pageHeader">
<!-- Content of the header here -->
</div>
This doesn't work either:
in .css:
#page {
#top-center {
content: element(pageHeader);
}
}
#pageHeader {
position: running(pageHeader);
}
in .xsl:
<div id="pageHeader">
<!-- content -->
</div>
Related
I want to use the value generated by counter(pages) in order to do something specific on the last page of a printed web document using an #page rule.
Using counter(pages) is working fine for me in an at-page context:
#page {
#top-right {
content: counter(pages);
}
}
Addressing a specific page also works fine:
#page: nth(69) {
#top-right {
content: normal;
}
}
What I want is to pass the total page count to nth(), like so:
#page: nth(#{counter(pages)}) {
#top-right {
content: normal;
}
}
Without success.
I've tried using a SASS variable:
$pagecount: 69; // this works
$pagecount: '69'; // even this works
$pagecount: #{counter(pages)}; // but this doesn't
$pagecount: counter(pages); // nor does this
...
#page: nth(#{$pagecount}) {...}
...
When I try to use the dynamic value my code always compiles to
#page :nth(counter(pages)) {}
which of course does nothing.
Is it possible to get the total page count into nth()?
As pointed out by 3rdthemagical, an answer to this previous question achieves what I want, not by using counter(pages) but instead by using named pages on an element that is positioned on the last page of the document.
I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
I'm looking to edit the content of a H2 class within another block of classes but struggling to make it work.
Here is the class list
<header class="mainHeader">
<li id="xyz_insert_html_widget-2" class="widget-1 widget-first widget-last widget-odd widget widget_xyz_insert_html_widget "><h2 class="box">Live Now - Podcasts</h2>
I'm trying to edit the content of the H2 which contains "Live Now - Podcasts" with no luck
I've tried a lot of things with no avail, the last thing I tried was
#mainHeader li#xyz_insert_html_widget-2.widget-1.widget-first.widget-last.widget-odd.widget.widget_xyz_insert_html_widget h2.box
Using the content property content: "TEXT HERE";
Any help in pointing me in the right direction is appreciated!
Try
.box{
content: "TEXT HERE";
}
This because with css you can just reference the specific element class name that you want your properties to apply unless you have those on other area of your documents.
In that case either assign an id to it so to reference it like this:
#exampleid{
content: "TEXT HERE";
}
or following your line, being case specific:
header > li > .box {
content: "TEXT HERE";
}
I've searched for this but I couldn't find anything similar to my problem.
Basically what I have is a counter called page and I'm setting up a page counter like this:
content: "Page " counter(page);
that is displayed like this on screen -> Page 1
Everything is working fine, but what I need is to set the page counter to start from 0 instead of 1
I'm using a Wiki (confluence) and I don't have access to where page is defined, because it's just a variable meant to be used for CSS counters like before.
I tried to following, but with no luck at all:
content: "Page " counter(page) - 1;
content: "Page " counter(page - 1);
content: "Page " calc(counter(page) - 1);
I've also tried to prepend counter-reset:
counter-reset: page -1;
content: "Page " counter(page);
Now my question is, can I set the counter to start from 0 without using any counter-reset property? Or, in the previous example where I actually tried to use the counter-reset, did I make any mistake? Am I missing something?
If you have landed on this page looking for help on usage of CSS counters with the confluence tool, please make note of the comment by Nick:
I wrote a thread in confluence support forum, but apparently what I want to do it's not possible.
Here is one way to make it start from 0 without using counter-reset: [counter-name] -1. Basically what we are doing is incrementing the counter only from the second occurrence of the div class='page' so that the counter value for the first instance always remains 0.
counter-reset does not seem to be a mandatory property*. When there is no reset mentioned, 0 is taken as the default value and the below code still works.
* - Can't find any reference in W3 docs or in MDN that counter-reset is optional but browsers seem to support it.
body {
counter-reset: page;
}
.page:before {
content: "Page " counter(page);
}
.page ~ .page {
counter-increment: page;
}
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
I have posted the above only for a sample and I don't think it is the correct way to do it. The recommended approach would be the below where while resetting the counter, we set the start value as -1.
body {
counter-reset: page -1;
}
.page {
counter-increment: page;
}
.page:before {
content: "Page " counter(page);
}
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
<div class="page"></div>
Create a var called Time or whatever, it will be your last number showed on your Timer, then after restart check the var and if it is 9 or the number before the restart number, then set the showing number to 0
I have a list with category headers, and items nested in those headers. If I do
#list .item:nth-child(1):before{content:"1";}
the first item in each category gets prefixed with a 1. This is somewhat unexpected. I guess I am looking for an nth-item() plugin.
What are my options given I do not control the html, its changing dynamically and I don't want to monitor it with jQuery. I was hoping for a CSS solution.
Link to Fiddle
You can alternatively use a CSS counter
http://jsfiddle.net/6tN5U/
body {
counter-reset: item;
}
.item{
margin-left:20px;
}
#items .item:before{counter-increment: item; content: counter(item) " ";}