Adjust Header / Letter CSS

I realized that the HTML print format or PDF print format left a big space at the top and bottom for paper. Trying to do some setting for css, however, still left a big spacing for header. Any idea where to fix this ?

Hi @alan,

try this CSS:

.print-format {
  margin-top: 0mm;
  margin-left: 0mm;
  margin-right: 0mm;
  margin-bottom: 0mm;
} 

If it does not work, it might be related to this: https://github.com/frappe/frappe/issues/4972

Maybe you can share a screenshot?

1 Like

Hi,
I’m using a HTML custom print format.

I try to do some custom css, however, I found out that custom css doesn’t work for custom html print format. Anyone kindly correct me or comment if what I mentioned is wrong …

I need a footer to fix at the bottom of Letter Half Paper, but it will change by follow the number of row. Any solutions ?

Hi @alan,

normally, the custom CSS should work. There are several cases, where there are !important or inline styles set, which causes the CSS-commands to be overwritten (e.g. font size in the pdf). I know this is not nice, but in this case, again overwrite with !important.

To create a footer, something like this should do (in the custom html section):

<div id="footer-html" class="visible-pdf">
  <p class="text-center small page-number visible-pdf">Page <span class="page"></span> of <span class="topage"></span></p>
</div>

Hope this helps…

Hi,
Possible to look at the following html print format,

Every page I print would have different footer location for different item row.

Wondering which part did wrongly.

{%- macro add_header(page_num, max_pages, doc, letter_head, no_letterhead) -%}
    {% if letter_head and not no_letterhead %}
    <div class="letter-head" spacing="none">{{ letter_head }}</div>
    {% endif %}
{% if doc.print_heading_template %}
        {{ frappe.render_template(doc.print_heading_template, {"doc":doc}) }}
    {% else %}
    <div>
		<h2>{{ doc.select_print_heading or (doc.print_heading if doc.print_heading != None
			else _(doc.doctype)) }}
			<small>{{ doc.sub_heading if doc.sub_heading != None
				else doc.name }}</small>
        </h2>
    </div>
{% endif %}


   {%- if doc.meta.is_submittable and doc.docstatus==0-%}
    <div class="alert alert-info text-center">
        <h4 style="margin: 0px;">{{ _("DRAFT") }}</h4></div>
    {%- endif -%}
    {%- if doc.meta.is_submittable and doc.docstatus==2-%}
    <div class="alert alert-danger text-center">
        <h4 style="margin: 0px;">{{ _("CANCELLED") }}</h4></div>
    {%- endif -%}
    {% if max_pages > 1 %}
    <p class="text-right">{{ _("Page #{0} of {1}").format(page_num, max_pages) }}</p>
    {% endif %}
{%- endmacro -%}

{%- from "templates/print_formats/standard_macros.html" import add_header2, add_header,
         render_field, add_foot -%}


{# {{ add_header(0,1,doc,letter_head, no_letterhead) }} #}


{% if letter_head and not no_letterhead %}
<div>
<div class="letter-head">{{ letter_head }}</div>
</div>
{% endif %}


<big>
<p class="text-center"><b>{{ _("Sales Order") }}</b></p><br>
</big>

<div class="row">        
     <div class="col-xs-6">            
        
	<div class="row">
            <div class="col-xs-5 text-left"><font size="2px"><b>Customer Name</b></font></div>
            <div class="col-xs-7 ">{{ doc.customer }}</div>
        </div>

        <div class="row">
            <div class="col-xs-5 text-left"><b><b>Address</b></div>
            <div class="col-xs-7 "><b>{{ doc.address_display or ''}}</b></div>
        </div>   

	<div class="row">
            <div class="col-xs-5 text-left"><b>Contact</b></div>
            <div class="col-xs-7 ">{{ doc.contact_display or ''}}</div>
        </div>  
	             
    </div>

    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-5 text-left"><b><b>Order No</b></div>
            <div class="col-xs-7">{{ doc.name or ''}}</div>
        </div>
        <div class="row">
            <div class="col-xs-5 text-left"><b>Date</b></div>
            <div class="col-xs-7 ">
                {{ doc.get_formatted("transaction_date") or ''}}</div>
        </div>    
         {%- if doc.po_no -%}
        <div class="row">
            <div class="col-xs-5 text-left"><b>Reference</b></div>
            <div class="col-xs-7 ">{{ doc.po_no or ''}}</div>
        </div>
         {%- endif -%}
        {%- if doc.po_date -%}
        
        {%- endif -%}

	{%- for row in doc.sales_team -%}
	<div class="row">
            <div class="col-xs-5 text-left"><b>Salesman</b></div>
            <div class="col-xs-7 ">{{ row.sales_person or ''}}</div>
        </div>  
        {%- endfor -%}

    </div>
            
</div>
        
{%- set n = 5 -%} 
{%- set page = 0 -%}

<table class="table" style="line-height: 10px; font-weight:normal;">
  <tbody>
    <tr>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">No</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Item</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Description</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Qty</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Price In. GST</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Sub-Total Ex. GST</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">GST Amount</td>
      <td td style="border-top: 1px solid black; border-bottom: 1px solid black;"class="text-right">Total (RM)</td>
    </tr>

{%- if (doc.items|length <= n) -%} 
{%- set page_size = 1 -%}
{%- elif ((doc.items|length > n) and (doc.items|length <= (n*2))) -%} 
{%- set page_size = 2 -%}
{%- elif ((doc.items|length % n == 0)) -%} 
{%- set page_size = doc.items|length // n -%}
{% else %}
{%- set page_size = (doc.items|length // n)+1 -%}
{%- endif -%} 

      
{%- for i in range(0,page_size * n) -%} 
{%- set row = doc.items[i] -%}
           
{% if row != null -%}
<tr height="5%">
<td style="width: 2%; border-style: none;">{{ row.idx }}</td>
<td style="width: 15%; text-align: left; border-style: none;">{{ row.item_code}}    </td>
<td style="width: 28%; text-align: left; border-style: none;">{{ row.description }}    </td>
<td style="width: 5%; text-align: center; border-style: none;">{{ row.qty }} </td>
<td style="width: 10%; text-align: right; border-style: none;">
{{ '%0.2f'| format(row.rate|float)}}</td>
<td style="width: 10%; text-align: right; border-style: none;">{{ '%0.2f'| format(row.net_amount|round(2,'ceil')) }} </td>
<td style="width: 15%; text-align: right; border-style: none;">{{'%0.2f'| format( row.amount - row.net_amount|round(2,'ceil')) }}</td>
<td style="width: 15%; text-align: right; border-style: none;">{{ row.get_formatted("amount", doc)}}</td>
</tr>



{% else %}
<tr style="width: 100%; text-align: right; border-style: none;">
</tr>

{%- endif -%}





<!-- page-break here -->
{% if ((i+1) >= n) and ((i+1) % n == 0) and ((i+1) < doc.items|length) -%}
     {%- set page = page + 1 -%}    

</tbody>
</table> 


<div id="footer-html">
		{% if not no_letterhead and footer %}
<div class="letter-head-footer">{{ footer }}</div>
		{% endif %}
</div>


<div class="page-break">
</div>     


{% if letter_head and not no_letterhead %}
    <div class="letter-head">{{ letter_head }}</div>
{% endif %}



<big>
<p class="text-center"><b>{{ _("Sales Order") }}</b></p><br>
</big>

<div class="row">        
     <div class="col-xs-6">            
        
	<div class="row">
            <div class="col-xs-5 text-right"><b>Customer Name</b></div>
            <div class="col-xs-7 ">{{ doc.customer }}</div>
        </div>

        <div class="row">
            <div class="col-xs-5 text-right"><b>Address</b></div>
            <div class="col-xs-7 ">{{ doc.address_display or ''}}</div>
        </div>

	<div class="row">
            <div class="col-xs-5 text-right"><b>Contact</b></div>
            <div class="col-xs-7 ">{{ doc.contact_display or ''}}</div>
        </div>    
      
    </div>

    <div class="col-xs-6">

        <div class="row">
            <div class="col-xs-5 text-right"><b>Order No</b></div>
            <div class="col-xs-7 ">{{ doc.name or ''}} </div>
        </div>

        <div class="row">
            <div class="col-xs-5 text-right"><b>Date</b></div>
            <div class="col-xs-7 ">{{ doc.get_formatted("transaction_date") or ''}}</div>
        </div>    

         {%- if doc.po_no -%}
        <div class="row">
            <div class="col-xs-5 text-right"><b>Reference</b></div>
            <div class="col-xs-7 ">{{ doc.po_no or ''}}</div>
        </div>
         {%- endif -%}

        {%- if doc.po_date -%}
        <div class="row">
            <div class="col-xs-5 text-right"><b>PO Date</b></div>
            <div class="col-xs-7 ">
                {{ doc.get_formatted("po_date") or ''}}</div>
        </div>  
        {%- endif -%}

	{%- for row in doc.sales_team -%}
	<div class="row">
            <div class="col-xs-5 text-right"><b>Salesman</b></div>
            <div class="col-xs-7 ">{{ row.sales_person or ''}}</div>
        </div>  
        {%- endfor -%}

    </div>
            
</div>

<!-- Items table header -->
<table class="table" style="line-height: 10px; font-weight:normal;">
    <tr>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">No</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Item</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Description</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Qty</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Price In GST</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">Sub-Total Ex GST</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;">GST Amount</td>
      <td style="border-top: 1px solid black; border-bottom: 1px solid black;" class="text-right">Total (RM)</td>
    </tr>
  
{%- endif -%}

{%- endfor -%}  
 
 </tbody>
</table>  



<div class="row">
<hr width="100%"; color="black"; >

</div>
   
<div class="row">
 	<div class="col-xs-6"> 
	
	<div>
 	{{ _("Total :" " ") }}
	{{ doc.in_words or '' }}
	</div>
	
	<div>
 	<b>{{ _("Payment Info : ") }}</b>
	<b>{{ doc.get_formatted('advance_paid' or '') }}</b>
	</div>
	
	<div class="row">
	<div class="col-xs-12">
 	<b>{{ _("Remarks : ") }}</b>
	{{ doc.remark or '' }}
	</div>
	</div>

	</div>
	
	
    	<div class="row">
	<div class="col-xs-6 text-right"></div>
    	<div class="col-xs-4 text-right">{{ _("Net Total") }}</div>
    	<div class="col-xs-2 ">{{ doc.get_formatted("total") or '' }}</div>
    	</div>  
	
	<div class="row">
	<div class="col-xs-6"></div>
	<div class="col-xs-4 text-right">{{ _("GST") }} </div>
	<div class="col-xs-2 ">{%- for row in doc.taxes -%}{{ row.description }} : {{ row.rate }} %{{ '%0.2f'| format(row.tax_amount) }}{%- endfor -%}	</div>
	</div> 
          
	<div class="row">
	<div class="col-xs-6"></div>
    	<div class="col-xs-4 text-right">{{ _("Grand Total") }}</div>
    	<div class="col-xs-2 ">{{ doc.get_formatted("grand_total") or '' }} </div>
	</div>

	


</div>



<div id="footer-html">
		{% if not no_letterhead and footer %}
<div class="letter-head-footer">{{ footer }}</div>
		{% endif %}
</div>






{%- from "templates/print_formats/standard_macros.html" import add_header,
	 render_field -%}