This website uses Cookies. Click Accept to agree to our website's cookie use as described in our Privacy Policy. Click Preferences to customize your cookie settings.
Accept
Reject
Preferences
Log in to ask a question
Log in to ask a question

If You Have Not Tried HTML Templates - You Should

Posted on 02-05-2024 07:33 AM
Markus_Malessa
Gold 1
Gold 1
Reply posted on --/--/---- --:-- AM

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

Markus_Malessa_0-1707147052958.png

 

5 3 304
Topic Labels
3 REPLIES 3

Posted on --/--/---- --:-- AM
MarvinO
Bronze 2
Bronze 2
Reply posted on --/--/---- --:-- AM

interesting brother

0 Likes

Posted on --/--/---- --:-- AM
Mauricio_Bick
Silver 2
Silver 2
Reply posted on --/--/---- --:-- AM

I’ve been thinking of switching over to HTML.  Sample code would be nice 👍🏻.

0 Likes

Posted on --/--/---- --:-- AM
Markus_Malessa
Gold 1
Gold 1
In response to Mauricio_Bick
Reply posted on --/--/---- --:-- AM 
<!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>&lt;&lt;IF(ISBLANK([DATE INVOICE PAID]), "none", "block")&gt;&gt;</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>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), "block", ISNOTBLANK([3rdNotice]), "block", ISNOTBLANK([2ndNotice]), "block", TRUE, "none")&gt;&gt;</p>;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 8px;
      border: <p>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), "2px solid #8b0000", ISNOTBLANK([3rdNotice]), "2px solid #FF8C00", ISNOTBLANK([2ndNotice]), "2px solid #8B8000")&gt;&gt;</p>;
      rotate: -5deg;
      opacity: 0.75;
      text-align: center;
    }
    .notice div:first-child {
      -webkit-text-fill-color: <p>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), "red", ISNOTBLANK([3rdNotice]), "orange", ISNOTBLANK([2ndNotice]), "yellow")&gt;&gt;</p>;
      -webkit-text-stroke-color: <p>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), "#8b0000", ISNOTBLANK([3rdNotice]), "#FF8C00", ISNOTBLANK([2ndNotice]), "#8B8000")&gt;&gt;</p>;
      -webkit-text-stroke-width: 1.5px;
      font: bold 30pt arial;
    }

    .notice div:nth-child(2) {
      color: <p>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), "#8b0000", ISNOTBLANK([3rdNotice]), "#FF8C00", ISNOTBLANK([2ndNotice]), "#8B8000")&gt;&gt;</p>;
      font: bold 18pt arial;
      margin-top: 5px;
    }
  </style>
</head>

<body>
  <div class="stamp"><div>PAID</div><div><p>&lt;&lt;If:ISNOTBLANK([DATE INVOICE PAID])&gt;&gt;</p>&lt;&lt;TEXT([DATE INVOICE PAID], "MMM DD YYYY")&gt;&gt;<p>&lt;&lt;EndIf&gt;&gt;</p></div></div>
  <div class="notice">
    <div>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), "FINAL NOTICE", ISNOTBLANK([3rdNotice]), "3RD NOTICE", ISNOTBLANK([2ndNotice]), "2ND NOTICE")&gt;&gt;</div>
    <div>&lt;&lt;IFS(ISNOTBLANK([FinalNotice]), [FinalNotice], ISNOTBLANK([3rdNotice]), [3rd Notice], ISNOTBLANK([2ndNotice]), [2ndNotice])&gt;&gt;</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>&lt;&lt;[some column]&gt;&gt;</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>&lt;&lt;[some other column]&gt;&gt;</td>
        <td>&lt;&lt;[some other column]&gt;&gt;</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;">
                &lt;&lt;[some column]&gt;&gt;
              </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;">&lt;&lt;[INVOICE DATE]&gt;&gt;<br/>&lt;&lt;[INVOICE NUMBER]&gt;&gt;<br/>&lt;&lt;[INVOICE AMOUNT]&gt;&gt;</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>&lt;&lt;[some column]&gt;&gt;</td>
            </tr>
            <tr>
              <td>SOME MORE TEXT:</td>
              <td>&lt;&lt;[some other column]&gt;&gt;</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>&lt;&lt;[INVOICE DESCRIPTION]&gt;&gt;</td>
              <td style="text-align:right;">&lt;&lt;[INVOICE AMOUNT]&gt;&gt;</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>
Top Labels in this Space