Can we change the background color used for the bars which display on top and below a video, when a video doesn't fit the screen?
By default it is a dark gray, which is very distracting.
I tried this to see if it can be changed at all. But it didn't change:
.background {
background: center no-repeat url(my_background_url)
background-color: rgb(255, 255, 255);
...
}
Adding this to your custom stylesheet will do the trick:
#player video {
background-color: black;
}
However, I think Google should not set a background-color on the video element (currently #111 I think)
Related
.focusOutline:focus-visible { outline: 3px solid green; outline-offset:5px; z-index:99; }
I have added an outline and animation to the amp-accordion. During the animation/transition the outline outside of the accordion disappears.
https://codepen.io/wilson-ruan/pen/yLjwyNO
Can the outline not disappear?
I create the one kendo grid .kendo grid use default white or off white color i want to change full background area white e to transparent.I tried many thing but not get the actual result.If any body know please respond to me.thanksYou can see image now is background color is white but i want to change transparent color
You need to override the following styles:
<style>
/* Grid header */
#grid .k-grouping-header, #grid .k-grid-header {
background: transparent;
}
/* Grid content */
#grid.k-grid, #grid.k-grid div.k-grid-content {
background: transparent;
}
#grid.k-grid tr.k-alt {
background: transparent;
}
/* Grid footer */
#grid .k-pager-wrap, #grid .k-pager-wrap .k-pager-numbers, #grid .k-pager-wrap .k-dropdown-wrap {
background: transparent;
}
</style>
Working example: https://dojo.telerik.com/#GaloisGirl/UqaPagec
I want to ask if there is some way to force Dropzone to use the dimension (dimension ratio) for preview, based on the uploaded image rather then specifying them in Dropzone config.
I want to display the preview of the image in the same dimensions ratio as the original, but smaller.
Thanks
Jan
You should redefine the css styles below :
.dropzone .dz-preview .dz-details, .dropzone-previews .dz-preview .dz-details {
width: auto !important;
height: auto !important;
}
.dz-details img {
width: auto !important;
height: auto !important;
position: relative !important;
}
I am working on a WordPress theme and am trying to incorporate retina enabled CSS queries into my CSS file.
I would just like to clarify that I have the media queries set up correctly before I change out all my background images.
I have doubled the size of all my background images and perfixed
them with the "#2x" naming convention. e.g icon-user#2x.png.
I have added a jQuery function into my code to swap out the images with the CSS class of hires.
In my CSS document I have a normal CSS class for a background image.
Normal CSS query
.side-nav .arrow {
background: url(../images/arrow-nav.png) no-repeat top left;
width: 5px;
height: 8px;
display: inline-block;
margin-left: 10px
}
Is this the correct way i would change the .side-nav .arrow class for a retina enabled device? When declaring the background size do I keep the size that of the original smaller image?
/* All Retina Ready devices larger than 1.5 pixel ratio */
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
-webkit-background-size:5px 8px;
-moz-background-size:5px 8px;
-o-background-size:5px 8px;
background-size:5px 8px
}
}
jQuery Code
$(function () {
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
/* loop through the images and make them hi-res */
for(var i = 0; i < images.length; i++) {
/* create new image name */
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 4);
imageName += "#2x" + imageType;
/* rename image */
images[i].src = imageName;
}
}
});
Thank you
As long as there is some form of scaling taking place, like when you declare
<meta name="viewport" content="width=..."> (for android/ios/blackberry/WP8)
or
#ms-viewport {width: ... ;} (for non-WP8 IE10)
or ... even if you declare nothing most mobile devices will by default automatically scale such that viewport width=980px
then all CSS dimensions you declare with 'px' will exist in the same proportion to their viewport regardless of differences between their physical DPI/PPI
this means you shouldn't have to change a single thing about your style class except the background image's URL when the media query matches a high res device:
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
.side-nav .arrow {
background-image:url(../images/arrow-nav#2x.png);
}
}
It is possible to draw a rect with a border, which appears left, right and top.
What I want is a tabbar with a border around everything (content and buttons), but the borderline between button and content should disappear.
I think, the easiest way would be to draw a border around a rect without the bottomline.
Try using the CSS "outline" command.
Something like this :
#tabContainer {
border: 1px solid #DDD;
outline: black solid thick;
}