I have application and I want to have print button that print my page, but with original style from css. Already I have button that evoke function window.print(). Also i have print.scss with styles
#media print {
header {display:none;}
footer {display:none;}
button {visibility: hidden;}
}
Problem is that I want to have original styles from my styles files (there are many).
(I cut off buttons on purpose.)
Okey I found solution, it was just no background colors attached. In media query for print I just added this:
-webkit-print-color-adjust: exact !important;
Related
I want to apply a piece of code (for example, a specific font) to all parts of a widget
What selector or what should I call to be able to do this?
In the following code snippet, the font is applied to the selectors and part of the comments, but when a new comment is registered in the comments section of the site, the previous font is displayed again for the new comment.
/* Widget post comments */
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
.elementor-element-3d8990cd .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can use [attribute*=value] CSS Selector in this case.
/* Widget post comments */
div[class*="elementor-element-"] .elementor-widget-post-comments{
font-family:'IRANSansWeb_FaNum';
}
/* Wpdiscuz sort button active */
.wpd-thread-filter .wpdf-sorting .wpdiscuz-sort-button-active{
font-family:'IRANSansWeb_FaNum';
}
You can also add a specific common comment parent class with div if needed.
you can use the body element tag to apply font on every part of element as we should write the code of element in body only.
The code written in body element (css) will be applied to every part of the body code and used to write background color so that it can be applied to whole page and used to write font size and family etc using css in style tag in head part.
using
<style> body{ font-size=34px;} </style>
The ChromeVox extension for Google Chrome browser places an orange outline around content when selected on the screen.
This orange outline is also printed when printing a web page. See how button below is selected with orange outline and then also appears on print preview.
How do I disable this orange focus ring when printing?
Solved it with print css media-queries!
The ChromeVox injects markup and styles into the body of the page that looks like this:
<div aria-hidden="true" class="cvox_indicator_container ...more classes...">
...more html markup...
</div>
So I updated my global CSS stylesheet to include the following:
#media print {
.cvox_indicator_container {
display: none;
}
}
Which worked great.
Then I got to thinking that I wanted to make sure this never changed even if ChromeVox changed their css to have greater specificity.
Then, I updated the css to:
#media print {
html body div.cvox_indicator_container {
display: none !important;
}
}
Note: This may be overkill, but certainly has more specificity.
Ideally the ChomeVox team would add something like this solution to their code. I tried to find their open-source repo… got close but failed. Halp?
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
I have a button in asp.net (c#) that I want after click this button I could print from my html table that is in a update panel ,I only want Print my html table not all page
is there any component?
thanx very much
2 ways to handle it:
CSS to define a print media
Reporting services, hit the data directly from a sproc / direct table
and print a table layout of the data.
Based on OP comment
Straight from W3c:
http://www.w3.org/TR/CSS2/media.html
Read specifically about print media, it means you can define a .css file in your asp.net project with the media type "print":
#media print {
/* style sheet for print goes here */
}
This is nice because you can now define CSS to hide all elements on your screen:
display:none
Except the div / table of your choice:
#myDiv {
display: block;
}
In your asp.net page you have this define:
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="printStyle.css">
This tells your application to use the printStyle.css file when it comes to printing your page.
And once you do try to print the app will use printStyle and all the formatting and styles you have defined.
Here is a good example: https://web.archive.org/web/20200724145536/http://www.4guysfromrolla.com:80/demos/printMediaCss.html
For the second point, if you are running SQL Server, reporting services is free. Of course you will need to set this up and deploy reports. Its a bit out of the scope of this question. If you do have reporting services you may want to open a new topic and ask questions about it.
Otherwise just create a print style css file.
You can probably use the CSS #print Media Type to hide the stuff you don't want to print.
Check out the w3 Schools tutorial for a basic overview.
You can use CSS classes to define media type like #print, #screen and then mark appropriate parts of your webapge with those classes.
For the button to do the print, you will need to add: onClientClick="window.print()" to the button's definition.
Use CSS like this:
#media print
{
printOnly {display:block;}
screenOnly {display:none;}
}
#media screen
{
printOnly {display:none;}
screenOnly {display:block;}
}
Then simply decorate your DIVs or other elements with the classes:
<div class="screenOnly">this will not print but will show on screen</div> or
<div class="printOnly">this will not show on screen but will print</div>
I need to remove classes from different elements within the #media print on my CSS and add those classes on the #media screen.
Is there anyway to remove classes from the CSS file?
Something like:
#media print{
.element{/*Remove class*/}
}
#media screen{
.element{/*Add class*/}
}
I need to remove ui-tabs-hide added by a jQuery function (which hides the element in a weird way, as its not display:block or display:none) class from those elements at the time of printing and putting it back when finished printing.
No. CSS can't modify the DOM, only its presentation.
CSS can't take out elements from the HTML document, however you could try something like:
#media print{
element.relevantclass
{
display: none;
}
This would tell the printed media to not display this element.
you can use jQuery to do this.
$(<element>).removeClass() // or removeClass(<the class to be removed>)
$(<element>).addClass(<new class>)
if you want to do this on loading of the page, you can include this in the document ready function (as shown below)
$( document ).ready(function() {
$(<element>).removeClass()
$(<element>).addClass(<new class>)
});