I am trying to hide some divs before the user prints this giant form, then display the divs again afterward. Thus I want to ignore the rest of the page, and only print the form itself.
Sure I could open a separate page when the user clicks the print button. The only thing is that the form is really long and it would be quite tedious to do that.
Edit: My previous question did not actually reflect what I was looking for. So I changed it to the current one.
Also thanks to all that suggested window.onbeforeprint and window.onafterprint. That was relevant to my edited question.
First, The Ok Way:
Take a look at window.onbeforeprint and window.onafterprint (the original question asked about how to do it programmatically I believe).
Now, the Better Way:
A better way to do this is with a style that is specifically for printing. In other words, your div might look like this:
<div class="someClass noPrint">My Info</div>
You would then have this in your stylesheet:
.someClass {font-family:arial;}
#media print {
.noPrint { display: none; }
}
Another Option
You could also put this in a separate stylesheet if you wanted so you don't have to mix styles:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Your screen stylesheet could have ".someClass" defined one way and then your print stylesheet could have it defined a completely different way.
IE supports onbeforeprint and onafterprint, but what you really want is a print stylesheet.
<link rel="stylesheet" type="text/css" media="print" href="print.css">
See also: this answer
You may want to consider creating a style sheet specifically for printing using media="print"
You should really implement this as CSS media=print styles. The media attribute of link element can be used to select to which media a stylesheet is applied. Check this article
Related
I've added a third party widget to a webpage I manage in Hubspot, and it is changing the other CSS on the page. Font family, size, and colors have all changed without me editing any CSS. I haven't found a solution that works yet. I believe the widget is adding a style tag to the body of my page, but I don't have a way to remove it.
I'd appreciate any suggestions or direction toward an answer.
The widget is added with a div and script tag from the 3rd party like this:
<div id="ss-custom-reviews-widget-r"></div>
<script id="ss-custom-reviews-widget-s" src="https://12345.cloudfront.net/custom_script.js"
ss-custom-reviews-widget-api-key="12345" widget-key="{{ tableRow[0].expID }}"
type='text/javascript'> </script>
I'm unable to edit the css or js files for the widget.
Does the widget load its own CSS file? Sounds like it is and it's overriding your styles. To fix it you can modify the widgets CSS sheet if possible. If not add a higher specificity to your style sheet.
It depends on how the widget/library is added.
If it is added via a link or script tag in the HTML markup, some basic compiler line-reading behaviours can work, for example
<head>
<link rel="stylesheet" href="your-widget.css">
<link rel="stylesheet" href="your-custom.css">
</head>
But you should provide a screenshot and detail of how the widget is added.
My main problem is that I get a default a bootsrrap design, and i can't change it.
I 've read many places that I have to do something like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
I 've figured out that i need to use this:
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
but with this method I can't change any of my elements. Nobody writes it down, what does the bootstrap.min.css contains. Is it a standard library, or I have to put into it some data. Sorry for the dumb question...
Do not modify the bootstrap.css!
the approach you mentioned first is the right approach.
You're using the right method. Run bootstrap then run your custom code afterwards to overwrite bootstrap styles.
In terms of knowing what you are overwriting, all the documentation for the bootstrap CSS is contained here:
http://getbootstrap.com/css/
Alternatively you can look at the non-minified version, or inspect elements in the browser.
Definitely do not modify the bootstrap library. This will make it difficult to get general bootstrap help as you have a customised version, and you'll never be able to upgrade the library without removing your changes.
As a general rule, never modify a third party library which you are using.
Do not modify default bootstrap.css bcoz it contains much css which will used in coding and designing, rather write or overwrite with your own custom css new a new file
you are using correct method. some times css not override. so use !important to force override.
eg: https://css-tricks.com/when-using-important-is-the-right-choice/
I have seen:
CSS 2, precedence of stylesheets imported using link element
In which order do CSS stylesheets override?
stylesheet - Can one CSS file take priority over another CSS file?
They all seem to say that, for the same selector occurring multiple times, the last one wins. However that is not what happens for me. So given that "Aqua.css" has:
body {color:aqua;}
And "Red.css" has:
body {color:red;}
Then using the following:
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
The last one, Yellow, is used, as the other answers say. If I change that however to:
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
Then Aqua is used, not the last one, Red. See Precedence of CSS rules Sample 2. The body color is Aqua yet Aqua.css is before Red.css. All the answers I find say that the body color would be Red.
Whenever I have multiple links to css stylesheets and the only difference among them is the color of something (element or class or whatever) then the first stylesheet is used, not the last, yet that seems to not be what everything I read says should happen. I have tried Edge, Chrome and IE; I notice no relevant difference among them.
So I have the following two questions:
Am I correct that the behavior I am seeing (the first link tag is used instead of the last) is different from the other answers?
If so, then why?
I apologize if I should have posted an answer to one of the other threads, but I think it is cleaner to create a new question.
The reason I am asking is that I am trying to create a dynamic stylesheet system so understanding the precedence is more important, it is less effective to just try something to see what works than in normal circumstances. I will attempt to interpret the specifications but to the extent that has been in other answers, I want to understand what has been provided here in other threads.
Disclaimer: My old answer and line of thinking was completely wrong, so I've deleted it, and am posting this as a replacement so as not to be confused with any of the prior discussion.
When you give a <link> element a title attribute, you are defining it as an alternative style sheet set.
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
^^^^^^^^^^^^
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
^^^^^^^^^^^
The precedence of styles was a red herring. The Red.css styles were never being applied at all, because that style sheet set was not currently active.
Per the spec:
Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.
Also worth reading: "CSS: alternative style sheets":
A document doesn't need to have a single style sheet. You can give it a default style and any number of alternatives for the reader to choose from. This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).
How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but many do. E.g., in Opera, Internet Explorer and Firefox you can find the styles under the “View” menu. As of 2012, Chrome requires an extension (e.g., Decklin Foster's Style Chooser).
You're supposed to use rel="alternative stylesheet" when defining alternative stylesheets, but this appears to be a case where the browser anticipated the behavior. Remove the title attributes, and the <link> elements return to their standard behavior as defined in the spec.
I know I can just put the <link> tag in the body and apparently it works, but I know it's not "valid" html and I want to avoid issues with strict browsers like firefox, which ignore every behavior a web designer expects if it's not defined in the official specification.
So is there some official way to load a stylesheet in the body area of the html?
You can add your css in the head dynamically as well like below:
jsCode:
var head = document.getElementsByTagName("head")[0],
cssLink = document.createElement("link");
cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";
head.appendChild(cssLink);
document.head.appendChild( linkElement );
…where linkElement is your style link. Nobody's forcing you to add stuff to the body, just add it to the head.
It is valid to link to a stylesheet in the body
The stylesheet keyword may be used with link elements. This keyword creates an external resource link that contributes to the styling processing model. This keyword is body-ok.
https://html.spec.whatwg.org/multipage/semantics.html#body-ok
https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
Actually in older versions of HTML it was illegal to put a link element in the body element and must be only in the head section of the HTML document. From this link, there is a section that states this
it may only appear in the HEAD section of a document
So, just simply load the stylesheet into the head element, there is no possible reason for you, or for anyone to write illegal documents that do not satisfy the rules of W3.org.
<head>
<link rel="stylesheet" href="~/css/file.css" />
</head>
However, there is another question that you might be interested in reading, and in which condition you can add link element to the body section. Read the answer here.
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.