Mise en page des factures

Mise en page Facture

L’alignement des colonnes de la facture est corrigé par le fichier HTML suivant :

Mark (WebToffee)
Aug 16, 2024, 13:01 GMT+5:30
Hello Michel,

Thanks for waiting. We have modified the template HTML code to address the style issue. Kindly use the modified template HTML code mentioned below and check. Let us know how it works.

CODE :

body, html{margin:0px; padding:0px; font-family: »Helvetica Neue », Roboto, Arial, « Droid Sans », sans-serif;}

.clearfix::after{ display:block; clear:both; content: » »; }

.wfte_invoice-main{ color:#202020; font-size:12px; font-weight:400; box-sizing:border-box; width:100%; padding:30px 0px; background:#fff; height:auto; }

.wfte_invoice-main *{ box-sizing:border-box;}

.wfte_row{ width:100%; display:block; }

.wfte_col-2{ width:50%; display:block;}

.wfte_col-3{ width:31.5%; display:block;}

.wfte_col-7{ width:68%; display:block;}

.wfte_padding_left_right{ padding:0px 30px; }

.wfte_hr{ height:1px; font-size:0px; padding:0px; background:#cccccc; }

.wfte_header_main{background:#fff;}

.wfte_header{ margin-bottom:15px;}

.wfte_body{ margin-bottom:15px;}

.wfte_company_logo_img_box{ margin-bottom:10px; }

.wfte_company_logo_img{ width:150px; max-width:100%; }

.wfte_company_name{ font-size:24px; font-weight:bold; }

.wfte_company_logo_extra_details{ font-size:12px; margin-top:3px;}

.wfte_barcode{ margin-top:5px;}

.wfte_invoice_data div span:last-child, .wfte_extra_fields span:last-child{ font-weight:bold; }

.wfte_invoice_number{ color:#000; font-size:18px; font-weight:normal; height:auto; background:#f4f4f4; padding:7px 10px;}

.wfte_invoice_number_label, .wfte_invoice_number_val{ font-weight:bold; font-size:18px; }

.wfte_invoice_data{ line-height:16px; font-size:12px; }

.wfte_shipping_address{ width:95%;}

.wfte_billing_address{ width:95%; }

.wfte_shipping_address_val, .wfte_billing_address_val{padding-left:7px;}

.wfte_address-field-header{ font-weight:bold; font-size:12px; color:#000; padding:3px; padding-left:7px;}

.wfte_addrss_field_main{ padding-top:15px;}

.wfte_product_table{ width:100%; border-collapse:collapse; margin:0px; }

.wfte_payment_summary_table_body .wfte_right_column{ text-align:left; }

.wfte_payment_summary_table{ margin-bottom:10px; }

.wfte_product_table_head_bg{ background:#f4f4f4; }

.wfte_table_head_color{ color:#2e2e2e; }

.wfte_product_table_head{}

.wfte_product_table_head th{ height:36px; padding:0px 5px; font-size:.75rem; text-align:left !important; line-height:10px; font-family: »Helvetica Neue », Roboto, Arial, « Droid Sans », sans-serif; text-transform:uppercase;}

.wfte_product_table_body td, .wfte_payment_summary_table_body td{ font-size:12px; line-height:10px; font-family: »Helvetica Neue », Roboto, Arial, « Droid Sans », sans-serif; text-align:start;}

.wfte_product_table_body td{ padding:7px 5px; border-bottom:solid 1px #dddee0; text-align:start;}

.wfte_product_table .wfte_right_column{ width:20%;}

.wfte_payment_summary_table .wfte_left_column{ width:60%; }

.wfte_product_table_body .product_td b{ font-weight:normal; }

.wfte_payment_summary_table_body td{ padding:5px 5px; border:none;}

.wfte_product_table_payment_total td{ font-size:13px; color:#000; height:28px;}

.wfte_product_table_payment_total td:nth-child(3){ font-weight:bold; }

/* for mPdf */

.wfte_invoice_data{ border:solid 0px #fff; }

.wfte_invoice_data td, .wfte_extra_fields td{ font-size:12px; padding:0px; font-family: »Helvetica Neue », Roboto, Arial, « Droid Sans », sans-serif; line-height:14px;}

.wfte_invoice_data tr td:nth-child(2), .wfte_extra_fields tr td:nth-child(2){ font-weight:bold; }

.wfte_signature{ width:100%; height:auto; min-height:60px; padding:5px 0px;}

.wfte_signature_label{ font-size:12px; }

.wfte_image_signature_box{ display:inline-block;}

.wfte_return_policy{width:100%; height:auto; border-bottom:solid 1px #dfd5d5; padding:5px 0px; margin-top:5px; }

.wfte_footer{height:auto; padding:5px 0px; margin-top:5px;}

.wfte_received_seal{ position:absolute; z-index:10; margin-top:80px; margin-left:0px; width:130px; border-radius:5px; font-size:22px; height:40px; line-height:28px; border:solid 5px #00ccc5; color:#00ccc5; font-weight:900; text-align:center; transform:rotate(-45deg); opacity:.5; }

.float_left{ float:left; }

.float_right{ float:right; }

.wfte_product_table_category_row td{ padding:10px 5px;}

</style>

</div>

<div class= »wfte_company_name wfte_hidden » data-wfte-id= »6″> [wfte_company_name]</div>

</div>

<span class= »wfte_invoice_number_label » data-wfte-id= »11″>__[FACTURE ]__</span><span class= »wfte_invoice_number_val » style= »font-weight:normal; » data-wfte-id= »12″>#[wfte_invoice_number]</span>

</div>

</div><div class= »clearfix » data-wfte-id= »13″></div>

</div>

<span class= »wfte_from_address_name » data-wfte-id= »20″>[wfte_from_address_name]<br data-wfte-id= »21″></span><span class= »wfte_from_address_address_line1″ data-wfte-id= »22″>[wfte_from_address_address_line1]<br data-wfte-id= »23″></span><span data-wfte-id= »24″><span class= »wfte_from_address_postcode » data-wfte-id= »25″>[wfte_from_address_postcode], </span><span class= »wfte_from_address_city » data-wfte-id= »26″>[wfte_from_address_city]</span><br data-wfte-id= »27″></span><span class= »wfte_from_address_contact_number » data-wfte-id= »28″>[wfte_from_address_contact_number]<br data-wfte-id= »29″></span>

</div>

</div></div>

</div>

<span class= »wfte_order_number_label » data-wfte-id= »37″>__[Order No.:]__ </span>

<span class= »wfte_order_number_val » data-wfte-id= »38″>[wfte_order_number]</span>

</div>

<span class= »wfte_order_date_label » data-wfte-id= »40″>__[Order Date:]__ </span>

<span class= »wfte_order_date_val » data-wfte-id= »41″>[wfte_order_date]</span>

</div>

<span class= »wfte_shipping_method_label » data-wfte-id= »43″>__[Shipping Method:]__ </span>

<span class= »wfte_shipping_method_val » data-wfte-id= »44″>[wfte_shipping_method]</span>

</div>

<span class= »wfte_email_label » data-wfte-id= »46″>__[Email:]__</span>

<span class= »wfte_email_val » data-wfte-id= »47″>[wfte_email]</span>

</div>

<span class= »wfte_tel_label » data-wfte-id= »49″>__[Phone:]__ </span>

</div>

<div class= »wfte_order_item_meta » data-wfte-id= »51″>[wfte_order_item_meta]</div>

[wfte_extra_fields]

</div>

</div>

<div class= »wfte_address-field-header wfte_billing_address_label » data-wfte-id= »55″>__[Billing Address:]__</div>

<span class= »wfte_billing_address_name » style= »font-weight: bold; » data-wfte-id= »57″>[wfte_billing_address_name]<br data-wfte-id= »58″></span><span class= »wfte_billing_address_address_1″ data-wfte-id= »59″>[wfte_billing_address_address_1]<br data-wfte-id= »60″></span><span data-wfte-id= »61″><span class= »wfte_billing_address_postcode » data-wfte-id= »62″>[wfte_billing_address_postcode], </span><span class= »wfte_billing_address_city » data-wfte-id= »63″>[wfte_billing_address_city]</span><br data-wfte-id= »64″></span>

</div>

</div></div>

</div>

<div class= »wfte_received_seal wfte_hidden » data-wfte-id= »68″><span class= »wfte_received_seal_text » data-wfte-id= »69″>__[RECEIVED]__</span>[wfte_received_seal_extra_text]</div>

</div>

[wfte_product_table_start]

<th class= »wfte_product_table_head_product wfte_product_table_head_bg wfte_table_head_color » col-type= »product » style= »background-color: rgb(255, 255, 255); font-weight: normal; width: 60%; » data-wfte-id= »74″>__[Article]__</th>

<th class= »wfte_product_table_head_quantity wfte_product_table_head_bg wfte_table_head_color » col-type= »quantity » style= »background-color: rgb(255, 255, 255); font-weight: normal; » data-wfte-id= »75″>__[Quantity]__</th><th class= »wfte_product_table_head_price wfte_product_table_head_bg wfte_table_head_color » col-type= »price » style= »background-color: rgb(255, 255, 255); font-weight: normal; » data-wfte-id= »76″>__[P.U.]__</th><th class= »wfte_product_table_head_total_price wfte_product_table_head_bg wfte_table_head_color wfte_right_column » col-type= »total_price » style= »background-color: rgb(255, 255, 255); font-weight: normal; » data-wfte-id= »77″>__[Prix total]__</th>

</tr>

</thead>

</tbody>

</table>

[wfte_product_table_end]

</tr>

</tr>

<td class= »wfte_product_table_payment_total_label wfte_text_right wfte_table_head_color wfte_product_table_head_bg » data-wfte-id= »87″>__[Total]__</td>

<td class= »wfte_product_table_payment_total_val wfte_right_column wfte_text_left wfte_table_head_color wfte_product_table_head_bg » data-wfte-id= »88″>[wfte_product_table_payment_total]</td>

</tr>

</tbody>

</table>

</div>

</div><div class= »clearfix » data-wfte-id= »91″></div><div class= »clearfix » data-wfte-id= »92″></div><div class= »wfte_row wfte_padding_left_right clearfix » data-wfte-id= »93″>

</div><div class= »clearfix » data-wfte-id= »95″></div><div class= »wfte_row wfte_padding_left_right clearfix » data-wfte-id= »96″>

<span class= »wfte_product_table_payment_method_label » style= »font-weight:normal; » data-wfte-id= »100″>__[Paiement :]__</span>

<span style= »font-weight:normal; » data-wfte-id= »101″>[wfte_product_table_payment_method]</span>

</div>

</div>

</div></div>

</div></div>

</div></div>

</div><div class= »clearfix » data-wfte-id= »113″></div><div class= »wfte_row wfte_padding_left_right clearfix » data-wfte-id= »114″>

</div><div class= »clearfix » data-wfte-id= »116″></div><div class= »wfte_row wfte_padding_left_right clearfix » style= »border-bottom-style: solid; border-bottom-width: 0px; » data-wfte-id= »117″>

</div><div class= »clearfix » data-wfte-id= »120″></div><div class= »wfte_row wfte_padding_left_right clearfix » data-wfte-id= »121″>

[wfte_footer]

</div></div>

</div>

</div></div><input type= »hidden » value= »236″ class= »wt_pklist_last_dom_id »></style><input type= »hidden » value= »123″ class= »wt_pklist_last_dom_id »>