Here is the style sheet:
QSlider{
border: 0px solid;
}
QSlider::handle:horizontal#slider_xScaling{
image: url(":/tools/references/dragger.png")no-repeat scroll 0 0;;
}
QSlider::add-page:horizontal#slider_xScaling{
image: url(":/info/references/ic-scroll-layer-track.png")no-repeat scroll 0 0;
}
QSlider::sub-page:horizontal {
background: transparent url(":/tools/references/ic-track-fill.png") no-repeat scroll 0 0;
margin-top: -1px;
}
I have been experimenting on the CSS stylesheet on QT but still can't produce the proper output for this. The track is supposed to be on the middle obviously but here it is.
This is how I fixed it. I also changed the height of the QSlider to make the tracker in line with the handle
QSlider::sub-page:horizontal {
background: transparent url(":/tools/references/ic-track-fill.png") no-repeat scroll 0 0;
}
QSlider::handle:horizontal{
image: url(":/tools/references/dragger.png")no-repeat scroll 0 0;
}
QSlider{
border:0px solid;
}
Related
I got a problem with Angular Material and customizing the formfield styles.
I have got override the styles of the form-field-appearance-outline in the custom-theme.scss to add more border-radius in 4 corners and work ok everywhere except in dialogs in which only work in the right side (-end).
This is an example in the app
And this is in a Dialog
As you can see only happen in the dialogs.
this is what I have in the custom-theme.scss
////////////////////////// FORM FIELDS //////////////////////////
.mat-form-field-appearance-outline {
.mat-form-field-infix {
padding: 0.4rem 0 0.7rem 0;
span {
top: -1.2em;
}
}
.mat-form-field-outline {
background-color: rgba(187, 187, 187, 0.2) !important;
border-radius: 15px !important;
border: none !important;
.mat-form-field-outline-start {
border-radius: 15px 0 0 15px !important;
}
.mat-form-field-outline-end {
border-radius: 0 15px 15px 0 !important;
}
}
}
Looking for a class a miss in the elements tab in devtools i that the element appears to be good overridden:
LEFT SIDE
RIGHT SIDE
Already try with ViewEncapsulation and styles in components but nothing.
any ideas how I can fix this?
I have changed overflow CSS but my app design is dark, so I can see white rectangular where both scroll bars converge. How to hide it?
::-webkit-scrollbar {
width: 20px;
cursor: pointer;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #edde5d;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #f09819;
}
Use this CSS as per your convenience, it would work fine :
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0); // transparent or any other color you want
}
I have a div acting as a round button. It is styled so that a significant part of its overall appearance comes from a box-shadow:
<body style="background:black">
<div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div>
</body>
I have a click event listener attached to the button div. Unfortunately, it doesn't respond if the div is clicked on the box-shadow as the box-shadow is rendered outside the div.
This is particularly a problem on touch devices where the finger sometimes doesn't hit the center of the div. (Of course, it responds normally if the click is within the div's 50px area.)
Is it possible to make the event listener respond to clicks on the box-shadow as well as the actual div?
I realise I can use a separate and larger transparent div over the top of the button and attach the event listener to that, but is such a workaround necessary?
(The button div must be styled with box-shadow. I can't use the border property or increase padding.)
Yes, changing the box-shadow to an inset shadow will make the area occupied by the shadow also clickable. An inset box-shadow is actually added within the element and hence even a click on the shadow is treated as a click on the div.
window.onload = function() {
var btn = document.querySelector("#button");
var btnOriginal = document.querySelector("#button-original");
btn.addEventListener("click", function() {
alert("I have been clicked");
});
btnOriginal.addEventListener("click", function() {
alert("I have been clicked");
});
}
#button {
width: 64px;
height: 64px;
border: none;
border-radius: 50px;
box-shadow: inset 0 0 2px 2px #fff, inset 0 0 0 7px #c03;
}
#button-original {
width: 50px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff;
}
/* Just for demo */
#button {
margin: 10px;
}
#button-original {
margin: 17px;
}
div:hover {
cursor: pointer;
}
body{
background: black;
<div id="button"></div><!-- modified version -->
<div id="button-original"></div><!-- original version -->
The following are some points that need to be considered while changing the shadow to an inset one:
Since the box-shadow is added inside, the height and width of the div should be increased by a bit to make sure the final outcome is the same size as your original version. In the normal box-shadow version, the size of the shape would be the container's radius + spread radius.
You may also have to adjust some margins like I have done in the sample below.
Any blur that is added to the shadow will now be applied inwards (that is, the blur will blend with the inner part of the container and not the body). We can do nothing about this.
Note: In the above snippet, I have replaced the inline style attribute's contents with CSS.
If you want the second shadow (the white colored one) to blur towards the outside and blend with the body background, you could replace the box-shadow with radial-gradient like in the below sample. But there are two drawbacks of using radial-gradient, one is it has lower browser support and second is the curves are not very smooth when the element's size is very small.
window.onload = function() {
var btn = document.querySelector("#button");
var btn2 = document.querySelector("#button-2");
btn.addEventListener("click", function() {
alert("I have been clicked");
});
btn2.addEventListener("click", function() {
alert("I have been clicked");
});
}
#button {
width: 75px;
height: 75px;
border: none;
border-radius: 50%;
background-image: radial-gradient(circle at 50% 50%, transparent 57.5%, #c03 57.5%, #c03 65%, #fff 65%, transparent 72%);
}
#button-2 {
height: 150px;
width: 150px;
border: none;
border-radius: 50%;
background-image: radial-gradient(circle at 50% 50%, transparent 57.5%, #c03 57.5%, #c03 65%, #fff 65%, transparent 72%);
}
div:hover {
cursor: pointer;
}
body {
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="button"></div>
<div id="button-2"></div>
I want to set background image of the button for following image:
using this code:
<style>
.cancel-button {background-image:url(images/cancelbutton.png) !important;}
</style>
but I got the output of the button like following image
How to fix this issue?
Fixed solution
Working example: http://jsfiddle.net/Gajotres/AJsTR/
CSS:
.cancel-button {
background-image:url("http://i.stack.imgur.com/0XDDb.png") !important;
border-radius: 0 !important;
border-width: 0 !important;
box-shadow: 0 0 transparent !important;
width: 197px !important;
height: 75px !important;
}
Responsive solution
Working example: http://jsfiddle.net/Gajotres/AJsTR/1/
.cancel-button {
background-image:url("http://i.stack.imgur.com/0XDDb.png") !important;
border-radius: 0 !important;
border-width: 0 !important;
box-shadow: 0 0 transparent !important;
background-size: 100% 100% !important;
}
Final note
Take a look at this article if you want to find out how to customize jQuery Mobile elements by yourself.
I have a wordpress website its http://pacelinegroup.com/ as you see below the slideshow theres a body which is the main content of the site. I want it to be all black instead of white. I tried changing it but it doesnt make it white the entire area. Please help me on what css code to use to make it entirely black everything.
Change
body#home #main-content {
background: url("images/main_content_bg.png") repeat-y 480px 39px #000000;
}
style.css (line 136)
body#home #recent-posts {
background: url("images/rec_posts_bg.png") repeat-x scroll 2px 0 #000000;
width: 480px;
}
style.css (line 141)
body#home #sidebar {
background: none repeat scroll 0 0 #000000;
float: left;
margin-top: 0;
width: 480px;
}
style.css (line 342)