#page :last {
background: rgb(167,0,51);
}
I need to add background for last page of my PDF but it not working. Only first page is getting bg but not last. Is there any solution?
Reference Link is given below.
MPDF - different background for first page
There is no option to add specific CSS for the Last page of PDF in MPDF till now.
But MDF provides options to add CSS to a specific page using "#page ".
(https://mpdf.github.io/css-stylesheets/supported-css.html)
If you are using AddPage() to create pages, you can just add a page selector(Example: "lastpage") to that specific page and add CSS like below.
#page lastpage{background: rgb(167,0,51);}
If you are using to create pages, you can add page selector (Example: < pagebreak page-selector="lastpage">) to that tag and add CSS like below.
#page lastpage{background: rgb(167,0,51);}
This will definitely work. I have tried and tested.
Related
I have a dinamically generated HTML content and want to generate a page-numbered PDF using mPDF. The problem is that when the content spans more than one page, the footer is only visible in the last page.
Example:
$mpdf->AliasNbPages('{PAGETOTAL}');
$mpdf->WriteHTML($content); // $content is dynamic, it can be a series of paragraphs resulting in a 3 or 4, or more, pages long pdf.
$mpdf->setFooter('{PAGENO}/{PAGETOTAL}'); // this only prints a footer in the last page, displaying for example "3/3", but the previous pages do not have footer
I want the footer in every page, but i don't know in advance how many pages I will have or where the pagebreaks will be.
Am I doing something wrong?
Try putting setFooter before WriteHTML
So, this way:
$mpdf->setFooter('{PAGENO}/{PAGETOTAL}');
$mpdf->WriteHTML($content);
I am working on PDF generation using the MPDF library into a Drupal 8 project.
I am planning to put the table of contents (TOC) inside a <div> on the first page of my PDF.
For that, I created a <tocentry> tags and put the <tocpagebreak /> into my <div> of the first HTML page.
Unfortunately, the TOC is generated in a new page (i.e., page break is happening before and after the TOC).
How can I generate the TOC within my custom HTML structure and include it into my <div>?
By default the TOC goes at the bottom, but you can modify its position manually.
In mPDF's docs there's a nice example in which the TOC is before the content:
$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML('Introduction');
$mpdf->TOCpagebreak();
$mpdf->TOC_Entry("Chapter 1", 0);
$mpdf->WriteHTML('Chapter 1 ...');
$mpdf->Output();
Notice that TOCpagebreak() is invoked before TOC_Entry (the function that adds the entry to the TOC) and before WriteHTML('Chapter 1 ...'). This latter function adds content to the PDF.
By placing TOCpagebreak() before those functions, you make the TOC appear before the contents.
For more details, see mPDF docs on TOCpagebreak()
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
I would like to put a footnote in my PDF, created by MPDF from html. I didn't find any function or tag for that. I tried put notes in footer, changing it by tag, but that was changing footers for all even/odd pages. Maybe is there a way to change footer starting from next page? Then I would change footer with my note text and immediately after change it to standard footer.
$mpdf->SetFooter('{DATE d/m/Y }|{PAGENO}/{nb}|Sym Consultoria');
I'm currently working on my own Wordpress theme. I thought it'd be cool to have a dropdown box in the sidebar in which you can choose different themes, and it'll change the page background, border colors, etc a bit.
The thing is, for one theme (the default one) I have Javascript in my header.php file where the header image will change each refresh. I want this header image to go away when switching stylesheets, but it just overlaps the other one. How do I change this?
If you want to see for yourself, the box is in the right sidebar under the blue buttons. This is my testing website. Ignore the 000webhost stuff.
http://trainman1405.site11.com/wordpress/
Thank you!
The general solution here is to define all of your styles in one sheet, but namespace them so you can simply change the class on the body and the new styles will take effect. (You could also define them in separate sheets, using the namespaces, and simply reference every sheet in your <head>.)
For example, some CSS:
body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }
And then when you want to change it (using jQuery, although plain Javascript could do this job too):
$('#theme_select').change(function()
{
$('body').removeClass('green').removeClass('red'); // remove existing classes
$('body').addClass($(this).val());
});
it looks like you could use a javascript library its called jquery. You could use that to hide and display a new image e.g
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");
}
</script>
and then you have to set up a button or something to trigger this effect
so...
<button onclick="piczotheme()"> click </button>