CODEWITHSUNDEEP
htmlcss
Nadeem Ijaz
Nadeem Ijaz

Reputation: 599

color not shown on print preview but shown on simple view

I am new in css and making a preview voucher for printing. Classes that i using are working correctly on simple view but not working on print preview like.

enter image description here

print Preview

enter image description here

this is css code

.titlebar{
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #03320E 25%, #273E29 76%) repeat scroll 0 0;
    color:#ffffff}

same code in 

@media print{
  .titlebar{
     background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #03320E 25%, #273E29 76%) repeat scroll 0 0;
     color:#ffffff}

}

here my header files that i am including. assets/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 

<!-- AdminLTE Skins. Choose a skin from the css/skins 
     folder instead of downloading all of them to reduce the load. -->
 <link href="<?php echo base_url(); ?>assets/bootstrap-daterangepicker-master/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url(); ?>assets/dist/css/skins/_all-skins.css" rel="stylesheet" type="text/css" />

<link href="<?php echo base_url(); ?>assets/js/fileinput.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url(); ?>assets/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />

and css style code is in AdminLTE.css.

Upvotes: 0

Views: 825

Answers (3)

codename11011
codename11011

Reputation: 1

.titlebar{
			width: 100%;
			height: 55px;
			background: #03320E;
		    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    background: rgba(0, 0, 0, 0) -o-linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    background: rgba(0, 0, 0, 0) linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    color:#ffffff;
		}
		@media print{
			body {
			    -webkit-print-color-adjust: exact;
			}
		}
<div class="titlebar"></div>

Please add below code inside @media print{}

body {
    -webkit-print-color-adjust: exact;
}

Upvotes: 0

Karthic G
Karthic G

Reputation: 1182

try this,

Add media attribute in the link tag, it will work.

<link media="print" rel="stylesheet" href="<?php echo base_url(); ?>assets/bootstrap-daterangepicker-master/daterangepicker.css"  type="text/css" />

Upvotes: 0

razemauze
razemauze

Reputation: 2676

Most browsers dont show background-color as standard. You need to make your browser print with background-colors too, in the settings. This is to prevent pages from using up a lot of ink, when printed.

In Chrome, for example, you need to press "Advanced settings" and check the checkbox for Background Graphics.

Upvotes: 0

Related Questions