UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
2 Pages V  1 2 >  (Go to first unread post)
   Reply to this topicStart new topic
> To Put Pictire Behind Text    
 
   
wornout
post May 10 2017, 08:21 PM
Post#1



Posts: 972
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 %}">&nbsp;</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)
Attached File  846a1ac5_9dae_40ff_a70c_18d70cd3a864.pdf ( 61.32K )Number of downloads: 4
 
Go to the top of the page
 
cheekybuddha
post May 10 2017, 08:48 PM
Post#2


UtterAccess VIP
Posts: 9,275
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

--------------------


Regards,

David Marten
Go to the top of the page
 
wornout
post May 10 2017, 09:00 PM
Post#3



Posts: 972
Joined: 17-November 13
From: Orewa New Zealand


You are so smart notworthy.gif yes it is.yes I have tried them but they dont help with anything like that. I will try what you have put in a trial invoice and will wait for you to come back to me or if it works I will post back
Go to the top of the page
 
cheekybuddha
post May 10 2017, 09:02 PM
Post#4


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


Make sure you try my edited version

--------------------


Regards,

David Marten
Go to the top of the page
 
wornout
post May 10 2017, 09:11 PM
Post#5



Posts: 972
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>
Go to the top of the page
 
cheekybuddha
post May 11 2017, 04:21 AM
Post#6


UtterAccess VIP
Posts: 9,275
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. blush.gif

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.

--------------------


Regards,

David Marten
Go to the top of the page
 
wornout
post May 11 2017, 04:48 PM
Post#7



Posts: 972
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.
Go to the top of the page
 
cheekybuddha
post May 11 2017, 05:35 PM
Post#8


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


Can you post another screen grab?

--------------------


Regards,

David Marten
Go to the top of the page
 
wornout
post May 11 2017, 05:54 PM
Post#9



Posts: 972
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)
Attached File  trialinvoice.pdf ( 61.29K )Number of downloads: 8
 
Go to the top of the page
 
cheekybuddha
post May 11 2017, 06:24 PM
Post#10


UtterAccess VIP
Posts: 9,275
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?

--------------------


Regards,

David Marten
Go to the top of the page
 
wornout
post May 11 2017, 06:31 PM
Post#11



Posts: 972
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)
Attached File  cropped.jpg ( 28.15K )Number of downloads: 2
Attached File  Card_with_words_taken_out.jpg ( 28.15K )Number of downloads: 2
 
Go to the top of the page
 
wornout
post May 11 2017, 09:36 PM
Post#12



Posts: 972
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)
Attached File  trialinvoice.pdf ( 61.41K )Number of downloads: 9
 
Go to the top of the page
 
wornout
post May 14 2017, 04:49 PM
Post#13



Posts: 972
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.
Go to the top of the page
 
cheekybuddha
post May 15 2017, 05:35 PM
Post#14


UtterAccess VIP
Posts: 9,275
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?

--------------------


Regards,

David Marten
Go to the top of the page
 
cheekybuddha
post May 15 2017, 05:56 PM
Post#15


UtterAccess VIP
Posts: 9,275
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 %}">&nbsp;</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

--------------------


Regards,

David Marten
Go to the top of the page
 
cheekybuddha
post May 15 2017, 06:07 PM
Post#16


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


Hmmm...

It seems to repeat the image when converting to pdf pullhair.gif
Attached File(s)
Attached File  0b40e2a5_412e_48fa_9ea3_566ba86ad72f.pdf ( 53.03K )Number of downloads: 0
 

--------------------


Regards,

David Marten
Go to the top of the page
 
cheekybuddha
post May 16 2017, 10:58 AM
Post#17


UtterAccess VIP
Posts: 9,275
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 %}">&nbsp;</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)
Attached File  0bed187a_409c_4f69_9549_a820fd9091cc.pdf ( 57.4K )Number of downloads: 9
Attached File  cropped3_scaled.jpg ( 25.68K )Number of downloads: 1
 

--------------------


Regards,

David Marten
Go to the top of the page
 
wornout
post May 16 2017, 03:29 PM
Post#18



Posts: 972
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
Go to the top of the page
 
wornout
post May 20 2017, 11:23 PM
Post#19



Posts: 972
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)
Attached File  invoice.jpg ( 34.48K )Number of downloads: 3
 
Go to the top of the page
 
wornout
post May 23 2017, 02:42 PM
Post#20



Posts: 972
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
Go to the top of the page
 
2 Pages V  1 2 >


Custom Search
RSSSearch   Top   Lo-Fi    11th December 2017 - 02:07 PM