Comments

5 comments

  • Official comment
    Avatar
    Sarah H.

    The head and body tags in the email template are present, they are just hidden. You can think of all the HTML entered in the editor as going between the <body> </body> tags.

    In the case of the packing slip templates, the head and body tags, as well as some table and styling information, is also present but hidden. 

    However, we've made the complete default packing slip template available to download to assist in any customization you might want to make. You can download the sample html file from this help article. Once you open the file in a browser you can then view the source code and see the entire HTML and CSS for the default packing slip template, including any hidden elements.

    Comment actions Permalink
  • Avatar
    jöhg ananda

    Hey Sarah, does that imply that the CSS limitation is the browser of the user? For example I want to use the :empty CSS selector to make a custom 4x6 label page that will display when a note is present. This could be done by creating 3 divs containing the three types of notes and styling them so that they are hidden, at the front of the packing slip.

    <style>
    .note:empty {display:none;}
    .note {width: 4in; height: 4in;}
    </style>
    <div class="note">{{ gift_note }}</div>

    This would really extend ShipStation's functionality.

    0
    Comment actions Permalink
  • Avatar
    Sarah H.

     

    Hi Jöhg!

    I have to admit, this was a bit of a brain teaser!

    So, you can certainly add the CSS style tags to the front of your packing slip code. When doing this, make sure you always keep it at the beginning of the Order Header section before the table element starts. 

    I was also able to confirm that our editor does support the CSS empty selector. However, in testing this it looks like when the display property is set to none, it simply will not display regardless of whether the targeted element is empty or not. 

    Here is a test packing slip showing two divs, one empty and one not, with the different styling applied while using the inline display value. 

    No matter what I tried, when the display property was set to none, all divs with the note class were hidden:


    I'm not totally sure why this is the case, but will do my best to find out!

     

     

    0
    Comment actions Permalink
  • Avatar
    jöhg ananda

    Maybe if the display:none is troublesome, it could be handled by position: absolute; left: -9999px; ? Ideally we could know the exact limits so we can make good code that won't break. Please post here what you find out. Thanks!

    0
    Comment actions Permalink
  • Avatar
    Sarah H.

    I used the following and the code did work as intended:

    <style> .note:empty {display: none;}

    .note {color: white; width:4in; height: 4in; background: black;}

    </style>

    <div class="note">[Notes from Buyer]</div>

    An order with notes in the Customer notes field printed with the 4in block with a black background and white text. An order without notes had this element completely hidden.

    The issue I had before might have been related to having no other properties in the CSS other than width and height. Though I can't rule out browser support (if you are using a browser other than Chrome, I'm not certain of the browser support for displaying the empty pseudo-selector property. Chrome supports it going back to v.1.0 - but other browsers may not).

    Going forward, this should work as expected!

    0
    Comment actions Permalink

Please sign in to leave a comment.