I'm having such a weird problem with a html of a mail marketing newsletter when receiving the email on apple mail (osx and ios- both latest) on dark mode. I add the media queries and everything works perfect from light to dark, images changes perfectly but theres an anoying problem with tags.
I'm using my cta buttons as but i cannot by any means to add a background color to the and change ist's text color, this only on dark mode. On light everything works as it should. I send the images of the button in ligt and dark for better understanding as well my inline code and my css code. I've tried with span in text, without, with borders, with padidings, etc etc, everything i could remember. On any browser dark and light works great.
Hope someone can help me.
Many thanks
#media (prefers-color-scheme: dark) {
a.nos-button,
a.nos-button span{
background-color: #fff !important;
background: #fff !important;
border-color: #fff !important;
color: #000 !important;
}
}
#media (prefers-color-scheme: light) {
a.nos-button,
a.nos-button span{
background-color: #000 !important;
background: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
}
<span>COMPRE JÁ</span>
Related
I have created carousel arrows using font-icons and they are appearing as required on Firefox and Chrome on my system even I have checked it on my android and they are showing the same result as red color arrows generated by the font-icons.
But when someone is looking at the website on iPhone in the safari browser it is not showing these buttons properly, instead it is showing blue background and white color arrow on it.
I am using font-icons for generating these arrows in my code and I have thoroughly checked my CSS several times but no luck.
Here is my CSS for these buttons:
body.home .et-pb-arrow-next::before, body.home .et-pb-arrow-prev::before {
color: #ff0000 !important;
display: block !important;
margin-top: -35px !important;
}
body.home #main-content .et-pb-arrow-prev::before {
content: "\25C0" !important;
font-size: 40px !important;
}
body.home #main-content .et-pb-arrow-next::before {
content: "\25b6" !important;
font-size: 40px !important;
}
I try to find a solution for a few hours now but I do not know how to do this. It is maybe a simple thing and I hope someone can help me out.
I created three boxes. Those boxes have a border at the top and change their background colours as soon as you scroll over with your mouse.
Screenshot without hover effect: http://i.imgur.com/TWSvdUt.png
Screenshot with hover effect: http://i.imgur.com/NdELr4T.png
My problem is now, that I also need the colour of the title and the text in another colour (#ffffff)! I do not know how I have to change my .css!
Here is what I did:
.frontpage-box {
position: relative !important;
border-top: 8px solid #233c5b !important;
background: #eeeff1 !important;
height: 280px !important;
}
.frontpage-box:hover {
cursor: pointer;
position: relative !important;
border-top: 8px solid #daaf36 !important;
background: #233c5b !important;
color: #ffffff !important;
}
Can you tell me what is wrong? How do I have to change the code, so that the font color will be "white" after hover.
Thanks in advance,
Chris
Without seeing your full code you would want to do
.frontpage-box:hover p { color: #fff }
and not set it in .frontpage-box:hover with the important.
Suppose I have some text which is displayed over an image or some other printable colours. Is it possible to force this text to white when printing? The default behaviour is to force white to black or grey in most browsers. This clearly makes sense when you are printing text in containers with background colours/images which are removed, but doesn't make sense to force the text in the case where you are overlaying text on images.
I should probably mention that I am quite aware of the print stylesheet, it just so happens that regardless of setting the font colour, in IE/chrome/firefox, the font does not appear white regardless. It ends up black or grey depending on the browser. Please show an example of white text over an image if you think it's actually possible.
To illustrate see:
http://jsfiddle.net/NSwYE/
I personally don't think it's possible due to the way printing works. It's pretty annoying none-the-less.
This is not entirely in control of the web page author.
For example, this fiddle will print (at least it did for me on a Dell 1720 Laser Printer) white text on any of the three black backgrounds in
IE9
if the user has checked the box found next to:
Tools -> Print -> Page Setup -> "Print Background Colors and Images"
If that box is unchecked, then it will not print the black at all on the first two, but will on the last (since it is an img tag), but it prints the text as a grey, even over the img tag. Thus, it seems that the setting for "Print Background Colors and Images" affects how the browser interprets the text, and will allow a true white (knock-out effect) if checked, but not if unchecked.
Firefox
Checkbox found here (which seems to work):
File -> Page Setup -> "Print Background (colors & images)"
For Chrome? Web Page Author Controlled?
I have not yet verified whether the information from this post will do it or not (it does not work for me on my next fiddle, but it may be because it is in an iframe). For elements that should print in Chrome, try setting:
-webkit-print-color-adjust: exact;
Marked answer is wrong. You can control text color in every browser! You just need to output text in svg. Browsers don't change color in svg. Here's an example:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
print.css will help you, Eric meyer have a post about it.
For example html5boilerplate using this style on his css:
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
Update:
With your example html:
<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>
and my css:
#sometext {
position: absolute;
top: 125px;
left: 220px;
color: #FFF;
}
#media only print {
#sometext {
color: #FFF !important;
/* actually trick with white text-shadow not work ( */
text-shadow: 0 0 3px #FFF !important;
}
}
I get this demo. Is this an acceptable solution?
Solution:
#media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #fff;
}
#media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #fff;
-webkit-print-color-adjust: exact;
}
}
}
The example http://jsfiddle.net/NSwYE/ prints white text on top of the cat for me. But I'm using Firefox 3.6 and a Brother laser printer.
The behaviour of printers is entirely dependent on the printer driver and the application. My printer will print the example correctly using Firefox. It will print grey-scale text from Microsoft Publisher correctly. It will not print grey-scale text in Microsoft Word: text is always black.
Probably, if you use a print specific stylesheet that styles it as such.
e.g.
<link href="print.css" rel="stylesheet" media="print" />
It might be a bit overkill, but if this is something you need repeatedly, you might consider generating the content using either canvas or SVG (Raphael.js will provide IE support). Both canvas and SVG/VML elements will print with exact colours in major browsers.
/* Text color */
.element
{
color:transparent;
text-shadow:0 0 0 #fff;
}
/* Background color */
.element
{
box-shadow:0 0 0 1000px #000 inset;
}
In Internet Explorer, you need to enable background printing. Tested in Chrome 70, Firefox 60 (with disabled background printing also works) and IE11.
It doesn't need to calculate SVG width because SVG is not used.
Try adding an !important attribute to the css for it to print correctly, eg "color: white !important"
Is there any way to ensure that my grey font colors do not turn black?
Firefox and Chrome seem to do this in order to prevent white text on black background from turning into white on white. I do not have a background color (except white), so this browser-level conversion is not useful, it only helps in preventing grey colors for no reason.
Is there a way to turn this off? Or should I just stick with techniques like opacity, browser detection, and coloring my grays...
Solution:
#media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #ccc;
}
#media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #ccc;
-webkit-print-color-adjust: exact;
}
}
}
I found had to :
Add !important to the css rule... and...
In the Firefox print dialog, tick the option for "Appearance: Print background colors"
I couldn't get it to work in Chrome.
Some browsers add more respect to your gray if you add color: Replace #777 with #778. Be wary of opacity. Sometimes, even if the print preview will show great results, it only actually works on select printers. Printers with unlucky firmware will fail to print your text at all if it is gray using opacity.
You just need to output your grey font in svg. Browsers don't change color in svg. Here's an example:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
I thought that is the only div on that page. Make the following change, it should work fine.
<style>
#media print {
div.red {
color: #cccccc !important;
}
</style>
And change the html of the div tag like below
I found that TEXT color is not inherited by "general purpose" stylesheet, but must be forced again in print css file.
In other words, even if text color is set in the general css file (one with media='all' attribute), it is ignored when printed, at least in Firefox and Chrome.
I found that writing again (redundant but..... necessary) text color in print css file (one with media='print' attribute), color now will be considered.
This solution working in all browsers:
.text{
color: transparent;
text-shadow: 2px 0 #red;
}
Give importance to color:
.bgcol{
background-color:skyblue !important;
}
.subject_content,h2,p{
color:rgba(255, 255, 255) !important;
margin: 25px auto;
}
<body class="bgcol">
<div class="subject_content">
<h2 class='text-center'>fhddfhnt area</h2>
<p>sdgdfghdfhdfh.</p>
</div>
Nothing above was working for me so I finally figured it out.
Always give colors to direct elements. Ex. Suppose your html is
<div class='div'><br/>
< h1>Text< /h1><br/>
</div>
and your CSS
.div {
color: #ccc;
}
This was my case. In this case no matter what you do the color won't show.
You have to do
.div h1 {
color: #ccc;
}
#media print {
.div h1 {
-webkit-print-color-adjust: exact;
}
}
Hope this helps you!!
Please reply if you find a better solution as this is what I could find after 2 hrs and it works for me.
I'm trying to use a custom ::selection effect in Chrome but getting this bad blue coloration on highlighted text:
Here's my CSS:
::selection {
color:#ffffff;
background: #000000;
}
::-moz-selection {
color:#ffffff;
background: #000000;
}
::-webkit-selection {
color:#ffffff;
background: #000000;
}
I can't replicate the error in Firefox - is there anything I can do, or is it just a feature of the browser?
You want to wrap the text in a <p> tag.
I'm a little confused, because the selected text is applying the style from the code you're using... white text on a black background.
Is the light blue part the problem? If that's the case, I think the structure/css of the surrounding container(s) would be more helpful to get to the bottom of this.