Custom CSS for asset labels with Brother PT-700

[tarrenj]

Server:

• 4.8
• OS: Official Docker containers on Debian

Heyo! I'm posting this here since I looked around to see if anyone had done this yet before doing it myself.

The Brother PT-700 label printer has a maximum width of .94", and doesn't have enough resolution to print both the QRCode and C39 barcode for my reader to understand at that size. I've used the Custom CSS text box under Branding to tweak how they're generated (It's ugly, but it works so :man_shrugging:):

div.qr_img {
    width: 0.795in;
    height: 0.795in;
    float: left;
    display: inline-block;
    padding-right: .04in;
    padding-top: .02in;
  }
  img.qr_img {
    width: 100%;
    height: 100%;
  }
  img.barcode {
    width: 100%;
    display: block;
    margin-left: auto;
    float: left;
  }

 .qr_text {
    width: 60%;
    height: 0.42in;
    padding-right: 3px;
    font-family: arial, helvetica, sans-serif;
    overflow: hidden !important;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
  }

  div.barcode_container {
      float: left;
      width: 65%;
      display: inline;
      height: 20px;
      overflow: hidden !important;
  }

The printer leaves too much on either side of each label for our liking, so we printed them in strips of 12 and cut them manually, stacking all of the strips on top of each other worked nicely. There were some issues with the margins too, but these settings worked that out:

Now the labels look like this (Please forgive my Pinta skills...):

This is as small as I could get the labels and still have our reader able to scan them all easily enough. I needed space for up to 30 chars in the qr_text field.

I hope these settings help someone else! Let me know if they do :smile:

[tarrenj]

Closing this issue since I just created it to document the settings that work best here.

[viclou]

Another user has made a few tweaks, so if you find this isn't quite right, try:

div.qr_img {
    width: 1.04in;
    height: 1.04in;
    float: left;
    display: inline-block;
    padding-right: .04in;
    padding-top: .02in;
  }
  img.qr_img {
    width: 100%;
    height: 100%;
  }
  img.barcode {
    width: 100%;
    display: block;
    margin-left: auto;
    float: left;
  }

 .qr_text {
    width: 60%;
    height: 0.50in;
    padding-right: 3px;
    font-family: arial, helvetica, sans-serif;
    overflow: hidden !important;
    display: inline-block;
    white-space: nowrap;
    text-align: left;
  }

  div.barcode_container {
      float: left;
      width: 60%;
      display: inline;
      height: 40px;
      overflow: hidden !important;
  }