search

mousaalsheikh / kinzi-print

JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page
1 stars 1 forks source link

Can't apply styles to header and footer, also some body styling not working #2

Open shmox75 opened 4 years ago

shmox75 commented 4 years ago

I am trying to apply css styles to header & footer but it has no effect:

body {
       color: grey;
      font-size: 25px;
}
#printHeader {
    text-align: center;
    color: blue;
}

#printFooter {
    text-align: center;
    color: red;
}

Please note that body styling works for color but not for font size

musasheikh commented 4 years ago

Hello

Please give me your full code

Html, cas and script

shmox75 commented 4 years ago 
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
      <script src="kinzi.print.min.js"></script>
      <script>
        function doPrint() {
          $('#printArea').kinziPrint({
            header: $('#printHeader').html(),
            footer: $('#printFooter').html(),
            importStyles: true,
            loadCSS: 'http://localhost/test/style.css'
          });
        }
      </script>

      <link rel="stylesheet" type="text/css" href="style.css">
      <style>
        #printHeader {
            text-align: center;
            color: blue;
        }

        #printFooter {
            text-align: center;
            color: red;
        }
      </style>
</head>
<body>
    <button onclick="doPrint()">Print</button>
      <div id="printHeader" class="header">
      <h1>Kinzi Print</h1>
      </div>
      <div id="printArea">
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>
      JQuery Printing Plugin, Print specific HTML element with Header and Footer on every page <br>

      </div>
      <div id="printFooter">
        <h4>www.kinziprint.com</h4>
      </div>
</body>
</html>
shmox75 commented 4 years ago

Sorry I figured out that style must be in body, my error, now it works

mousaalsheikh commented 4 years ago

Hello

And please don't use localhost in the stylesheet url

Try to use style tag or a valid public url

shmox75 commented 4 years ago

Hello

And please don't use localhost in the stylesheet url

Try to use style tag or a valid public url

Okay, thank you I'll try it.