No announcement yet.

styling invoice_print.html

  • Filter
  • Time
  • Show
Clear All
new posts

  • styling invoice_print.html

    Recently I wanted to change the line-spacing (line-height) of a section within invoice_print.html. I spent more time on this task than I wanted to, so I figured I'd share my learned insights with others in case it helps someone else. (info current as of 8/29/2014)

    invoice_print.html is utilized by Order Actions > Print Invoice (KB: how-do-i-manage-my-orders). invoice_print.html resides in "common" and in "common-html5". Both contain links to stylesheets, but the links are to different files. And the links utilize different values for the media attribute ("screen" vs "print").

    I am working with an HTML5 template. The styles of invoice_print.html are controlled by layout.css. (default.css for non-html5 templates.) Try as I might, I could not alter the styles simply by changing layout.css (copied into my template directory from common-html5). The style link in common-html5/invoice_print.html is hard coded to point to common-html5/layout.css. I would have liked this link to be overridden by the layout.css present in my template (as this is the behavior of so many other files), but that did not appear to be happening. My solution was easy: I copied invoice_print.html from common-html5 into my template directory. Then I changed the path of the link to point to layout.css in my template, not to the version in common-html5.

    Another note. If you like to use Chrome developer tools, or something similar, while you are playing with styles, you may run into trouble with common-html5/invoice_print.html. The style link uses the attribute media="print". Chrome developer tools won't recognize this display. Remove the media attribute completely while you're working and you'll be good. (You can put the attribute back in place once you're done.)
    - Chuck

  • #2
    HTML5 layout.css file ACCESS DENIED

    I am trying to modify an alignment property for the layout.css in the common-html5 directory. Is there a reason we cannot edit this ourselves to modify our template, like we can modify the default.css file?



    • #3
      You can't modify anything in the common directory. You need to make a copy in your template directory and the system will use that new copy. This is true of all the template files.