How to disable standard css and bootstrap in custom print formats?

Frappe Framework Print Formats
1

I am trying to make a custom print format and there does not seem to be any way to disable either the standard css template or bootstrap. Some issues I’m facing because of this:

  1. @import css rule must be defined at the top of the stylesheet, and since the standard css template rules precede the custom css, it is not possible to import fonts using custom css.
  2. The standard rules have used !important in some declarations, so even using an all: revert declaration with the same selector will not reset those without appending !important to the revert declaration as well. Which forces you to keep using !important further in your css regardless of how specific your rule is. (Using !important in css, that is forced on the user, is just a bad idea).
  3. Since it’s not possible to go nuclear with all: revert due to point 2, I keep having to think about rules I did not modify and expected to be the browser’s default rules. This rules out “Just use more specific selectors and use !important where needed” as a solution, as it is unreasonable to have to hunt down all rules, even the ones you don’t care about.

Even if I were to work around all of these issues, maybe the next version will change the standard css to be something else? You cannot expect users to keep fighting print formats of all things for every version update.

This is extremely annoying. I just want a clean environment. Is there some way to disable these in the current version (v16)? Maybe a custom app?

2

Hi @sujal and welcome to the community

I faced almost the same issues and raised a github. No response

I used GitHub - neocode-it/frappe_betterprint: Frappe app with advanced print functions, mainly focused on Jinja Print Formats · GitHub and just managed to get through somehow.

Hope it helps

1 Like
3

I used GitHub - neocode-it/frappe_betterprint: Frappe app with advanced print functions, mainly focused on Jinja Print Formats · GitHub and just managed to get through somehow.

This looks promising, thanks! However, this is too new of a project to adopt for anything business critical.

Anyway, I managed to get my print format working for now with only these resets:

// scss

.print-format {
  * {
    margin: 0;
    padding: 0;
  }

  p {
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: revert;
    font-size: revert;
    margin: 0;
  }

  a {
    color: black;
    text-decoration: none;
  }
}

And using !important for every padding declaration on th and td tags.

For the fonts issue, I first tried injecting a link tag inside the head tag using javascript, but it does not seem to work inside iframes (the pdf and print view work fine). So, I’ve decided to skip using google fonts and just hard-code fonts (to local files) using the @font-face rule. Which I now realize is much better because:

  1. I don’t have to worry about my chosen font family changing slightly over time with new versions.
  2. Not sending a request to google servers every time I want to generate an invoice.

My custom print format could still break if the standard template changes with a version update.