I just used mPDF on my project and now stuck on this problem. First let me describe my PDF structure:
First page is a cover page.
Second page is Table Of Content page.
Third page is content page.
So the problem is :
There is header,footer,page number in cover page and TOC page. How do I remove that?
The content page number start with no 3. How do I reset it to become no 1?
Below is the code is used to include header and footer
$mpdf->SetHeader('{DATE j-m-Y}|{PAGENO}/2|My document');
$mpdf->SetFooter('{PAGENO}'); /* defines footer for Odd and Even Pages - placed at Outer margin */
$mpdf->SetFooter(array(
'L' => array(
'content' => 'Text to go on the left',
'font-family' => 'sans-serif',
'font-style' => 'B', /* blank, B, I, or BI */
'font-size' => '10', /* in pts */
),
'C' => array(
'content' => '- {PAGENO} -',
'font-family' => 'serif',
'font-style' => 'BI',
'font-size' => '18', /* gives default */
),
'R' => array(
'content' => 'Printed # {DATE j-m-Y H:m}',
'font-family' => 'monospace',
'font-style' => '',
'font-size' => '10',
),
'line' => 1, /* 1 to include line below header/above footer */
), 'E' /* defines footer for Even Pages */
);
And for TOC page, I add this tag in the html
<tocpagebreak />
You can setup your footer to be invisible at first, and then reset it when you want the numbering to start.
For example (using html tags):
<!-- sets up the footer -->
<pagefooter name="footer" content-center="{PAGENO}"></pagefooter>
<!-- disables it -->
<setpagefooter value="off"></setpagefooter>
<p>Some content for the first pages</p>
<!-- activates the footer and resets the numbering -->
<pagebreak odd-footer-name="footer" odd-footer-value="on" resetpagenum="1"></pagebreak>
I'm pretty sure the same can be achieved using the equivalent mpdf methods.
Related
relevant HTML looks like:
<li class="lineEntry t1" title="Right-Click for Options" style="">
<span id="job_111095">
<i class="ic-p-appr"></i> 111095
</span> Foo/Bar, Some Text </span>
</li>
... and the relevant CSS looks like ( file = icomoon's foo.css ) ...
/* this is an icomoon icon, that should be green */
.ic-p-appr:before {
content: "\e905";
color: #0f8040 !important;
}
... and ( file = bar.css ) ...
.t1{color:#B92426;}
/* .line-entry never defines a color */
I have added !important AND loaded the foo.css After the bar.css in an effort to make the icon green (#0f8040), but the icon nested within the .t1 class always inherits that parent's font color ONLY when mpfd converts the HTML to a pdf doc. (the nested icon in HTML works as expect)
When I look at the mPDF documentation for supported CSS, I see nothing there or in SO that suggests why this occurs. My mPDF is 7, and here is the configuration:
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
'../vendor/resources/fonts',
]),
'fontdata' => $fontData + [
'icomoon' => [
'R' => 'icomoon.ttf',
],
],
'format' => 'A4-L',
'orientation' => 'L',
'debug' => true,
]);
see:
enter image description here
Help with this issue is appreciated.
Fixed: I discovered that because mPDF ver7 does not support CSS pseudo class :before, it was necessary to declare the font-color independently with the class name. So for my HTML output, this worked, .ic-p-appr:before { color: #0f8040 !important; } but I had to declare it again, minus the ':before' to register that style in the PDF document.
Summary: mPDF7 ignores CSS style attributes declared under a pseudo-class.
I need double logo in site identity of WordPress customizer. One on mobile view and other on desktop view. Both are different images. Please provide code for adding two logos.
I have code for adding one custom logo. and I need it on site identity itself
function lotus_flies_custom_logo_setup()
{
$defaults = array(
'height' => 139,
'width' => 176,
// 'flex-height' => true,
// 'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support('custom-logo', $defaults);
}
add_action('after_setup_theme', 'lotus_flies_custom_logo_setup');
The best way to have different logo according to screen size is to use #media queries in CSS.
So you could just find out a css selector for your current icon, and add some css to resize it according to screen size, in your inherited custom template.
Instead of resizing, you could also just completely change the source of the image in CSS.
( As an inspiration: Swap out 3 differently-sized logos with media queries? . Documentation: Using_media_queries )
Note: mpdf 6.0
Hello,
I am trying to generate pdf's using mpdf that require precise positioning of elements for later printing purposes. The elements are to be drawn starting from the very top left corner of a given page, i.e. there should be no implicit paddings, margins, or other things that might affect the position of elements in the body.
Problem: mpdf appears to ignore CSS and values passed in constructor concerning margins/padding for the document root. The body is surrounded by margins in the PDF document (or the body is padding the child element). The stylesheet is indeed used by mpdf, though.
Observation: the same HTML that is fed to mpdf along with the same stylesheet produces seemingly correct results in a browser (viewing the HTML).
$mpdf = new Mpdf([
//'debug' => true,
'format' => 'A4',
'margin_left' => 0,
'margin_right' => 0,
'margin_top' => 0,
'margin_bottom' => 0,
'margin_header' => 0,
'margin_footer' => 0
]);
...
I've set paddings and margins to 0 wherever I could, especially:
body {
margin: 0mm;
padding: 0mm;
}
I don't know where I'm going wrong. Do you have suggestions as to how I might solve this problem?
I was also facing the similar problem with mPDF version 7, then I added a code in my css file -
#page {
margin-top: 0px;
margin-left:0px;
}
Write this as it is in your css file. It solved the problem for me.
As from the Mpdf docs for the constuctor function:
In V7.0 - "Parameters replaced with single $config parameter array"
You are using V6.0 try using comma separated values.
new \mPDF(x,x,x,x,x,x,etc)
This works for me. (10 = 10mm)
$mpdf = new \Mpdf\Mpdf([
'tempDir' => APP_PATH . '/tmp/xyz',
'mode' => 'utf-8',
'format' => 'A4',
'margin_left' => 10,
'margin_right' => 10,
'margin_top' => 10,
'margin_bottom' => 10,
'margin_header' => 10,
'margin_footer' => 10]);
I am trying to resolve the issue of Impreza theme with mega menu
The issue is that we endeavour to ensure that our site https://www.aleaitsolutions.com/ only uses valid HTML (as we are a development company that is commercially important to us). When we used the industry standard W3 Validator service our Home Page is now only showing one HTML error. This relates to the illegal inclusion of DIVs within an Un-ordered List. It appears to us that this issue has been introduced by Mega Menu.
Details of the error can be found here:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.aleaitsolutions.com%2F
The error message is as follows:
Error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
From line 210, column 1818; to line 210, column 1878
e hidden"><div id="mega-menu-wrap-us_main_menu" class="mega-menu-wrap"><div c
Contexts in which element div may be used:
Where flow content is expected.
As a child of a dl element.
Content model for element ul:
Zero or more li and script-supporting elements.
Now when I checked this to resolve the issue at my end, below is the details after applying the changes
Below is the structure
We have ul li and under li I was able to remove the div under li from "widget.manager_class.php" from my Impreza theme
Now, I want to remove the under which is "
Below is the code for your reference
wp_nav_menu( array(
'theme_location' => $menu_location,
//'container' => '',
//'container_class' => 'w-nav-list',
//'walker' => new US_Walker_Nav_Menu,
//'items_wrap' => '%3$s',
//'fallback_cb' => FALSE,
) );
echo '</ul>';
echo '<div class="w-nav-options hidden"';
echo us_pass_data_to_js( array(
'mobileWidth' => intval( $mobile_width ),
'mobileBehavior' => intval( $mobile_behavior ),
) );
echo '></div>';
echo '</nav>';
Though the is closed before the div.
Please check this and guide me for some solution. Many thanks in advance
I recently added a image to the edit button in YII.I do the following,
'class'=>'CButtonColumn',
'header' => 'Edit',
'template' => '{Edit}',
'buttons' => array(
'Edit' =>array(
'label' => 'Edit',
'imageUrl'=>Yii::app()->request->baseUrl.'/images/Actions-document-edit.ico',
));
and css for the button goes like this,
td.button-column a img {
max-height:25px;
max-width:25px;
}
And the actual size of the image Actions-document-edit.ico is 25*25.
I have a situation here that, i have an 25*25 image in Google Chrome and 2*2 image in mozilla firefox. Help me to achieve the proper formatting of the image in both the browsers.
And suggest also the pagenation problem.
Instead of .ico try to use .JPEG or .png or .gif image
Pagenation problem was solved
.pager ul.yiiPager li.page:after{display: inline-block !important}
But still am getting image problem... Help please...