Not a question, but rather something for everyone to explore. I don't know how many of you explore the tips & resources section so wanted to post this in the Q&A instead. This goes against the "no-code" idea, since this is entirely based on HTML and CSS. If there is any interest I can provide sample "code".
interesting brother
I’ve been thinking of switching over to HTML. Sample code would be nice 👍🏻.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 672px;
}
.page-header, .page-header-space {
height: 150px;
}
.page-footer, .page-footer-space {
height: 110px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 672px;
border-top: 1px solid black;
}
.page-header {
position: fixed;
top: 0;
width: 672px;
border-bottom: 1px solid black;
}
.page {
page-break-after: always;
}
tr.borderstyle td:nth-child(n+2) {
border: 1px solid black;
}
div.stamp {
position: fixed;
display: <p><<IF(ISBLANK([DATE INVOICE PAID]), "none", "block")>></p>;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
padding: 8px;
border: 2px solid #0095ff;
rotate: -5deg;
opacity: 0.75;
text-align: center;
}
.stamp div:first-child {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-color: #0060ff;
-webkit-text-stroke-width: 1.25px;
font: bold 30pt arial;
}
.stamp div:nth-child(2) {
font: bold 12pt arial;
color: red;
}
div.notice {
position: fixed;
display: <p><<IFS(ISNOTBLANK([FinalNotice]), "block", ISNOTBLANK([3rdNotice]), "block", ISNOTBLANK([2ndNotice]), "block", TRUE, "none")>></p>;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 8px;
border: <p><<IFS(ISNOTBLANK([FinalNotice]), "2px solid #8b0000", ISNOTBLANK([3rdNotice]), "2px solid #FF8C00", ISNOTBLANK([2ndNotice]), "2px solid #8B8000")>></p>;
rotate: -5deg;
opacity: 0.75;
text-align: center;
}
.notice div:first-child {
-webkit-text-fill-color: <p><<IFS(ISNOTBLANK([FinalNotice]), "red", ISNOTBLANK([3rdNotice]), "orange", ISNOTBLANK([2ndNotice]), "yellow")>></p>;
-webkit-text-stroke-color: <p><<IFS(ISNOTBLANK([FinalNotice]), "#8b0000", ISNOTBLANK([3rdNotice]), "#FF8C00", ISNOTBLANK([2ndNotice]), "#8B8000")>></p>;
-webkit-text-stroke-width: 1.5px;
font: bold 30pt arial;
}
.notice div:nth-child(2) {
color: <p><<IFS(ISNOTBLANK([FinalNotice]), "#8b0000", ISNOTBLANK([3rdNotice]), "#FF8C00", ISNOTBLANK([2ndNotice]), "#8B8000")>></p>;
font: bold 18pt arial;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="stamp"><div>PAID</div><div><p><<If:ISNOTBLANK([DATE INVOICE PAID])>></p><<TEXT([DATE INVOICE PAID], "MMM DD YYYY")>><p><<EndIf>></p></div></div>
<div class="notice">
<div><<IFS(ISNOTBLANK([FinalNotice]), "FINAL NOTICE", ISNOTBLANK([3rdNotice]), "3RD NOTICE", ISNOTBLANK([2ndNotice]), "2ND NOTICE")>></div>
<div><<IFS(ISNOTBLANK([FinalNotice]), [FinalNotice], ISNOTBLANK([3rdNotice]), [3rd Notice], ISNOTBLANK([2ndNotice]), [2ndNotice])>></div>
</div>
<div class="page-header" style="text-align: center">
<table>
<col style="width:125px;"></col>
<col style="width:422px;"></col>
<col style="width:125px;"></col>
<tr>
<td style="text-align:left;">
<img src="https://drive.google.com/thumbnail?id=YourGoogleDriveFileID" style="width:90px;" />
</td>
<td style="text-align:center;font:bold 12pt arial;">
Your Company<br/>
Your Company Address<br/>
Your City, State and Zip<br/>
Phone: Your Phone Number<br/>
Fax: Your Fax Number
</td>
<td>
</td>
</tr>
</table>
<table>
<col style="width:200px;"></col>
<col style="width:272px;"></col>
<col style="width:200px;"></col>
<tr>
<td></td>
<td style="text-align:center;vertical-align:bottom;font:bold 20pt arial;">INVOICE</td>
<td style="text-align:right;vertical-align:bottom;font:11pt arial;">Some other fixed text</td>
</tr>
</table>
</div>
<div class="page-footer">
<col style="width:672px;"></col>
<table style="width:100%;margin-top:5px;">
<tr>
<td style="text-align:center;font:bold 11pt arial;"><mark style="background-color:yellow;">Your footer text</mark></td>
</tr>
</table>
<table style="width:100%;margin-top:10px;
border-collapse:collapse;font:9pt arial;" cellpadding="4px">
<col style="width:115px;"></col>
<col style="width:64px;"></col>
<col style="width:64px;"></col>
<col style="width:84px;"></col>
<col style="width:64px;"></col>
<col style="width:64px;"></col>
<col style="width:84px;"></col>
<col style="width:133px;"></col>
<tr>
<td></td>
<td>footer table header</td>
<td>footer table header</td>
<td>footer table header</td>
<td>footer table header</td>
<td>footer table header</td>
<td>footer table header</td>
<td>footer table header</td>
</tr>
<tr class="borderstyle">
<td>first row lead in line</td>
<td><<[some column]>></td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td><<[some other column]>></td>
<td><<[some other column]>></td>
</tr>
</table>
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<table style="width:100%;margin-top:10px;font:11pt arial;border-collapse:collapse;">
<col style="width:352px;"></col>
<col style="width:160px;"></col>
<col style="width:160px;"></col>
<tr style="height:min-height:200px;">
<td style="line-height:14pt;">
<<[some column]>>
</td>
<td style="vertical-align:top;font:bold 11pt arial;line-height:14pt;">INVOICE DATE:<br/>INVOICE NUMBER:<br/>AMOUNT DUE:</td>
<td style="vertical-align:top;text-align:right;line-height:14pt;"><<[INVOICE DATE]>><br/><<[INVOICE NUMBER]>><br/><<[INVOICE AMOUNT]>></td>
</tr>
</table>
<table style="width:100%;padding-top:50px;font:11pt arial;">
<col style="width:125px;"></col>
<col style="width:547px;"></col>
<tr>
<td>SOME TEXT:</td>
<td><<[some column]>></td>
</tr>
<tr>
<td>SOME MORE TEXT:</td>
<td><<[some other column]>></td>
</tr>
</table>
<table style="width:100%;padding-top:50px;font:11pt arial;">
<col style="width:80%;"></col>
<col style="width:20%;"></col>
<tr>
<td>DESCRIPTION:</td>
<td>AMOUNT:</td>
</tr>
<tr>
<td><<[INVOICE DESCRIPTION]>></td>
<td style="text-align:right;"><<[INVOICE AMOUNT]>></td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
User | Count |
---|---|
35 | |
30 | |
30 | |
20 | |
18 |