Tips on styling tpl files ?

[ptityop]

Hello, I am struggling applying some style to some elements in the tpl files. For instance I have changed some tables to be stacked up and for some reason i am unable to apply margins between 2 tables that are stacked. I tried to put margin in the css , inline or in the styling sheet, but no effect, if I try with a <br> i even have all the content disappearing... Are there any subtleties when it comes to styling those tpl files ?

[mati7716]

Right click on the selected element on the page -> "explore element". This way you can locate which file is responsible for a given item.

[ptityop]

Thanks for your reply, but how do you do that on a pdf ? How do I render a tpl file in browser to get the console working.

[mati7716]

write me the website address and the element you want to change on it

[ptityop]

It is not an element, it is a tpl that generates pdf .... not something rendering in the browser

[mati7716]

Have you tried this?

<span style="margin-left: 20px;"> text </span>

[ptityop]

The idea is to separate 2 tables in invoice.summary-tab.tpl, but whatever we do nothing works .... 

<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>

I tried applying margins all possible ways and nothing works, inline, in the css stylesheet, adding a table in between(everything disappears) ... Others have tried but nobody seems to manage ...

[mati7716]

Do you want two table next to each other? If so, try this one.

 

<table style=" display: inline;" id="summary-tab" margin="1" class="white" width="50%"  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 style=" display: inline;" id="summary-tab2" lass="white" width="50%">
    <tr>
          <td class="border-bottom1">{l s=' Date de commande: ' pdf='true'}<strong>{dateFormat date=$order->date_add full=0}</strong></td>
          <td class="border-bottom1">{l s=' Référence de commande: ' pdf='true'}<strong>{$order->getUniqReference()}</strong></td>
          <td class="border-bottom1">{l s=' Votre référence: ' pdf='true'}</td>
          <td class="border-bottom1">{l s=' Notre N° de TVA: ' pdf='true'} <strong>CHE-230.482.509</strong></td>
    </tr>
</table>

 

[ptityop]

Actually i needed them stacked, if you try you will see you cannot apply simple margins .... it does not work, but someone managed to solve this , putting tables inside a dive then applying margins to the divs. I have attached the result wanted, give it a go and you will see that it is impossible to apply simple margins ... why ? Still a mystery !

Thanks a lot for trying to help!