I am trying to create a pdf report using dompdf. The report needs to have the company logo on the top of the first page as well as a header and footer on every page. I have found solutions for adding a header and footer to a dompdf document elsewhere on stackoverflow. The problem I'm running into is that the company logo needs to be above the page header on the first page and not displayed on other pages
something like this
Company Logo
- header
- content here
- footer
------
- header
- content here
- footer
Is there any way of doing this using dompdf?
This is kludgey, but it works. You can basically fake the different headers by creating a normal header using fixed positioning and the special page 1 header using absolute positioning. If you set things up in the right order the page 1 header will be rendered on top of the standard header, obscuring it.
<html>
<head>
<style>
#page {
margin: 0px;
}
#page :first {
margin-top: 100px;
}
body {
margin: 100px 20px 50px 20px;
}
#headerA {
position: fixed;
left: 0px; right: 0px; top: 0px;
text-align: center;
background-color: orange;
height: 90px;
}
#headerB {
position: absolute;
left: -20px; right: -20px; top: -200px;
text-align: center;
background-color: orange;
height: 190px;
}
#footer {
position: fixed;
left: 0px; right: 0px; bottom: 0px;
text-align: center;
background-color: orange;
height: 40px;
}
</style>
</head>
<body>
<div id="headerA">
<h1>Widgets Express</h1>
</div>
<div id="headerB">
<img class="logo" src="http://eclecticgeek.com/images/macro/ants.jpg" height="100" width="500">
<h1>Widgets Express</h1>
</div>
<div id="footer">
<p>Copyright, all rights reserved, yadda yadda</p>
</div>
<div id="content">
...
</div>
</body>
</html>
Related
I wanted to know why my image isn't showing up in the Buildfire platform when i place the code into the source area.....I've tested it on everything else and it works perfectly...dreamweaver and everything.... Need help to help get the image to show up in buildfire. The code i am using is below:
<p class="bf-wysiwyg-hide-app bf-wysiwyg-top"><img src="blob:https://pluginserver.buildfire.com/890db794-346d-4428-be1f-aa8dd5f5efdc" style="display: none;" onload="typeof buildfire !== 'undefined' && buildfire.dynamicBlocks.execute(this);" data-type="dynamic-expression" /></p>
<div id="bf_mce_layout_2" class="bf-wysiwyg-top bf-wysiwyg-hide-app" data-bf-layout="%7B%22id%22%3A%22bf_mce_layout_2%22%2C%22cssUrl%22%3A%22layouts/bf_mce_layout2.css%22%2C%22htmlUrl%22%3A%22layouts/template_a.html%22%7D" data-layout-name="bf_mce_layout_2"><!-- This template should not be changed once is live -->
<div class="bf_mce_img-container"><img src="https://dallasexaminer.com/wp-content/uploads/2023/01/Preparing-for-Legislative-Session.jpg" onclick="buildfire.actionItems.execute(JSON.parse(unescape(this.getAttribute("data-execute"))), ()=>{})" data-bf-image="%7B%22originalSrc%22%3A%22https%3A//s3-us-west-2.amazonaws.com/imageserver.prod/71e97b33-4374-11ec-9fe6-12a56cc33887/karen-bass.jpg%22%7D" data-execute="%7B%22action%22%3A%22linkToApp%22%2C%22instanceId%22%3A%22665ce2b8-7ce6-4cb5-bbfc-282dc22cdd6c-1651251310477%22%2C%22title%22%3A%22Current%20News%22%2C%22iconUrl%22%3A%22https%3A//pluginserver.buildfire.com/plugins/60/resources/icon.png%22%2C%22queryString%22%3Anull%2C%22deeplinkId%22%3Anull%7D" /></div>
<div class="bf_mce_copy">
<h1>Current News</h1>
<p class="bf_mce_caption">Check out the current news from The Dallas Examiner today by clicking the button below</p>
</div>
<button class="bf-btn bf-btn-primary" onclick="buildfire.actionItems.execute(JSON.parse(unescape(this.getAttribute('data-execute'))), ()=>{})" data-execute="%7B%22title%22%3A%22Current%20News%22%2C%22iconUrl%22%3A%22https%3A//pluginserver.buildfire.com/plugins/60/resources/icon.png%22%2C%22action%22%3A%22linkToApp%22%2C%22instanceId%22%3A%22665ce2b8-7ce6-4cb5-bbfc-282dc22cdd6c-1651251310477%22%2C%22queryString%22%3Anull%2C%22deeplinkId%22%3Anull%7D">Current News</button></div>
<p class="bf-wysiwyg-top bf-wysiwyg-hide-app"> </p>
<style class="bf-wysiwyg-top bf-wysiwyg-hide-app" data-layout-name="bf_mce_layout_2">
#bf_mce_layout_2 * > span{
color: currentColor;
}
#bf_mce_layout_2{
font-size: 16px;
margin: 1rem;
border-radius: 1rem;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0 .5rem 1rem rgba(77, 77, 77, 0.5);
}
#bf_mce_layout_2 .bf_mce_img-container{
position: relative;
left: 0;
top: 0;
height: 200px;
width: 100%;
}
#bf_mce_layout_2 .bf_mce_img-container img{
width: 100%;
height: 100%;
object-fit: cover;
}
#bf_mce_layout_2 .bf_mce_copy{
padding: 1rem;
}
#bf_mce_layout_2 .bf_mce_copy h1{
margin-top: 0;
margin-bottom: .5rem;
}
#bf_mce_layout_2 .bf_mce_copy .bf_mce_caption{
font-size: .75rem !important;
margin-bottom: 2rem;
}
#bf_mce_layout_2 .bf_mce_copy p{
line-height: 1.5;
}
#bf_mce_layout_2 button{
position: relative;
margin-bottom: 2rem;
min-width: 150px;
z-index: 1;
}</style>
[[[enter image description here](https://i.stack.imgur.com/MAJs2.jpg)](https://i.stack.imgur.com/kIJKs.jpg)](https://i.stack.imgur.com/hM7uY.jpg)
I placed in a code that works perfectly in dreamweaver into the source code area of Buildfire and for some reason the image is not showing up. I need help with this The code is below:
Your code seems to run just fine, screenshot below:
Maybe a problem retrieving the image? I'd check the network traffic in Safari or Google Chrome and see if the image being requested or not.
If it is being requested then check if you're getting any status code errors. If it is not being requested try adding more information.
I have a problem to repeat header of the page on every page
using Dompdf Wrapper for Laravel. Anyone can help with simple example?
This is basic example but I guess you can explore this further to match your requirement.
<style>
/** Define now the real margins of every page in the PDF **/
body {
margin-top: 2cm;
margin-left: 2cm;
margin-right: 2cm;
margin-bottom: 2cm;
}
/** Define the header rules **/
header {
position: fixed;
top: 0cm;
left: 0cm;
right: 0cm;
height: 2cm;
/** Extra personal styles **/
background-color: #eaeaea;
color: black;
text-align: center;
line-height: 1.5cm;
}
/** Define the footer rules **/
footer {
position: fixed;
bottom: 0cm;
left: 0cm;
right: 0cm;
height: 2cm;
/** Extra personal styles **/
background-color: #eaeaea;
color: black;
text-align: center;
line-height: 1.5cm;
}
footer .pagenum:before {
content: counter(page);
}
</style>
In Body Tag add HEADER and FOOTER tag and wrap the main content in main tag
<header>
This is a header
</header>
<footer>
<div class="pagenum-container">Page <span class="pagenum"></span></div>
</footer>
<main>
<div>Main content goes here </div>
</main>
Reference site- https://ourcodeworld.com/articles/read/687/how-to-configure-a-header-and-footer-in-dompdf
I can't seem to find a solution for this anywhere.
I have a page with three elements displayed via flex: header, container and footer. The header and footer contain just what they need to, but container must take up all space left in the window. This is achieved via flex properties.
I would like to insert a Slick Carousel and have it contained the same way you can contain an image as a background (but with img tags, for semantics).
You can see example code here:
<html>
<head>
<title>Manuel del Pozo | Interiorismo & Diseño</title>
</head>
<body>
<div class="flex-container">
<header>
<div class="links">
<div class="lang-selector">
EN
/ ES
/ PT
</div>
<div class="social-links">
Fb
Tw
Ig
</div>
<div class="clearfix"></div>
</div>
<div class="logo-header">
<h1>Manuel del Pozo</h1>
<h2>Interiorismo & Diseño</h2>
</div>
<nav>
Home
Estudio
Proyectos
Servicios
About Me
Contacto
</nav>
</header>
<div class="container">
<div class="carousel">
<img src="http://www.manueldelpozoid.com/root/img/portfolio/01.jpg" alt="Portfolio Image 01">
</div>
</div>
<footer>
<div class="philo">
<p>Creamos un espacio hecho a tu medida, adaptándolo a tus gustos y necesidades</p>
</div>
<div class="footer-contact">
manuel#fake.com
<p> | </p>
<p>Tlf.: XXX XXX XXX</p>
</div>
</footer>
</div><!-- end of flex-container -->
</body>
</html>
http://codepen.io/anon/pen/MaRPop?editors=110
It does not have the carousel, just an image to make this easier.
Thanks!
Not exactly sure what you need, so try adding the following CSS to your style.css and see if I'm close.
CSS
/*******************************************************************************
GENERAL
*******************************************************************************/
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
font-family: 'Courier', serif;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*******************************************************************************
FLEX DISPLAY SETTINGS
*******************************************************************************/
.flex-container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: 100%;
max-height: 100%;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.flex-container header {
flex: 0 0 15vh;
position: fixed;
top: 0;
height: 15vh;
width: 100%;
}
.flex-container .container {
flex: 1 0 70vh;
width: 100%;
height: calc(100% - 30vh);
overflow-y: auto;
overflow-x: hidden;
position: absolute;
top: calc(100% - 30vh);
}
.flex-container footer {
flex: 0 0 15vh;
position: fixed;
bottom: 0;
height: 15vh;
width: 100%;
}
Using zer00ne CSS, I put a fixed height for both header and footer and then used a calculation for the container "100vh - (header+footer)". Then asigning 100% height to all elements until the img, which I put with object-fit:contain;
That fixed it for me
I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="left" src="images/logo/logo1.jpg">
</div>
Please help, thanks.
Use positioning. The following worked for me...
With zoom to the center of the image (image fills the div):
div{
float:left;
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Without zoom to the center of the image (image does not fill the div):
div{
float:left;
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.
Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.
Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.
CSS
.container {
float: left;
width: 80px;
height: 80px;
padding: 8px;
border: 1px solid #ccc;
display: table;
}
.image-container {
display: table-cell;
vertical-align: middle;
}
.image-container img {
display: block;
margin: 0 auto;
}
HTML
<div class="container">
<div class="image-container">
<img src="images/logo/logo1.jpg">
</div>
</div>
JSFiddle: http://jsfiddle.net/MJ5j4/
just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.
Thats pure CSS
.centerImgWrapper {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;}
.centerImgWrapper img {
left: 0;
right:0;
top: 0;
bottom:0;
max-height: 100%;
max-width: 100%;
margin:auto;
position:absolute;
}
Just Check out the Fiddle.
MyFiddle
Dave
If you are trying to get it in the middle inside the div, have you tried:
<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
<img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">
</div>
I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case.
Either way, I hope it helps.
Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.
Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.
Check out this demo: http://jsfiddle.net/jyvFN/1/
HTML
<div id="container">
<img id="logo" src="http://placekitten.com/100/100" />
</div>
CSS:
#container {
float: left;
background-color: blue;
width: 200px;
height: 150px;
text-align: center;
border: 1px solid red;
}
JavaScript
var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Why didn't you set align of the image center?
Then your code should be:
<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">
And I think it's also problem of the ratio of the image width vs the div block + it's padding and border.
Try to set it balance.
This works fine in Webkit, but when I go to Firefox (Or IE8) it totally messed up. I've been staring at this for so long that I can't find any errors at all with it, so maybe one of you guys can point out where I'm going wrong.
CSS:
body {
font-family: Georgia, serif;
margin: 0px;
padding: 0px;
background: #222;
}
header {
background: #fff url('images/header-border.gif') bottom repeat-x;
width: 980px;
margin: 0px auto;
height: 100px;
padding: 0px 0px 0px 20px;
-moz-border-radius-topright: 4px; -moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px; -webkit-border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-left-radius: 4px;
}
section {
}
article {
}
footer {
clear: left;
}
nav {
width: 980px;
margin: 0px auto;
height: 70px;
padding: 10px 0px 10px 0px;
font-size: 21px;
font-weight: bold;
font-family: Arial, serif;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background: #060606;
}
#content {
width: 980px;
background: #fff;
padding: 0px 0px 0px 20px;
margin: 0px auto;
}
nav ul li {
float: left;
list-style: none;
width: 155px;
}
#left-column, #logo {
width: 560px;
margin: 0px auto;
float: left;
}
#right-column, #share {
width: 380px;
margin: 0px auto;
float: left;
height: 100%;
padding: 0px 0px 0px 20px;
border-left: 1px solid #d9d9d9;
}
address {
display: inline;
}
a img {
border: 0px;
}
.clear-left {
clear: left;
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="text/html; charset=UTF-8" />
<title>Webtint </title>
<link rel="stylesheet" href="http://localhost/wp-content/themes/clean/style.css" type="text/css" />
<link rel="pingback" href="http://localhost/xmlrpc.php" />
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>tutorials <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>resources <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>articles <img src="http://localhost/wp-content/themes/clean/images/arrow.gif" alt="Arrow" /></li>
<li>contact</li>
<li>follow us</li>
</ul>
</nav>
<header>
<section id="logo">
</section>
<section id="share">
</section>
</header>
<div id="content">
<section id="left-column">
<article>
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<time><?php the_time('F jS, Y') ?></time> by <address><?php the_author(); ?></address>
<?php the_excerpt(); ?>
<br /><br />
Read More
<?php comments_popup_link(
'<span class="boxed">No Responses »</span>',
'<span class="boxed"> 1 Response »</span>',
'<span class="boxed">% Responses »</span>'); ?>
</article>
<hr />
</section>
<section id="right-column">
<h2>Popular Posts</h2>
</section>
</div>
<footer>
</footer>
</body>
</html>
Screenshot in Firefox:
http://imgur.com/wvhI0.gif
Screenshot in Chrome: (How it's supposed to look)
http://imgur.com/sQK8S.gif
Screenshot in IE8:
http://imgur.com/7OnEJ.gif
Thanks for any help in advance :)
Basically, you're using mostly HTML5 specific elements, and they're not supported everywhere properly yet, especially IE8 out of those you listed.
For a quick look, Here's the list of elements added in HTML5.
Try using a debug tool like Firebug or the IE developer toolbar to figure out which elements are being placed wrongly and why.
Both let you hover your mouse over blocks and will highlight the corresponding HTML. You will be able to see exactly which element it is that is being placed incorrectly, and view the CSS to try and figure out why.
Johnny, does your solution also fix the incorrect rendering in Firefox 2 and Camino 1? Interesting, as I only know of the Javascript solution. Just to give you some more feedback on this: to learn more about getting HTML5 rendered properly in all major browsers, read this article by Nico Hagenburger. You can also use this script to render HTML5 in IE.
A more general article about HTML5 and CSS3 support in IE (e.g., your corners aren't rounded) in this article. For rounded corners in all major browsers (also in Opera) please read this one. There also exist general tables about support in all major browsers of HTML5 and CSS3.
EDIT: I just read an article about HTML5 pages not rendered properly when printing from within IE, because this JavaScript solution isn't loaded when printing a page. More info on doctype.com.