Greetings All.
I am trying without success to alter the invoice template.
The custom template has been created and i have had some success with the edit.
Where i am now stuck is i want to move the word INVOICE down the page and have the logo at the top of the page and full width.
I am not very good with css so any assistance would be good please
Hello @Firsfence
Can I please clarify your request
You logo is fairly square, you want this in the centre with the word invoice directly below?
Logo top centre and as wide as the page.
Invoice lower than you have shown ( on top of the item area )
Can anyone reading here offer any assistance.
I can through trial and error move let / right change colour font etc.
just cant reposition the word INVOICE lower down the page or enlarge the logo area
am i asking for something that is not achievable
With modern CSS pretty much anything is possible - the “grid layout” and “flexbox” mechanisms make it possible to position elements in specific cells of a grid or in a specific linear order independent of the order in which they appear in the HTML source code.
I’ve had a play around starting from the “standard” style and got something that I think works the way you want it using grid layout. First tell the .invoice-header-region that it should be laid out as a grid with two columns:
.invoice-header-region {
text-align:left;
position: relative;
margin-bottom:30px;
/* Use CSS grid layout */
display: grid;
/* lay elements out in two columns of equal width */
grid-template-columns: 1fr 1fr;
/* with a small gap between adjacent columns and rows */
grid-gap: 1.5em;
}
Now we can use grid-column and grid-row to tell the various parts where to go. The .invoiceHeader is the word “INVOICE”, it is first in the HTML but with grid layout we can tell it to span both columns1 and sit on the third row of the grid:
.invoice-header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #EEE;
text-align: center;
grid-column: 1 / 3;
grid-row: 3;
}
The .invoice-logo-container is the element that contains the logo image, it is second in the HTML but we can tell it to span both columns of the first grid row:
.invoice-logo-container {
text-align:center;
grid-column: 1 / 3;
grid-row: 1;
}
Then .invoice-logo-img is the logo image itself inside the above div - this has a fixed pixel width in the HTML which we must override with !important to allow it to scale to full width (or any other width than 200px):
.invoice-logo-img {
width: 100% !important;
}
Next in the HTML are the “from” and “to” addresses, in that order, but we can flip the columns to put the “to” address first and tell them both to sit in row 2:
.senderAddressDetails {
text-align:left;
grid-column: 2;
grid-row: 2;
}
.recipientAddressDetails {
text-align:left;
grid-column: 1;
grid-row: 2;
}
The final element inside the header region contains the table with the invoice date, number, etc., which we tell to span both columns and go in row 4 (which would actually be the default anyway but I prefer to be explicit when I’m deliberately re-ordering things). We also need to tell the table inside this element to take up the full width:
#lblinvoiceLabels {
grid-column: 1 / 3;
grid-row: 4;
}
.invoice-details-tbl {
width: 100%;
margin-bottom:15px;
border-top:1pt solid #CCCCCC;
border-left:1pt solid #CCCCCC;
border-right:1pt solid #CCCCCC;
background-color: #FFFFFF;
}
Note that in the standard CSS a lot of the elements are position: absolute and have fixed pixel sizes, it’s imperative that you remove all of these in order for the grid layout to work as intended.
Note also that grid layout won’t work in old browsers like IE, but it’s fine in any recent Firefox, Safari, Chrome, or any other browser based on the Chromium engine including Opera and Edge. And I also checked that it is handled correctly by QuickFile’s PDF converter so printing on paper or emailing with an attached PDF should be fine.
You can tweak this however you like, e.g. you could use a three-column grid (with grid-template-columns: 1fr 1fr 1fr on the header region and grid-column: 1 / 4 for the items that need to span a whole row) if you wanted to put the invoice date and number section in line with the addresses rather than underneath. You could even put the word “INVOICE” and the date/number table in the middle column with the to and from addresses each spanning two rows either side, the possibilities are endless.
To: Joe Bloggs INVOICE From: Me
2 Anywhere Street Invoice Date: 01/02/2024 My Address
1 grid layout positions count the “grid lines” between the cells rather than the cells themselves, so “spanning both columns” is 1 / 3, which means starting at grid line 1 (to the left of the first column) and ending at grid line 3 (to the right of the second column). A single number like grid-column: 1 or grid-row: 3 is interpreted as the single column or row starting at that grid line, so 1 actually means 1 / 2, 3 means 3 / 4, etc.
Greetings Ian
I wold like to thank you for your assistance with this.
Not everything worked as expected but it did set things on the correct path.
for your records / information :
The word INVOICE was hidden behind the recipient Address Details and the .invoice-details-tbl
I had through trial and error managed to reposition that so i sort of worked round your solution with a sort of pick and mix option.
Are you a QuickFile user, if ( yes ) do you have any thoughts on the Delivery Note option as there seems to be no way of adjusting that.
Any way i am so pleased with your assistance with the invoice you have helped in achieving everything that i was expecting / looking for design wise
I hope that this will be visible to others who may require this most valuable solution.
Many Thanks
Yeah, for the grid to work as you expect you need to remove all the position: absolute or position: relative and any top, left or custom margin-{anything} and padding-{anything} instructions.
As far as I know that particular CSS can’t be edited, but it might be possible to fake something with another custom invoice style based on your current one. The delivery note option as provided by QuickFile has some changes to the HTML as well as a custom CSS, but you can get most of the way using pure CSS by “abusing” the ::before and ::after selectors.
Try making another custom invoice style by copying your current one and then add the following rules:
- Change “INVOICE” to “DELIVERY NOTE”
.invoice-header .invoice-header-label {
font-size: 0;
}
.invoice-header .invoice-header-label::after {
font-size: 24px; /* or whatever size your .invoice-header normally uses */
content: "DELIVERY NOTE";
}
- Hide the due date from the summary table - there may be other
.tr-invoice-details-*classes that you also need to hide, have a look in your browser dev tools
.invoice-details-tbl .tr-invoice-details-duedt {
display: none;
}
- Hide the unit cost (3), VAT (5) and line total (6) columns in the details table, and the whole footer bit with the subtotal, grand total and “SENT”/“PAID” stamp.
.invoice-items-tbl .thItems3,
.invoice-items-tbl .thItems5,
.invoice-items-tbl .thItems6,
.invoice-items-tbl .tdItems3,
.invoice-items-tbl .tdItems5,
.invoice-items-tbl .tdItems6 {
display: none;
}
.invoice-footer-region {
display: none;
}
- Hide the usual terms section at the bottom and replace it with space for a signature on delivery
.invoice-terms-container {
display: none;
}
.invoice-append-region::after {
/* The text for the bottom of the del note - "\0a" represents a line break */
content: "Goods received in good condition by\0a Name:\0a Signature:\0a Date:";
/* this next instruction is necessary to make the "\0a" line breaks work correctly */
white-space: pre-line;
/* and this spaces the lines out a bit more to make space for recipient to write */
line-height: 2.5em;
font-size: 14px;
font-family: Arial, sans-serif;
}
Save this style under an obvious name (“Delivery Note”) and then in future when you want to print a delivery note you can simply click the “invoice style gallery” option, switch to your custom delivery note style, print the invoice, then switch back to the normal style again afterwards. It’s not quite perfect, you don’t get the lines marking the space next to name, signature and date, but it’s about the best I can do purely in CSS.
Edit: actually I’ve found a way to generate the lines next to name, signature and date, but it’s a bit evil even by my standards 
.invoice-append-region::after {
content: "Goods received in good condition by\0a Name:\0a Signature:\0a Date:";
white-space: pre-line;
line-height: 2.5em;
font-size: 14px;
font-family: Arial, sans-serif;
}
.invoice-append-region::before {
white-space: pre-line;
line-height: 2.5em;
font-size: 14px;
font-family: Arial, sans-serif;
/* this weird construct creates one blank line, then three lines each
* consisting of two invisible "words" with a space between them.
*/
content: "\0a\a0 \a0\0a\a0 \a0\0a\a0 \a0";
/* then this magic trick tells the browser to spread the two invisible
* words out as far as it can by expanding the space in between...
*/
text-align-last: justify;
/* ... and underline the whole lot, which has the effect of drawing
* three long lines for the three labels.
*/
text-decoration: underline;
/* all that remains is to place the three lines block in the right place
* next to the stack of labels, and make it a suitable width
*/
display: block;
position: absolute;
left: 6em;
width: 50%;
}
Greetings Ian
Wow : that’s a hole heap of information to play with.
OK so what i think is to run with what i have then start from scratch on a new form and go through it bit by bit.
Again many thanks for your time and inputs into this matter
Regards
Alan
This topic was automatically closed after 7 days. New replies are no longer allowed.