ptityop Posted September 10, 2022 Share Posted September 10, 2022 (edited) Bonjour, Je rencontre quelques difficultés très frustrantes en modifiant les fichiers Tpl. Nous avons un invoice modifié et bien qu'ayant reussi 90% des modifications voulues il en reste 10% qui me font galérer sérieusement et dont je ne comprennent pas la logique alors qu'il s'agit de simple html. Par exemple, je suis en train de modifier invoice.summery-tab.Tpl, j'y ai mis 2 tables HTML et pour une raison obscure, il m'est impossible d'appliquer une marge entre les 2, j'ai beau mettre le style sur la table, ou dans le css a part, cela ne marche simplement pas, j'ai tenté de mettre un <br> , entourer les tables d'un div , rajouter une table entre les 2 , et là c'est pire, tout disparaît .... je ne comprends pas ... le fichier invoice.tpl lui n'est quasiment pas retouché, j'ai juste change l'ordre de certaines <tr> . Je vous joint mon code et une impression d'écran des 2 tables que je tente de séparer en espérant que kkun puisse m'éclairer sur la raison pour laquelle une simple modification de ce genre peut causer autant de pb. En vous remerciant d'avance <table id="summary-tab" margin="1" class="white" width="100%"> <tr > <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td> <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td> <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td> </tr> </table> <table id="summary-tab" width="100%" class="white" width="100%"> <tr> <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr> <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td> </tr> </table> Edited September 11, 2022 by ptityop (see edit history) Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 Bonjour, déjà faut pas 2 id identiques (table id="summer-tab"). Un id doit être unique. Ensuite si on veut ajouter du style dans le fichier tpl et pas dans le css il faut mettre style="margin: 1px;". Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 (edited) Merci pour la réponse. Même en mettant des id différent et en mettant le style, cela ne marche pas, j’ai vraiment tout tenté, il y a autre chose qui bloque. Pourquoi si je rajoute une table entre les 2, tout disparait ... c'est aussi etrange comme comportement Edited September 11, 2022 by ptityop (see edit history) Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 J'ai copié le code dans Notepad (ce qui explique que les données n'y soient pas) et voici le code HTML (j'ai dû ajouter aussi les bordures, n'ayant pas la feuille de style) <table id="summary-tab-1" style="border:1px solid #000000;margin: 0 auto 5px;max-width:600px;" class="white" width="100%"> <tr > <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td> <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td> <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td> </tr> </table> <table id="summary-tab-2" style="border: 1px solid #000000;max-width:600px;margin:auto;" class="white" width="100%"> <tr> <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr> <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td> </tr> </table> Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 quelle version de PS ? que je teste sur un vrai fichier tpl (envoyez aussi le vôtre, tiens, que je vérifie) Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 peut-être aussi un lien vers le site ? Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Cest tres sympa ... Mais je crains que cela ne marche tjrs pas, le style de ces tables ne semble pas etre dans invoice.style-tab.tpl ...je joins la feuille de style , je n'y touche quasiment pas, j'ai pourtant l'habitude mais là je sèche totalement {assign var=color_header value="#F0F0F0"} {assign var=color_border value="#000000"} {assign var=color_border_lighter value="#CCCCCC"} {assign var=color_line_even value="#FFFFFF"} {assign var=color_line_odd value="#FFFFFF"} {assign var=font_size_text value="9pt"} {assign var=font_size_header value="9pt"} {assign var=font_size_product value="8pt"} {assign var=height_header value="20px"} {assign var=table_padding value="4px"} <style> table, th, td { margin: 0!important; padding: 0!important; vertical-align: middle; font-size: {$font_size_text}; white-space: nowrap; } table.product { border: 1px solid {$color_border}; border-collapse: collapse; } table#addresses-tab tr td { font-size: large; } table#summary-tab { padding: {$table_padding}; border: 1pt solid {$color_border}; } table#total-tab { padding: {$table_padding}; border: 1pt solid {$color_border}; } table#note-tab { padding: {$table_padding}; border: 1px solid {$color_border}; } table#note-tab td.note{ word-wrap: break-word; } table#tax-tab { padding: {$table_padding}; border: 1pt solid {$color_border}; } table#payment-tab, table#shipping-tab { padding: {$table_padding}; border: 1px solid {$color_border}; } th.product { border-bottom: 1px solid {$color_border}; background-color:white; } tr.discount th.header { border-top: 1px solid {$color_border}; } tr.product td { border-bottom: 1px solid {$color_border_lighter}; } tr.color_line_even { background-color: {$color_line_even}; } tr.color_line_odd { background-color: {$color_line_odd}; } tr.customization_data td { } td.product { vertical-align: middle; font-size: {$font_size_product}; } th.header { font-size: {$font_size_header}; height: {$height_header}; background-color: {$color_header}; vertical-align: middle; text-align: left; font-weight: bold; } th.header-right { font-size: {$font_size_header}; height: {$height_header}; background-color: {$color_header}; vertical-align: middle; text-align: right; font-weight: bold; } th.payment, th.shipping { background-color: {$color_header}; vertical-align: middle; font-weight: bold; } th.tva { background-color: {$color_header}; vertical-align: middle; font-weight: bold; } tr.separator td { border-top: 1px solid #000000; } .left { text-align: left; } .fright { float: right; } .right { text-align: right; } .center { text-align: center; } .bold { font-weight: bold; } .border { border: 1px solid black; } .no_top_border { border-top:hidden; border-bottom:1px solid black; border-left:1px solid black; border-right:1px solid black; } .grey { background-color: {$color_header}; } /* This is used for the border size */ .white { background-color: #FFFFFF; } .big, tr.big td{ font-size: 110%; } .small, table.small th, table.small td { font-size:small; } .padding { padding: 5px; } .margin-bottom10 { margin-bottom: 10px; } .border-bottom1 { border-bottom: solid black 1px; } </style> Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Je suis sur 1.7.8.5, je vous joint mon fichier invoice.tpl, que je n'ai pas touche pour cette section, en vous remerciant d'avance ! invoice.style-tab.tpl invoice.summary-tab.tpl invoice.tpl Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 Déjà au début il y a marge:0!important pour table. Ce qui signifie qu'il ne prendra pas en compte une marge différente Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 (edited) <table id="summary-tab" margin="1" class="white" width="100%" style="margin: 1px;".> il y a un point après " (juste pour info 🙂 ) Edited September 11, 2022 by kerlin (see edit history) Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 et bien .... tjrs pas, j'enleve le margin Important, et corrige le point ... tjrs pareil, rien ne se passe <table id="summary-tab" margin="1" class="white" width="100%" style="margin-bottom: 10px;"> <tr > <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td> <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td> <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td> </tr> </table> <table id="summary-tab2" width="100%" class="white" width="100%"> <tr> <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr> <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td> </tr> </table> Ca me rend fou 🙂 on peut se tutoyer sans pb ! Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 C'est comme pourquoi tout disparaît en rajoutant une table ou un div entre les 2 tables .... bizarre ça aussi Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Je me demande si c'est pas dans HTMLTemplateInvoice.php qu'il faut chercher, mais je vois pas ou .. Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 dans le php ?? je ne vois pas pourquoi. Je suis en train de bosser sur un site avec la même version. Je vais faire le test 1 Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Je disais dans le php, car c'est là que se trouve par exemple les mesures tu tableau des produits ... Merci en tout cas de prendre le tps de tester. J'attends le retour avec impatience, si tu me dis que ca marche sur ton site alors le ca va être encore plus complique de comprendre 🙂 Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 (edited) j'ai ouvert le fichier original de mon thème. En fait, pourquoi créer 2 tables ? Il y a 2 <tr>. Faut essayer en rajoutant un style="margin-bottom:10px;" au premier Edited September 11, 2022 by kerlin (see edit history) Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Même en appliquant une marge sur le <tr> rien ne se passe ... j’ai vraiment tout tenté ... ca fonctionne sur ton site ? Ou c pareil ? Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 (edited) <table id="summary-tab" class="white" width="100%"> <tr> <td>{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td> <td>{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td> <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td> </tr> </table> <table id="summary-tab2" width="100%" class="white"> <tr> <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr> <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td> </tr> </table> Ci-dessus le code des tables Ci-dessous le code dans invoice-style-tab.tpl {assign var=color_header value="#F0F0F0"} {assign var=color_border value="#000000"} {assign var=color_border_lighter value="#CCCCCC"} {assign var=color_line_even value="#FFFFFF"} {assign var=color_line_odd value="#F9F9F9"} {assign var=font_size_text value="9pt"} {assign var=font_size_header value="9pt"} {assign var=font_size_product value="9pt"} {assign var=height_header value="20px"} {assign var=table_padding value="4px"} {assign var=table_padding_bottom value="50px"} <style> table, th, td { margin: 0!important; padding: 0!important; vertical-align: middle; font-size: {$font_size_text}; white-space: nowrap; } table.product { border: 1px solid {$color_border}; border-collapse: collapse; } table#addresses-tab tr td { font-size: large; } table#summary-tab { padding: {$table_padding}; padding-bottom: {$table_padding_bottom}; } Le padding fonctionne, lui. Et à tout hasard j'ai retiré la bordure sous numéro de facture Edited September 11, 2022 by kerlin (see edit history) Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Oui mais le resultat n'est pas le même ... C’est vraiment le margin qu'il faut arriver à faire fonctionner ....sur le 1.6 ca marche tres bien ... En tt cas ca me rassure de ne pas être le seul a ne pas y arriver ... c'est dingue cette histoire ! Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 le premier screen, c'est le résultat recherché ? Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 oui Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 alors avec les div ça fonctionne. Le code (j'ai remplacé id par class pour le cas où il y aurait un css ailleurs. Et donc les 2 tables peuvent alors avoir la même class) <div> <table class="summary-tab" width="100%"> <tr> <td class="border-right1">{l s='Numéro de Facture: ' pdf='true'}<br /><strong>{$title|escape:'html':'UTF-8'}</strong></td> <td class="border-right1">{l s='Date de facture: ' pdf='true'}<br /><strong>{$date|escape:'html':'UTF-8'}</strong></td> <td>{l s='Numéro de client: ' pdf='true'}<strong>{$order->id_customer}</strong></td> </tr> </table> </div> <div> <table class="summary-tab" width="100%" > <tr> <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td></tr><tr> <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td></tr><tr> <td>{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td> </tr> </table> </div> le css dans le fichier style-css {assign var=color_header value="#F0F0F0"} {assign var=color_border value="#000000"} {assign var=color_border_lighter value="#CCCCCC"} {assign var=color_line_even value="#FFFFFF"} {assign var=color_line_odd value="#F9F9F9"} {assign var=font_size_text value="9pt"} {assign var=font_size_header value="9pt"} {assign var=font_size_product value="9pt"} {assign var=height_header value="20px"} {assign var=table_padding value="4px"} <style> div { padding: 0; margin:0; white-space:nowrap; } table, th, td { margin: 0!important; padding: 0!important; vertical-align: middle; font-size: {$font_size_text}; } table.product { border: 1px solid {$color_border}; border-collapse: collapse; } table#addresses-tab tr td { font-size: large; } table.summary-tab { padding: {$table_padding}; border: 1px solid {$color_border}; } table.summary-tab .border-bottom1 { border-bottom: 1px solid grey; } table.summary-tab .border-right1 { border-right: 1px solid grey; } 1 Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Bravooooo !!!! Enfin !! Bien vu ! un grand merci ... je ferai avec des div la prochaine fois alors ! Encore un grand merci ! Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 y a plus qu'à mettre en résolu 😉 Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 Je fais ca comment ? Link to comment Share on other sites More sharing options...
kerlin Posted September 11, 2022 Share Posted September 11, 2022 il faut éditer le premier post et ajouter [RESOLU] dans le titre Link to comment Share on other sites More sharing options...
ptityop Posted September 11, 2022 Author Share Posted September 11, 2022 c fait Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now