CSS error when using custom invoice design template

Self-Hosted | v5
1

Hi all
I have created a custom invoice template (source is business template), after some time tweaking some of the table positions ive got stuck on trying to get the “Balance Due” field to be highlighted on a rounded box like the V4 business template was.
It looks like the following is not been picked up correctly when rendering the pdf

Can anyone please advise

Thank you in advance

#table-totals >* [data-element='product-table-balance-due'] {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: #333333;
    color: #ffffff;
}
2

The whole “includes” css looks like

<style id="style">
    :root {
        --primary-color: $primary_color;
        --secondary-color: $secondary_color;
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: Arial, Helvetica, sans-serif;
        font-size: "$font_size";
        zoom: 80%;
    }

    @page {
        margin: $global_margin;
    }

    p {
        margin: 0;
        padding: 0;
    }

    .header-container {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1fr;
        grid-gap: 20px;
    }

    .header-container > span {
        display: block;
    }

    .company-logo {
        height: 7rem;
    }

    #company-details {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        color: #555555;
    }

    #company-address {
        margin-left: 175px;
        width: 180px;
        display: flex;
        flex-direction: column;
        color: #555555;
    }

    #company-address > * {
        margin-bottom: 0;
    }

    .entity-issued-to {
        margin-top: 3rem;
        font-weight: bold;
    }

    .client-and-entity-wrapper {
        display: grid;
        grid-template-columns: 2fr 1.5fr;
        gap: 20px;
        padding-left: -20px;
    }

    #client-details {
        display: flex;
        flex-direction: column;
        margin-top: 1rem;
    }

    #client-details > p:nth-child(1) {
        color: var(--primary-color);
    }

    #entity-details {
        background-color: var(--primary-color);
        margin-top: -1.2rem;
        padding: 1.2rem;
        border-radius: 1rem;
        width: 100%;
        color: white;
        text-align: left;
    }

    #entity-details th {
        font-weight: normal;
        padding-bottom: .5rem;
    }

    #entity-details > tbody > tr > th:nth-child(2) {
        text-align: right;
    }

    #product-table,
    #delivery-note-table,
    #task-table {
        margin-top: 1.5rem;
        margin-bottom: 0px;
        min-width: 100%;
        table-layout: fixed;
        overflow-wrap: break-word;
    }

    .task-time-details {
        display: block;
        margin-top: 5px;
        color: grey;
    }

    #product-table > thead,
    #delivery-note-table > thead,
    #task-table > thead {
        text-align: left;
        background: var(--secondary-color);
    }

    #product-table > thead > tr > th,
    #delivery-note-table > thead > tr > th,
    #task-table > thead > tr > th {
        padding: 1rem;
        color: white;
        font-weight: semibold;
    }

    #product-table > thead > tr > th:first-child,
    #delivery-note-table > thead > tr > th:first-child,
    #task-table > thead > tr > th:first-child {
        border-top-left-radius: 1rem;
    }

    #product-table > thead > tr > th:last-child,
    #delivery-note-table > thead > tr > th:last-child,
    #task-table > thead > tr > th:last-child {
        border-top-right-radius: 1rem;
        text-align: right;
    }

    #product-table > tbody > tr > td,
    #delivery-note-table > tbody > tr > td,
    #task-table > tbody > tr > td {
        padding: 1rem;
    }

    #product-table > tbody > tr > td:last-child,
    #delivery-note-table > tbody > tr > td:last-child,
    #task-table > tbody > tr > td:last-child {
        text-align: right;
    }

    #product-table > tbody > tr:nth-child(odd) > td,
    #delivery-note-table > tbody > tr:nth-child(odd) > td,
    #task-table > tbody > tr:nth-child(odd) > td {
        background: #F7F7F7;
    }

    #product-table > tbody > tr:nth-child(even) > td,
    #delivery-note-table > tbody > tr:nth-child(even) > td,
    #task-table > tbody > tr:nth-child(even) > td {
        background: #E8E8E8;
    }

    [data-element='product-table-balance-due-label'],
    [data-element='product-table-balance-due'],
    [data-element='task-table-balance-due-label'],
    [data-element='task-table-balance-due'] {
        color: var(--secondary-color) !important;
        font-weight: bold !important;
    }

    #table-totals {
        page-break-inside: avoid;
    }

    #table-totals > *:last-child {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    #table-totals {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 80px;
        padding-left: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.8rem;
    }

    #table-totals .totals-table-right-side>* {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #table-totals>.totals-table-right-side>*> :nth-child(1) {
        text-align: left;
        font-weight: bold;
        font-size: 1.1rem;
    }

    #table-totals>.totals-table-right-side>*> :nth-child(2) {
        text-align: right;
        font-weight: bold;
        font-size: 1.1rem;
    }

    #table-totals
    > *
    [data-element='product-table-balance-due-label'],
    #table-totals
    > *
    [data-element='product-table-balance-due'] {
        font-weight: bold;
        font-size: 1.2rem;
    }

    #table-totals>* [data-element='product-table-balance-due'] {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        background-color: #333333;
        color: #ffffff;
    }

    #table-totals > * > :last-child {
        text-align: right;
        padding-right: 1rem;
    }

    #footer {
        position: fixed;
        bottom: 0;
        min-width: 99%;
        margin-left: 0px;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        background-color: #333333;
        color: #ffffff;
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 14px;
        text-align: center;
    }

    #footer > * {
    }
</style>
3

Hey there, thanks for reaching us. You’re definitely using the wrong selector.

You can get these easily, by enabling the Draft mode in the invoice designer. Then just right-click & inspect the element.

image
image749×270 7.07 KB

image
image804×110 6.79 KB

1 Like
4

That’s really cool, I didn’t realize that was possible. I haven’t been such a fan of the ‘draft’ feature because the design is off but that makes it much more useful.

1 Like
5

Thank you Ben, i wasn’t aware of this.
I agree with @hillel, makes creating the CSS file so much easier :slight_smile:

1 Like