This is an internal article and thus not to be shared with anyone outside of Hawk HR Team.
This is an URL based feature. Kindly refer to the below pointers:
URL
Companydomain/ControlPanel/settings/customtemplates
Steps
- Copy the URL with company domain name
- Click on +Add New
- Define Name and select Template type as Payslip
- Paste the below HTML code and make changes in the code as per your requirements
- Click on Add
Sample Payslip HTML code
Copy this code in the
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DT...;
<html xmlns=";
<head>
<title></title>
<style type="text/css">
table.colwithborder td {
border: 1.5px solid #93bbdd;
border-collapse: collapse;
}
table.rightborder td {
border-right: 1.5px solid #6996bd;
border-collapse: collapse;
padding: 5px 10px 5px 10px;
vertical-align: middle;
}
table thead tr {
color: #4c8fbd;
background-color: #eef4f9;
border-bottom: 1.5px solid #6996bd;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
}
.tdalign {
float: right;
}
.table-design {
border-bottom: 4px double #333;
border-top: 4px double #999;
padding: 10px 0;
}
</style>
</head>
<body style="width:85%; margin:25px auto 0;position:relative">
<div style="margin: 0; padding: 0; width: 100%!important; ">
<div style="padding: 30px; background: #ffffff; ">
<!--<div style="width:40%">
<img src="~CompanyLogo`" hspace="0" vspace="0" border="0" align="left" alt="" style="vertical-align:top;max-width:200px;font-size:19px;width:inherit;font-family:Arial,calibri" />
</div>-->
<table cellspacing="0" cellpadding="0" style="color: #000; font: 16px helvetica,arial,sans-serif; width: 100%; border: none; ">
<tr>
<td style="width:25%;">
<img src="~CompanyLogo`" hspace="0" vspace="0" border="0" align="left" alt="" style="vertical-align: top; max-height: 100px; max-width: 200px; font-size: 19px; font-family: Arial,calibri" />
</td>
<td style="width:50%;" align="center">
<strong> ~CompanyName`</strong>
<br />
~CompanyAddressLine1`
<br />
~CompanyAddressLine2`
<br />
Phone : ~Phone`
<br />
Email: ~Email`
</td>
<td style="width:25%;"></td>
</tr>
</table>
<p align="center" style="font-size: 20px; font: 20px helvetica,arial,sans-serif; font-weight: bold; color: #4c8fbd; ">
~PayslipFor`
</p>
<table style="border: 1.5px solid #000000; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-color: #6996bd; box-shadow: none; border-collapse: collapse; border-width:1.5px" align="center" cellpadding="10">
<thead>
<tr style="color: #4c8fbd; background-color: #eef4f9; position: relative; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; font-size: 15px; line-height: 1; padding: 10px;">
<th align="left" style="width:60%">
Employee Details
</th>
<th align="left" style="width: 40%">
Salary Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Name</td>
<td><b>~EmployeeName`</b></td>
</tr>
<tr>
<td>Email Id</td>
<td><b>~EmployeeEmail`</b></td>
</tr>
<tr>
<td>Emp Code</td>
<td><b>~EmployeeCode`</b></td>
</tr>
<tr>
<td>Designation</td>
<td><b>~Designation`</b></td>
</tr>
<tr>
<td>Date of Joining</td>
<td><b>~JoiningDate`</b></td>
</tr>
~ExitDate`
<tr>
<td>Address</td>
<td><b>~Address`</b></td>
</tr>
~PFNumber`
~EmployeePAN`
~UAN`
~BankName`
~AccountNumber`
</table>
</td>
<td valign="top">
<table>
<tr>
<td>Salary Period</td>
<td><b>~SalaryPeriod`</b></td>
</tr>
<tr>
<td>Working Days</td>
<td><b>~EmployeeWorkingDays`</b></td>
</tr>
~ArrearDays`
<tr>
<td>Leaves</td>
<td><b>~NumberOfLeaves`</b></td>
</tr>
<tr>
<td>LOP</td>
<td><b>~UnpaidLeaves`</b></td>
</tr>
~PaidDays`
~OverTimedays`
~NetPaidDays`
</table>
</td>
</tr>
</tbody>
</table>
<br />
<table class="rightborder" style="border: 1.5px solid #000000; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 15px; border-collapse: collapse; border-color: #6996bd; box-shadow: none; border-width: 1.5px" align="center" cellpadding="10">
<thead>
<tr>
<th style="width:20%" align="left">
Earnings
</th>
<th style="width:20%" align="left">
Rate
</th>
<th style="width: 20%; border-right: 1.5px solid #6996bd;" align="left">
Actual
</th>
<th style="width:20%" align="left" colspan="2">
Deductions
</th>
</tr>
</thead>
<tbody>
~ComponentDetails`
<tr style=" border-color: #6996bd; box-shadow: none; border-width: 1.5px; border-top: 1.5px solid #6996bd;">
<td style="width:20%; border-width: 1.5px;"><b>Earning Total</b></td>
<td style="width:20%; border-width: 1.5px;" align="right"><b>~FullEarnings`</b></td>
<td style="width:20%; border-width: 1.5px;" align="right"><b>~ActualEarnings`</b></td>
<td style="width:20%; border-width: 1.5px;">
<b> Deduction Total</b>
</td>
<td style="width:20%; border-width: 1.5px;" align="right"><b>~Deductions`</b></td>
</tr>
</tbody>
</table>
<br />
<table class="table-design" style="width: 35%; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; padding-right: 5px; padding-left: 5px; border-collapse: collapse; border-color: #6996bd; box-shadow: none; " align="left">
~NetPay`
</table>
<br />
<br />
<table style="width: 100%; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; padding-right: 5px; padding-left: 5px; border-collapse: collapse; border-color: #6996bd; box-shadow: none; " align="left">
<tr><td style="width:100%"><span style="font-size:15px;"></span>~NetSalaryInWords`</td></tr>
</table>
<br />
<br />
<br />
<br />
<br />
<table>
<tr>
<td>
<img src="~DigitalSignature`" hspace="0" vspace="0" border="0" align="left" alt="" style="vertical-align: top; max-height: 100px; max-width: 200px; font-size: 19px; font-family: Arial,calibri" />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Navigate to the following path to use this payslip template in the salary template: Control Panel->Payroll->Salary Template->Edit. Once here you can update the payslip template on the first page.