Transparent styling to table when printing - javascript

I've created a table with some simple styling elements such as borders, colors, etc. When attempting to print this table, the print preview does not show any of my CSS. I've seen some answers suggesting it's a bootstrap.css issue but after attempting some of the fixes, it doesn't seem to make a difference. I have also made sure that the "background graphics" option is selected in the browser during print preview.
Is there a way to access the code or css of the print preview page as opposed to my actual code? Or is there another fix that I'm missing?
If it helps, I'm using leaflet and a print plugin, everything looks right except for the table. Thank you for taking the time to read or answer this, I've attached a photo of the table in print preview.
Screenshot of my table missing styling in print preview.

You can use
<link rel="stylesheet" media="print" href="print.css" />
to style the printing preview.
I see. print css and main css is difference.
So you style it in other ways.
for example:
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />
body {
margin: 2em;
color: #fff;
background-color: #000;
}
/* override styles when printing */
#media print {
body {
margin: 0;
color: #000;
background-color: #fff;
opacity:0.3;
}
}

Add missing bootstrap classes in your css file with #media print. Example:
#media print {
.table td {
background-color: #fff;
}
}
More about media print:
https://developer.mozilla.org/en-US/docs/Web/CSS/#media

Related

How to reset font-size attribute set in html tag

Assuming I have a folowing code - fiddle - with font-size attribute set for <html> tag. This styling along with header and footer is generated via js script which cannot be removed. This is already existing page for a long time.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="bootstrap4.css">
<link rel="stylesheet" href="myCustomCss.css">
<link rel="stylesheet" href="cssLoadedByJs.css">
</head>
<body>
<div>
Header (need to stay as it is now with smaller font)
</div>
<div class="content"> <!-- (need to reset it 100%, so content will be sized as I want...) -->
Content
<h2>
H1 here
</h2>
</div>
<div>
Footer (need to stay as it is now with smaller font)
</div>
</body>
</html>
Css file injected by remote js (cssLoadedByJs.css) - cannot remove it, need to stay:
html {font-size: 62.5% !important;}
myCustomCss.css - what I was trying to do:
html .content {
/* font-size: 100% !important; */
/* font-size: unset; */
/* font-size: 16px; */
}
How to reset font-size attribute for content div only and preserve header and footer as it is?
I've tried to set font-size: unset; or font-size: 100% for content div but no result. font-size: 16px let me render text in 16px as I want, but h2 still has only 20px insted of 32px (due to this sizing for html tag, bootstrap use 2rem for h2). Anyway I believe that there is better way than just hardcoded pixel size. Possible to do this somehow? Pls check fiddle for better understanding and tests...
I'm not sure why exactly are you using font size on html tag directly but maybe the following hack can help overcome your problem.
html > body > div.content,
html > body > div.content * {
font-size: 137.5%;
}
I seriously advise not using this approach and styling specific elements instead.
Check this: https://jsfiddle.net/5jdrta16/1/
I took the font-size... important setting off of the <html> and applied it to the <body> element (without important). I also moved all the styling into the CSS.
.content {
font-size: 30px; /* I used 30px vs. 16px to more clearly illustrate that it's applied */
}
body {
font-size: 62.5%;
}
What about:
.content, .content * {
font-size: initial;
}

Emoji One appears Oversized when integrated in my blog

So I integrated the emoji one script in my blog to convert all the unicode emojis into the emojis from emoji one. It works but it is over-sized and collides with other posts.
This is the code I've used to integrate:
$(window).load(function() {
function convert() {
var input = document.body.innerHTML;
var output = emojione.unicodeToImage(input);
document.body.innerHTML = output;
}
convert();
});
img.emojione {
/* Override any img styles to ensure Emojis are displayed inline*/
margin: 0px !important;
display: inline !important;
min-width: 15px!important;
min-height: 15px!important;
vertical-align: middle;
}
<script src="//cdn.jsdelivr.net/emojione/2.0.0/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css" />
And a working fiddle
Here's the preview on my blog how it looks like.
Despite trying my best I couldn't get it to display in its default size.
Here is my blog's entire code.
Any help is appreciated.
That's because you are loading the EmojiOne CSS after the Custom CSS in your blog which is making width:auto from EmojiOne CSS "working".
So put this line below before your Custom CSS:
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/2.0.0/assets/css/emojione.min.css"/>

using multiple style sheets

I am currently developing an educational website and as part of it want to include web accessibility as a feature.
I am trying to include a color content changer like seen here http://www.handicap-international.org.uk/OneStopCMS/Core/SelectLayout.aspx? but I cant figure out how to get the page to call several css external style sheets so that the color of the content will change when the link is clicked?
Any help is appreciated.
you have two ways to include external CSS,
Using the <link> element, or
Using the #import rule.
Using the <link> element:
To make it a persistent stylesheet:
<link rel="stylesheet" type="text/css" href="somefile.css" media="screen">
To make it a preferred stylesheet, add the title attribute:
`<link rel="stylesheet" type="text/css" title="compact" href="somefile.css"` media="screen">
To make it an alternate stylesheet, add the word "alternate" to the rel attribute.
<link rel="alternate stylesheet" type="text/css" title="compact" href="somefile.css" media="screen">
Using an #import rule:
It is possible to include one stylesheet in another using #import. This must be done at the top of any CSS before any rules are declared.
Example (in somefile.css):
#charset UTF-8
#import "someotherfile.css"
This is also possible:
<head>
<style>#import "somefile.css"</style>
</head>
This should be enough to help you understand how to include multiple external style sheets.
Take care and good luck....!!!
I assume the example you posted uses only 1 style sheet that stores multiple css properties. Once you click the link it chooses the appropriate properties for that over arching theme from that single style sheet and disregards the rest.
Given that, why would you want multiple style sheets?
Please find the CSS for anchor tag as unvisited, visited, hover and active:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}

How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part. I'm using plain HTML. I don't have CSS applied on it because of the purpose of printing...
I actually am using these codes:
<body onload='window.print(); window.close();'>
or
Print
for printing...
So in my page I have a link that says "Back" its a link where I have to back to the page where I was before going to this print page. When I am going to print, CTRL+P, the BACK link is included on printing. How can I hide it when printing?
you can use a print css by using css media types
<link rel="stylesheet" href="css/print_style.css" media="print" />
and in that
.header,.footer,.navigation
{
display:none;
}
CSS Print Media Queries
There are CSS media queries specifically for printed media.
Example
#media print {
header, footer, nav, aside {
display: none;
}
}
More information
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
.navigation,.footer,.header
{
display:none;
}
</style>

CSS/HTML/Javascript tricks to print a web page without images

I'm trying to put a print button on a web page that will print the page's contents except images. Any ideas?
You can use CSS to disable all images on your website only when printing.
#media print {
img {
display: none !important;
}
* {
background-image: none !important;
}
}
No need to use a button, unless you want to give people the option to print images or no images.
If you just want people to print without images (which is preferred most of the time), you can just use a print stylesheet.
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Then add
img {display: none;}
You need a print style sheet. There are two options for that:
Reference a separate stylesheet with the following code:
<link rel="stylesheet" type="text/css" href="printstylesheet.css" media="print"/>
In that stylesheet, put the following:
img {
display: none;
}
Put the following in your main stylesheet:
#media print {
img {
display: none;
}
You could use a stylesheet for print media and make a rule like below..
img { visibility:hidden; }
...
<link rel="stylesheet" type="text/css" href="myprintstyles.css" media="print">
You could also use display:none as the image rule but this will not preserve the spacing and could completely change the layout of the printed page.

Categories