× Ask and contribute to general questions and how-to for DecoNetwork products.

DYMO Shipping Labels - Lets try to get the html right.

3 months 2 weeks ago #22138 by Ellis
We finally have time to get our DYMO label maker 4XL working for us to print 4x6 shipping labels but have run into a HTML to PDF conversion issue. Specifically, even though the HTML defines the size the output seems always to be 8.5 x 11" or larger... this is independent of the printer. If we do output to the DYMO the PDF output is still wrong. As a test we have chopped down the HTML to the bare bones to get it to work... however, we are stuck. Our eventual goal is to publish the code for all to use... so any help would be appreciated.

Here is what we have:

<style>
#shipping-label {
width: 6in;
height: 4in;
margin: 0.25in 0.25in 0.25in 0.25in;    
font-size: 12pt;
font-weight: normal;
border: 1px solid black;
}

#from-address {
min-height: 1.25in;
width: 5.5in;
text-align: left;
padding-top: 0.25in;
padding-left: 0.25in;
margin-bottom: 0.25in;
}

#to-address {
height: 2.25in;
width: 5.5in;
text-align: center;
margin: auto 0;
font-size: 18pt;
}

</style>
<div id="shipping-label">
  <div id="from-address">
    Overridden Company Name<br />
    {{ from_address }}<br />
    {{ from_city }}, {{ from_state }}<br />
    {{ from_zip }}<br />
    {{ from_country }}
  </div>
  <div id="to-address">
    {{ ship_to.full_name }}<br />
    {{ship_to.address}}<br />
    {{ship_to.city}}, {{ship_to.state}} <br />
    {{ ship_to.zip }} <br />
    {{ship_to.country_name}}
  </div>
</div>

Please Log in or Create an account to join the conversation.

3 months 2 weeks ago #22139 by Sewsublime
I have had an issue with this for ages but was told by Deco support they do not support help with the html, to be fair a 4 x 6 label should be a standard setting for this, as i am sure a high percentage of people use thermal printers. All i did was adjusted the text sizes and box sizes in the html and changed the percentage size when printing, just trial and error as i am no coding wiz. it is far from perfect and cuts the logo off but sort of works.

Please Log in or Create an account to join the conversation.

3 months 2 weeks ago - 3 months 2 weeks ago #22140 by ccruz
Hey John, for the download option on all templates we are only able to output at A4 size. The print options recently added work a bit differently however as these are generated in the browser. We do try to match the same A4 size to keep both consistent. You can try adjusting the size of the print version using an @page css rule at the top of your style block. Just note this may not work on all templates but it might on the shipping label.
  @page {
    size: 6.00in 4.00in;
    margin-top: 0.25in;
    margin-left: 0.25in;
    margin-bottom: 0.250in;
    margin-right: 0.25in;
  }
Note: The @page rule is also not supported for all browsers so keep that in mind.

-Cris

Please Log in or Create an account to join the conversation.

3 months 1 week ago - 3 months 1 week ago #22144 by Ellis
Thanks Cris ... your solution worked using the new Print option and Chrome. Here is the very simple markup that creates a 6 X 4 label. Note the if statement removes the country (since it is not required for domestic shipping) by hard-coding so it can be improved by using a variable. For now, this was a quick and dirty fix, that all can use if they change the text. As time permits I will add back our logo. If there are any other requests for required fields please let me know and I will add the elements back as I go along.

John

Note: REVISED APRIL 9TH TO ADD LOGO & REMOVE HARD CODED ELEMENTS

<style>
@page {
size: 6.00in 4.00in;
margin-top: 0.25in;
margin-left: 0.25in;
margin-bottom: 0.25in;
margin-right: 0.25in;
}

#shipping-label {
width: 5.5in;
height: 3.5in;
margin: 0;
}

#from-address {
height: 1.25in;
width: 2.5in;
text-align: left;
padding-top: 0.25in;
padding-left: 0.25in;
margin-bottom: 0.25in;
font-size: 10pt;
float: left;
}

#company-logo {
height: 1.25in;
width: 2.5in;
float: right;
text-align: right;
}

#to-address {
max-height: 2.0in;
width: 5.5in;
text-align: left;
font-size: 16pt;
padding-left: 0.5in;
font-weight: bold;
display: block;
}

#phone_number {
font-size: 10px;
font-weight: normal;
}

</style>
<div id="shipping-label">
<div id="from-address">
{% if from.account.company %}
{{ from.account.company }} <br />
{% endif %}
{{ from_address }}<br />
{{ from_city }}, {{ from_state }}<br />
{{ from_zip }}<br />
{% if ship_to.country_name != from_country %}
{{ from_country }}<br />
{% endif %}
<span id="phone_number">
<br />
Ph: {{ from_phone_number }}
</span>
</div>
<div id="company-logo">
{% logo 75 75 %}
</div>
<br style="clear: left;" />
<div id="to-address">
{{ ship_to.full_name }}<br />
{% if customer.company %}
{{ customer.company }}<br />
{% endif %}
{{ship_to.address}}<br />
{{ship_to.city}}, {{ship_to.state}}<br />
{{ ship_to.zip }} <br />
{% if ship_to.country_name != from_country %}
{{ship_to.country_name}}<br /><br />
<span id="phone_number">
Ph: {{ ship_to.phone_number }}
</span>
{% endif %}
</div>
</div>
The following user(s) said Thank You: Sewsublime, ccruz

Please Log in or Create an account to join the conversation.

3 months 1 week ago #22145 by ccruz
Glad you were able to get it working John. Thanks for sharing your template.

-Cris

Please Log in or Create an account to join the conversation.

3 months 1 week ago #22150 by Sewsublime
Hi

Thanks for the Html code John it's great :)

Does anyone know where the logo is taken from as it it coming out very light, is there a way of putting a link in and upload a Black & White Version?

Cheers Daren

Please Log in or Create an account to join the conversation.

3 months 1 week ago #22152 by Ellis
Deco fullfilment >>> Email & Order Templates / Correspondence Settings

Note this logo is only 100px by 100px and prints "crappy". I could not find another Liquid variable to use for any other images that are already part of Deco...

It would be better if the logo could be uploaded at a higher resolution and would work. I tested an uploaded logo at 1000px by 1000px and then tried to scale it using the {{ logo x x }} variable but it still seems to come out fuzzy.

The only solution I can think of is to load the logo into a folder, find the URL and then hard code the image url into the HTML.

HELP --- Chirs or others do you have any better ideas?

John

Please Log in or Create an account to join the conversation.

3 months 5 days ago #22154 by ccruz
Front thermal printer you really want pure black the best way to achieve best quality would be to embed an svg set to RGB black as the fill color. You can embed the SVG using a standard HTML img tag. You can upload your logo in svg format through the file manager available in the Customize Template CSS area.

https://css-tricks.com/using-svg/

Please Log in or Create an account to join the conversation.

Time to create page: 0.255 seconds
Powered by Kunena Forum