My Assistant
![]()
Custom Search
|
![]() ![]() |
![]() |
![]() Post#1 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | HTML is new to me in fact I dont know anything about it I have a template that I would like to change slightly I want my business logo behind the text(Invoice date,Invoice number,trial2,address)at the moment it sits above it as in the attachment CODE <table style="padding: 30px"> <thead> <tr> <td colspan="99"> <table style="margin-bottom: 20px"><tr> <td style="font-weight: bold; font-size: 32px">{{ title }}</td> {% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" /></td>{% endif %} </tr></table> <table style="margin-bottom: 20px"><tr> <td> <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div> <div>{{ recipient.address | newline_to_br }}</div> <div>{{ recipient.identifier }}</div> </td> <td style="border-right-width: 1px; padding-right: 20px; text-align: right"> {% for field in fields %} <div style="font-weight: bold">{{ field.label }}</div> <div style="margin-bottom: 10px">{{ field.text }}</div> {% endfor %} </td> <td style="padding-left: 20px; width: 1px; white-space: nowrap"> <div style="font-weight: bold">{{ business.name }}</div> <div>{{ business.address | newline_to_br }}</div> <div>{{ business.identifier }}</div> </td> </tr></table> <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div> </td> </tr> <tr> {% for column in table.columns %} <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td> {% endfor %} </tr> </thead> <tbody> {% for row in table.rows %} <tr> {% for cell in row.cells %} <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td> {% endfor %} </tr> {% endfor %} {% for column in table.columns %} <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}"> </td> {% endfor %} {% for total in table.totals %} <tr> <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td> <td style="border-color: #000; border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td> </tr> {% endfor %} {% for field in custom_fields %} <tr> <td colspan="99"> <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div> <div>{{ field.text | newline_to_br }}</div> </td> </tr> {% endfor %} {% if emphasis.text != null and emphasis.positive %} <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr> {% endif %} {% if emphasis.text != null and emphasis.negative %} <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr> {% endif %} </tbody> </table> Attached File(s) |
![]() Post#2 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | It looks like a Manager template file! It uses a templating scripting language called Liquid. This would be the pertinent bit of HTML/Liquid script: CODE ... <table style="margin-bottom: 20px"><tr> <td style="font-weight: bold; font-size: 32px">{{ title }}</td> {% if business.logo != null %}<td style="text-align: right"><img src=background-image:URL({{ business.logo }};" style="max-height: 150px; max-width: 300px" /></td>{% endif %} </tr></table> ... Try instead: CODE <table style="margin-bottom: 20px"><tr> <td style="{% if business.logo != null %}background-image:URL({{ business.logo }};background-repeat:no-repeat;background-size:150px 300px;{% endif %}height: 150px; width: 300px;font-weight: bold; font-size: 32px">{{ title }}</td> </tr></table> ... It's late here so I'm not going to look at it again til tomorrow. Otherwise, have you tried the Manager forum? *** EDITED to change the CSS a little bit *** hth, d |
![]() Post#3 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | You are so smart ![]() |
![]() Post#4 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | Make sure you try my edited version |
![]() Post#5 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | It didnt put the logo in at all but hopefully someone will come up with it this is the bit I put in and took the other out CODE <table style="margin-bottom: 20px"><tr> <td style="{% if business.logo != null %}background-image:URL({{ business.logo }};background-repeat:no-repeat;background-size:150px 300px;{% endif %}height: 150px; width: 300px;font-weight: bold; font-size: 32px">{{ title }}</td> </tr></table> |
![]() Post#6 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | Oops! I think I left out a parenthesis at the end of the URL for the background-image property. ![]() Try this instead: CODE <table style="margin-bottom: 20px"><tr> <td style="{% if business.logo != null %}background-image:URL({{ business.logo }});background-repeat:no-repeat;background-size:150px 300px;{% endif %}height: 150px; width: 300px;font-weight: bold; font-size: 32px">{{ title }}</td> </tr></table> ... If that doesn't work we'll have to try another strategy. |
![]() Post#7 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | Cool now it is there but on the right hand side up the top underneath the word invoice so we are part way there it is underneath a word but not the right place. Needs to move to the left and come down. I really appreciate this I have absolutely no idea of html so I haven't even attempted to try something myself. all looks to scary . Maybe when we have got it you could explain just what you have said in it. |
![]() Post#8 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | Can you post another screen grab? |
![]() Post#9 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | Thats weird when I turned it into a PDF only alittle bit of the picture came out yet on my screen it all came out but anyway here it is Attached File(s) |
![]() Post#10 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | We're a victim of time difference with each other being on opposite sides of the world. I'm not going to have a chance to look at it now. It's probably some CSS tweaks that's required. Can you post the image you're using and I'll try and have a play tomorrow? |
![]() Post#11 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | I think this is it either one is fine why does it put them up on the screen and not as a down load? Attached File(s) ![]() ![]() |
![]() Post#12 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | I got the courage and got to here I just need it to cover invoice date and number as well so I need it to cover 2 columns???? CODE <table style="padding: 30px"> <thead> <tr> <td colspan="99"> <table style="margin-bottom: 20px"><tr> <td style="font-weight: bold; font-size: 32px">{{ title }}</td> </tr></table> <table style="margin-bottom: 20px"><tr> <td> <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div> <div>{{ recipient.address | newline_to_br }}</div> <div>{{ recipient.identifier }}</div> </td> <td style="border-right-width: 1px; padding-right: 20px; text-align: right"> {% for field in fields %} <div style="font-weight: bold">{{ field.label }}</div> <div style="margin-bottom: 10px">{{ field.text }}</div> {% endfor %} </td> <td style="padding-left: 20px; width: 1px; white-space: nowrap;{% if business.logo != null %}background-image:URL({{ business.logo }});background-repeat:no-repeat;background-size:150px 100px;{% endif %}"> <div style="font-weight: bold">{{ business.name }}</div> <div>{{ business.address | newline_to_br }}</div> <div>{{ business.identifier }}</div> </td> </tr></table> Attached File(s) |
![]() Post#13 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | does anybody know how to cover 3 columns I think its 3 columns I am not to good with html. |
![]() Post#14 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | Apologies, I've not had any time to look at this before now. Are you trying to cover the whole of the top with the image? So that all text above the Description/Amount table is over the image? |
![]() Post#15 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | If that's what you want, then move the background image CSS into the table row (<tr>) that contains everything. Alsoadjust the dimensions of the image to fill the whole element: CODE <table style="padding: 30px"> <thead> <tr style="{% if business.logo != null %}background-image:URL({{ business.logo }});background-repeat:no-repeat;background-size:100% 100%;{% endif %}"> <td colspan="99"> <table style="margin-bottom: 20px"> <tr> <td style="font-weight: bold; font-size: 32px">{{ title }}</td> </tr> </table> <table style="margin-bottom: 20px"> <tr> <td> <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div> <div>{{ recipient.address | newline_to_br }}</div> <div>{{ recipient.identifier }}</div> </td> <td style="border-right-width: 1px; padding-right: 20px; text-align: right"> {% for field in fields %} <div style="font-weight: bold">{{ field.label }}</div> <div style="margin-bottom: 10px">{{ field.text }}</div> {% endfor %} </td> <td style="padding-left: 20px; width: 1px; white-space: nowrap"> <div style="font-weight: bold">{{ business.name }}</div> <div>{{ business.address | newline_to_br }}</div> <div>{{ business.identifier }}</div> </td> </tr> </table> <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div> </td> </tr> <tr> {% for column in table.columns %} <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td> {% endfor %} </tr> </thead> <tbody> {% for row in table.rows %} <tr> {% for cell in row.cells %} <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td> {% endfor %} </tr> {% endfor %} {% for column in table.columns %} <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}"> </td> {% endfor %} {% for total in table.totals %} <tr> <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td> <td style="border-color: #000; border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td> </tr> {% endfor %} {% for field in custom_fields %} <tr> <td colspan="99"> <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div> <div>{{ field.text | newline_to_br }}</div> </td> </tr> {% endfor %} {% if emphasis.text != null and emphasis.positive %} <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr> {% endif %} {% if emphasis.text != null and emphasis.negative %} <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr> {% endif %} </tbody> </table> hth, d |
![]() Post#16 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | Hmmm... It seems to repeat the image when converting to pdf ![]() Attached File(s) |
![]() Post#17 | |
![]() UtterAccess Moderator Posts: 11,910 Joined: 6-December 03 From: Telegraph Hill ![]() | OK, using a modified version of your image (attached) I got the following output (attached pdf) using the following code: CODE <table style="padding: 30px"> <thead> <tr> <td colspan="99" style="padding: 0 10px;{% if business.logo != null %}background-image:URL({{ business.logo }});background-repeat:no-repeat;background-size:100% 100%;{% endif %}"> <table style="margin-bottom: 20px"> <tr> <td style="font-weight: bold; font-size: 32px">{{ title }}</td> </tr> </table> <table style="margin-bottom: 20px"> <tr> <td> <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div> <div>{{ recipient.address | newline_to_br }}</div> <div>{{ recipient.identifier }}</div> </td> <td style="border-right-width: 1px; padding-right: 20px; text-align: right"> {% for field in fields %} <div style="font-weight: bold">{{ field.label }}</div> <div style="margin-bottom: 10px">{{ field.text }}</div> {% endfor %} </td> <td style="padding-left: 20px; width: 1px; white-space: nowrap"> <div style="font-weight: bold">{{ business.name }}</div> <div>{{ business.address | newline_to_br }}</div> <div>{{ business.identifier }}</div> </td> </tr> </table> <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div> </td> </tr> <tr> {% for column in table.columns %} <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td> {% endfor %} </tr> </thead> <tbody> {% for row in table.rows %} <tr> {% for cell in row.cells %} <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td> {% endfor %} </tr> {% endfor %} {% for column in table.columns %} <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}"> </td> {% endfor %} {% for total in table.totals %} <tr> <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td> <td style="border-color: #000; border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td> </tr> {% endfor %} {% for field in custom_fields %} <tr> <td colspan="99"> <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div> <div>{{ field.text | newline_to_br }}</div> </td> </tr> {% endfor %} {% if emphasis.text != null and emphasis.positive %} <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr> {% endif %} {% if emphasis.text != null and emphasis.negative %} <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr> {% endif %} </tbody> </table> Is this closer to what you want? Attached File(s) ![]() ![]() |
![]() Post#18 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | You are a genius that is better than I hoped for I have waited a year to be able to do this but had no Idea about html I never gave it a thought to ask on here thinking that because it was manager no one would know I should of known better. Do you use manager? what do you think of it? I have been useing it for all my clients for about 4 years now |
![]() Post#19 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | When I save this as a PDF it comes out funny what would be the reason Attached File(s) |
![]() Post#20 | |
Posts: 1,328 Joined: 17-November 13 From: Orewa New Zealand ![]() | The description comes out in the picture not next to the word description can I change that somehow |
![]()
Custom Search
|
![]() | Search Top Lo-Fi | 13th December 2019 - 06:14 AM |