I have a site which already is overall dark (https://spacetrace.org), but since the new dark mode in Firefox exists, if it is selected, some colours and image transparencies are then changed somehow, which breaks the overall style.
I couldn't find an official document that explains the automatic changes.
How do I find out what was changed and revert those unexpected changes?
Note: I would like to enhance the site so it does what the user wants, and serve a working dark version using media query:
#media (prefers-color-scheme: dark) {
/* css */
}
But I cannot find the CSS options that were changed, so I can adapt them
I guess you are talking about this.
http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes#Editing;
https://developer.mozilla.org/en-US/docs/Web/CSS/#media/prefers-color-scheme;
All you need is to add userChrome.css file with some code like this:
:root:not(:-moz-lwtheme) {
background-color: #e3e4e6 !important;
color: #18191a !important;
}
For some reason, I can't change the color of the carousel controls using either inline styling, or css modules...
Any ideas?
Here is the js file:
return (
<div>
<style>
{
`.custom-tag {
max-width: 100%;
height: 400px;
background: transparent;
}
#media (max-width: 1100px) {
.custom-tag {
height: 300px;
}
}`
}
</style>
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
{slides}
<div className={styles.carouselControlWrapper}>
<CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
</div>
<div className={styles.carouselControlWrapper}>
<CarouselControl direction="next" directionText="Next" onClickHandler={next} />
</div>
</Carousel>
</div>
);
}
export default GrowCarousel;
Here is my tentative css modules file:
.carouselControlWrapper {
color: black;
}
And yes, I have tried styling the component directly both using inline styling and CSS modules. The wrapper div is my latest attempt.
Help!
I haven't recreated the exact example above, but I still think my answer will be useful for you.
The reason you can't change the color of the control arrows is because they are background images in reactstrap. Using properties like 'color' or 'background-color' will not work here for that reason. You can use the filter property to play with the image's color in a limited way but I sense it will not solve your problem since what it can do is pretty limited.
What I suggest is following:
First, make sure you are getting the right element. In this case, I'd first suggest trying to change the background-color just to make sure you're targeting the correct element. The element you're looking for is the first <span> under the CarouselControl component. It has the class carousel-control-prev-icon or carousel-control-next-icon depending on direction. You can select it by specifying the class and element, using !important keyword etc.
Once you are sure that you are selecting the right element in your code, remove the background-color property and use a background-url property of your choosing to replace the background-url used in that <span>. You have to do it with an icon of your choosing. A simple example for importing a static resource to a component can be found here for example: https://github.com/Vanguard90/nyt-news/blob/master/src/components/App.tsx
So in short, you need to replace the icon used by reactstrap, that's the only real solution I see here.
If you just want to change the color from white to black (which was our case because the background was white-ish, and we couldn't see the prev/next buttons properly due to the lack of contrast) then you can use:
.carousel-control-prev-icon,
.carousel-control-next-icon{
filter: invert(1)
}
It doesn't exactly answer to OP, but it's a nice trick that helps avoid embedding your own prev/next images.
I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.
Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.
My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.
I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.
I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.
Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.
If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none
Example HTML:
<div class="invisible">
<div class="img-container">
</div>
</div>
Related CSS:
.invisible {
display: none;
}
.img-container {
background: url(img.xyz);
}
#media print {
.invisible {
display: block;
}
}
Apart from that a similar question had been asked: Prevent images from loading
May be that will help you, if background images are definitely NOT an option.
I am using a separate print css on our website. It's been requested that we have our logo at the top of printed pages. This is the code I'm using for print.css:
body:before {
content: url(../images/logo.gif);
}
This works on Firefox, Chrome, Safari and Opera ... and of course you know what's coming next.
It doesn't work in Internet Explorer 8 which apparently supports before as a pseudo-class: http://www.quirksmode.org/css/beforeafter_content.html
In print preview there is a blank space the same size as the logo but our logo doesn't print. If I change the code to:
content: "Test Text" url(../images/logo.gif);
The "Test Text" shows, but still not the logo.
Does anyone have any ideas? It's made very difficult that I can't debug off "print preview" and simply changing the media type on the CSS links renders something completely different in the browser screen.
Cheers
Tama
You can't print background images by default. Users need to change their browser settings to print background colours and images.
Your best bet is to add some HTML like this:
<div class="PrintOnly">
<img id="PrintLogo" src="logo.gif"/>
</div>
Styling something like this to explicitly hide from non-print media configurations:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}
I have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/
Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.
Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}
you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number
This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...
It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.
If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.
The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.
Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }
I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939
I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.
I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.
i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.
This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.