Is there a css media query for Smart TVs?
I tried this way but it did not work:
#media tv and (min-width: 700px) {
body { border: 1px solid red;}
}
I got here by testing a Samsung TV 40' she receives a media query with resolution of 1240px
Worked here:
#media screen and (min-width: 1240px) {...}
Related
I'm trying to standardize the sizes of the devices on my scss, based on this:
/** Extra small devices (phones, 600px and down) */
$extra-small-evices: "screen and (max-width: 600px)",
/** Small devices (portrait tablets and large phones, 601px to 768px) */
$small-devices = 'screen and (min-width: 601px) and (max-width: 768px)',
/** Medium devices (landscape tablets, 769px to 991px) */
$medium-devices = 'screen and (min-width: 769px) and (max-width: 991px)',
/** Large devices (laptops/desktops, 992px to 1200px) */
$large-devices = 'screen and (min-width: 992px) and (max-width: 1200px)',
/** Extra large devices (large laptops and desktops, 1201px and up) */
$extra-large-devices = 'screen and (min-width: 1201px)'
After this, less say that I want to create a media query which the target is the small devices and medium devices:
#media $small-devices,
#media $medium-devices{
....
}
But I'm getting the following error on the #media $small-devices, line:
[scss] media query expected
Environment: Visual studio code, nodejs, angular 6, gulp,
Any one knows how no solve this?
You should tell SASS that your string is meant to be unquoted and treated like regular CSS:
#media #{unquote($small-devices)}{
// Your output here
}
You can still use multiple like this:
#media #{unquote($small-devices)},
#{unquote($extra-small-devices)}{
// Your output here
}
But maybe, for style and elegance, you might want to consider building a mixin that just takes all the strings and then build the media query as such:
#mixin media( $selectors... ){
$selector: '';
#each $s in $selectors {
#if $selector == '' { $selector: $s; }
#else { $selector: $selector + ', ' + $s; }
}
#media #{unquote($selector)}{
#content;
}
}
And then use it as such:
#include media( $extra-small-devices, $extra-large-devices ){
...
}
And the output will be:
#media screen and (max-width: 600px), screen and (min-width: 1201px) {
...
}
Is there a CSS code that changes this text
This is it
to this one
ti si sihT
Try this
.cssClassName { direction:rtl; unicode-bidi:bidi-override; }
EDIT:
apply this class to a paragraph tag and you should get the results your looking for.
Yes, there is:
.reversed {
direction: rtl; unicode-bidi: bidi-override;
}
Thats not right to left, thats mirroring.
CSS:
direction: rtl;
unicode-bidi:bidi-override;
#victor-jalencas gave the answer.
The other thing some people here started talking about is flipping and it is done with replacing the normal text with Unicode flipped equivalents.
Example can be found here: http://www.revfad.com/flip.html
You can use CSS filter filp (Only supported in IE)
<div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipH">CSS Tutorials</div>
Try this, IE does seem to have a bit of a hard time rendering fonts smoothly, but it works like a charm in all browsers. I have tested IE 7-9, Ff, Chrome and Safari on Win 7
.flipText {
display: block;
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
-ms-filter: "FlipH";
}
Is it possible to change body style when entering a full page preview in ckeditor 3. Maybe to set a different body style for full page than when it is not in a full page mode.
The reason for this is using ckeditor when viewing a web page on a larger screen with maximized browser... in that case it is very wide and it is hard to read the content. So I would like to add in body style (but only for full page mode) something like:
...
margin: 5%;
padding: 5%;
border: 1px dotted #666;
...
... that will give more text processor look to the content.
TNX!
When CKEditor is toggled to fullscreen mode it adds "cke_maximized" class to container span.
So you may apply styles for entire container span (body+toolbar) like:
.cke_maximized{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
or just for content body:
.cke_maximized iframe{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
Those are just examples and you may experiment and choose css selector that is more suitable for you .
UPDATE 1:
Sure, you can use javascript code if it is not enough for your purposes. You can use something like this:
var editor = CKEDITOR.instances.editor1;
editor.on("afterCommandExec", function(e){
if(e.data.name == 'maximize'){
// maximized
if(e.data.command.state == CKEDITOR.TRISTATE_ON){
// add special css class to body(e.editor.document.getBody())
} else {
// minimized
// remove special css from body
}
}
});
<img src="/images/home-1a.png" id ="tab66" alt="home" />
#tab66 {
margin-left:0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
This is my code of png image in ie6 but still it does not show transparency
Try this jQuery plugin:
http://allinthehead.com/retro/338/supersleight-jquery-plugin
That said you should avoid having to use this hack in the first place.
Use .GIF's unless you really have to use PNG
body{ background: #0D657B;}
.png_hack {
margin:0 auto;
width:400px;
height:100px;
background-image: url(Img/png.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Img/png.png');
}
it's works
http://www.newstyleonline.net/post/ie6-png-hack.html
That is because AlphaImageLoader works like background-image, showing behind the image inside the img tag - the most common trick here is replacing src="/images/home-1a.png" with a 1x1 pixels transparent gif.
A quicker solution for you here would be:
<div id="tab66"></div>
#tab66 {
margin-left:0px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
width: Xpx;
height: Ypx;
}
if you want to automate this, I'd recommend instead DD_belatedPNG.
How can I change the default graphic for the Infowindow close button?
You can do it with CSS, like this:
img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]
{ content:url("/img/own_close_button.png"); }
Works on:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Most mobile devices (default browser)
Does not work on:
FireFox 27.0
IE 11.0
If you're using google maps API V3, then you might want to use the official add on infobox.
Google Maps Utility - Infobox
First you need to hide the default close icon:
.gm-style-iw button.gm-ui-hover-effect img {
display: none !important;
}
Second, force the default button (that holds the image) to have full opacity:
.gm-style-iw button.gm-ui-hover-effect {
opacity: 1 !important;
}
Third, set your own image and position it:
.gm-style-iw button.gm-ui-hover-effect:before {
display: block;
content: "";
background: url('assets/close-red.svg') center center no-repeat;
background-size: cover;
width: 8px;
height: 8px;
right: -19px;
position: relative;
}
Result:
With jQuery you can change the image file location. If I have an image button_close.png that is 16px in size:
jQuery('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').livequery(function() {
jQuery(this).attr('width', 16).attr('height', 16).css({
width: '16px',
height: '16px'
}).attr('src', 'button_close.png');
});
Of course this only works as long as Google uses this file location.
button.gm-ui-hover-effect {
background: url(your-img.png) !important;
background-size: contain !important;
}
button.gm-ui-hover-effect img {
display: none !important;
}
Using what Dimitrije Djekanovic and Grant suggested, here is a working version for the current API version 3.49 (Mid-May of 2022):
/* hides the x image */
button.gm-ui-hover-effect > span {
display: none !important;
}
/* inserts the customized and clickable image instead */
button.gm-ui-hover-effect {
opacity: 1 !important;
background: url('close.svg') center center !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
/* above is a good size or uncomment the next line */
/* background-size: contain !important; */
}
To test this, go to the StackBlitz demo provided by the official documentation and paste the style.css file while having background changed to:
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/414px-Mr._Smiley_Face.svg.png')
center center !important;
There isn't really a way to do this. Your best bet would probably be to use a third-party or custom Infowindow.
There's a list of some third-party solutions here.
To replace with (or whatever image you might like), after
infowindow.open(map, marker);
you can try to add these lines
$('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').each(function() {
$(this).attr('width', 14);
$(this).attr('height', 13);
$(this).css({width: '14px',height: '13px'});
$(this).attr('src','http://www.google.com/intl/en_us/mapfiles/close.gif');
});