Background image for attachinvoice plugin

  • Posts: 3
  • Thank you received: 0
10 years 5 months ago #194724

-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.0
-- PHP version -- : 5.4

I have the attachinvoice plugin for hika shop 2.4.0 installed and i need to put a background image into the pdf which is as big as the whole page for a specific invoice look.

how can I do this in the invoice.php file of the attachinvoice plugin?

Please Log in or Create an account to join the conversation.

  • Posts: 26264
  • Thank you received: 4043
  • MODERATOR
10 years 5 months ago #194728

Hi,

The plugin is using the library "html2pdf" which transform an HTML page into a PDF file.
So if you want to put a background image, the best will be to edit the HTML to put that background image.
You have to know that "html2pdf" understand the CSS "background-image" rule, you just put an image url that your server will be able to understand/read/access.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 3
  • Thank you received: 0
10 years 5 months ago #194781

But where in the code do I have to put it in?

When I modify the style section of the invoice.php the image isn't shown in the pdf. Here is the code I'm using:

<style type="text/css">

<!--

.invoicetitle{ text-align:center;font-size:30px; padding-top:40px;padding-bottom:40px}
legend { padding:5px 10px; background-color:#5471B5;color:white;font-weight:bold;border-color:#ccc}
fieldset { padding:10px; border-color:#ccc;}

div.date{text-align:right;color:#333;}

.storeaddress{
	color:#333;
}
.addresses{padding-top:50px;}
.addresses td{padding-left:50px;}
.addresses fieldset {float:left;}

table.products{margin:auto;margin-top:60px;width:580px;border-collapse:collapse}
.price{text-align:center;}

.products td, .products th{border:1px solid #ccc;padding:7px 4px;}
.products th{background-color:#5471B5;color:white;}
td.newarea{text-align:right;padding-right:20px;}
tr.total{font-weight:bold;}

.products tr.limitation td{background-color:#ccc;padding:1px 0px;}

.hikashop_order_custom_fields_fieldset{margin-top : 20px;}

.footer{ font-size:10px;color:#aaa;text-align:center;}
body {background-image: url(http://youtube-filme.de/a4.jpg);}

-->
</style>

Last edit: 10 years 5 months ago by Jerome. Reason: [code] is nice !

Please Log in or Create an account to join the conversation.

  • Posts: 84220
  • Thank you received: 13673
  • MODERATOR
10 years 5 months ago #194816

Hi,

Your issue is with your CSS. If you look at the HTML of the invoice below the style section, there is no "body" tag so the image is not taken into account.
Instead, you probably want to try on the "page" tag like this:
page {background-image: url( youtube-filme.de/a4.jpg );}
Now that might not work as page is a specific tag of the HTML2PDF library.
You might want instead to have a div tag inside the page tag which would be around all the page in order to apply the image background on the div.

Please Log in or Create an account to join the conversation.

Time to create page: 0.064 seconds
Powered by Kunena Forum