I need change the slider color in Google MDL Lite.
http://getmdl.io/components/index.html#sliders-section
The colors of the lines on the left and right of the circle are changing, but the circle is staying blue.
Any ideas.
Thanks.
At first, for customizing colors there is perfect Customizer and it will do what you need.
But answer for your question are these lines (rather test it in all browsers):
.mdl-slider {
&:active::-webkit-slider-thumb,
&::-webkit-slider-thumb {
background: $your-color !important;
}
&:active::-moz-range-thumb,
&::-moz-range-thumb {
background: $your-color !important;
}
&:active::-ms-thumb,
&::-ms-thumb {
background: $your-color !important;
}
}
However, there are focus color and other fixes for IE. So if you want to be 100% sure, copy this file with slider style and change color variables ($range-color, $range-bg-color, $range-faded-color etc.) by your requirements. Or use first mentioned solution.
Related
I am working with overlay panels in the PrimeVue framework, but there is an odd issue I can't fix.
As shown in the demo page the arrow is on the left side:
However I need it on the right:
After some google-searching I was able to find this bug report but I am for some reason unable to find a solution to this.
Does anybody know how to move the arrow to the right?
There are no property documented to show the arrow on the right side. But you can try to overwrite the styles manually. The arrows are applied as :before and :after elements of the .p-overlaypanel container. You need to define more specific styles to push the Arrows to the right. This can be done, for example, as follows:
<OverlayPanel class="my-panel">
</OverlayPanel
...
.p-overlaypanel.my-panel:before {
right: 10px !important;
}
.p-overlaypanel.my-panel:after {
right: 10px !important;
}
I've installed Shopware
inherited from the responsive theme and
adjusting the colors (less-files).
This worked well with the header and a few other components like container.less but not offcanvas-menu.less.
In Detail:
finding the color to change:
For this I first made all colors of the entire shop unique. So I can easily tap the color value over the current shop via a pipette tool.
Then I find the color value in the source code and copy the corresponding less source code components into my new theme. Only then do I change the color.
copied inside themes/Frontend :
a) /Responsive/frontend/_public/src/less/_components/offcanvas-menu.less too
b) /MyNewTheme/frontend/_public/src/less/_components/offcanvas-menu.less
the following part :
.sidebar--navigation {
.border-radius();
background: #0492d6;
.navigation--entry {
&:last-child {
border-bottom: 0 none;
}
}
.navigation--link {
overflow: hidden;
text-overflow: ellipsis;
}
}
and changed background: #0492d6; to background: #003E7e; inside b)
Complete result: gist MyNewTheme offcanvas-menu.less
But if i reload and grap the color i got again #0492D6.
As doppelcheck i changed the color in a) to background: black; and its black.
As another doppelcheck i changed the color in themes/Frontend/MyNewTheme/frontend/_public/src/less/_components/container.less to background: red; And red is visible.
Please check if you also imported it.
Please enter in your themes\Frontend\MyNewTheme\frontend_public\src\less\all.less
#import "_components/offcanvas-menu";
The font size on the charts are to small and hard to read on certain colors. Is there a way to change these attributes?
I can do this do make the whole pie red but setting color or font-size doesn't make a change:
.ct-series-x .ct-slice-pie {
fill: #f05b4f
}
<div class="ct-chart ct-golden-section ct-series-x ct-slice-pie" id="chart2"></div>
For anyone who comes across this - override ct-label in your css file:
.ct-label {
font-size: 15px;
}
I'm trying to apply a background image on a menu li on a :hover, however, it doesn't seem to recognize/show the image. It does respond to a color as background on the hover, which is in the same background line in the CSS.
I've made a jsfiddle with the code narrowed down to basics:
Obviously the image wouldn't show in this Fiddle, i'm using a local image.
As you can see, it does respond to the background colors, but not to the images.
Where am I going wrong here?
this works:
.logo li:hover
{
background:navy url('http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png');
display: inline-block;
}
your doesnt work because you are setting
background-image:url('paper.gif');
and then you do this:
background: navy;
this way you are reseting the background canceling previous values
see updated fiddle
http://jsfiddle.net/YgxmU/
You did small mistake following will give your result
background: navy url('paper.gif');
Your mistake is you have given as
background-image:url('paper.gif');
background: navy;
the background property override the background-image:url('paper.gif');
Is there an easier way to display/create rollover images than batching in Photoshop/Fireworks?
Ideally this would be done through CSS or Javascript, somehow creating a semi-transparent white layer over an image when moused over. Currently I just have Photoshop process images with +10% brightness, and do the rest in Dreamweaver with find/replace.
It'd be nice not to have to create separate rollover images for each picture. Thanks!
Using css, you can use something like this:
#navigation a {
background:url(image.png) no-repeat;
filter:alpha(opacity=100);
opacity: 1 }
#navigation a:hover {
filter:alpha(opacity=80);
opacity: 0.8 }
More info here
With images you don't always have to create a new image for rollovers, you can edit the CSS to decrease the opacity of the element:
.myElement
{
background.image: url(path/to/file/image.png);
}
.myElement:hover
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Also I think you'd benefit from looking into CSS Sprites:
CSS-tricks sprites tuorial
A list apart's CSS sprites
Css sprites.com generator