I implemented a simplebar in my angular application like the one in this demo.
I tried to change the color following the documentation:
.simplebar-scrollbar::before {
background-color: red;
}
But it did not work, is there any other way to change to color ?
You're trying to change a component style from another component.
Or you change the global style or you change the component style like this:
::ng-deep .simplebar-scrollbar::before {
background-color: red !important;
}
A working example (changing from global style): https://stackblitz.com/edit/simplebar-angular-demo-2hcxnj?file=src/styles.css
Use simple css like this:
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
background-color: 'orange"
}
One of the samples uses a yellow/red gradient. You can achieve something similar like this:
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
background-image: linear-gradient( yellow , red);
}
For more details, you can read this link
https://github.com/Grsmto/simplebar/issues/431
Related
I have a Vuetify v-simple-table where I need to render row css differently depending on whether a task is complete or not.
I can conditionally render the background color with the following code.
<tr :class="[done? 'greenBG' : 'whiteBG']">
The css is straight forward.
.greenBG {
background-color: #79ecc5;
}
.whiteBG {
background-color: white;
}
However, I cannot seem to disable the defualt :hover css. I tried connecting it to the class with this css.
tr.greenBG:hover { background-color: green }
If anyone can help me achieve this I'd be grateful.
Try with the !important property to ensure you override any conflicting vuetify CSS
tr.greenBG:hover {
background-color: green !important
}
if you really want to avoid using !important you need to be as specific as vuetify's CSS selector:
.v-data-table__wrapper
table
tbody
tr.greenBG:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
background: green;
}
How could we change the progress bar colour in Primeng. In the progress bar documentation it lists down
ui-progressbar-value
as the Element whose width changes according to value.
But when in the CSS when I set
.ui-progressbar-value {
background-color: #ef5439;
}
It does not change anything. Infact I don't see any color.
Any help would be appreciated.
First add your own unique class in your progress bar like below
class="customProgress" and then try to override it in your scss or css file.
Hope it will work
<p-progressBar class="customProgress" [value]="value"></p-progressBar>
.customProgress .ui-progressbar .ui-progressbar-label {
color: yellow;
}
.customProgress .ui-progressbar .ui-progressbar-value {
background: red;
}
I achieved the result with the following configuration:
HTML
<p-progressBar [value]="progressValue"
[ngClass]="'customProgress'">
</p-progressBar>
In the CSS file, this is what you have to add:
::ng-deep .customProgress .ui-progressbar .ui-progressbar-value {
background: #ef5439;
}
The above solutions did not work for with primeng 11. I achieved the result in this way
`<p-progressBar [value]="progressValue" class="customProgress"></p-progressBar> `
and with theming property CSS
::ng-deep .customProgress .p-progressbar-label {
background: #ef5439;
color: #fff;
}
In angular prime ng components use below method of style to change progress bar color
<p-progressBar [style]="{'background':'red'}"></p-progressBar>
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
I'm wondering, I have alot of image on my website that behave depending on the class. I was wondering if it would be possible using CSS to do this for example.
.willReactOnHover.class1{ background: url('../images/image1.png');}
.willReactOnHover.class2{ background: url('../images/image2.png');}
And then, on hover
.willReactOnHover:hover{
background: /*Here, .class1 would be .image1-hover.png AND
.class2 would be .image2-hover.png */
}
I don't know if it's possible to just had a suffix -hover to all the existing path even if different... I know in javascript I could but I'd love a pure CSS solution else I'll have to create the hover event for every class but since it's the same task for each class I don't know if there's a way it'd be optimal. Or maybe is there a CSS selector that I could use to achieve this?
before CSS-3 people often used background-position along with a image-sprite so you could use the old-horse background-position , like so :
.willReactOnHover.class1{ background: url('../images/image1.png');}
.willReactOnHover.class2{ background: url('../images/image2.png');}
.willReactOnHover:hover{
background-position:-10px;
}
Unfortunately this seems to be impossible with pure CSS at the moment. If you use a prepocessor, like LESS, you could use a loop to accomplish what you want very easily:
Example CSS
#url: "../images/image";
#ext: ".png";
#hover: "_hover";
.generate-images(5);
.generate-images(#n, #i: 1) when (#i =< #n) {
.class#{i} {
background-image: url("#{url}#{i}#{ext}");
}
.class#{i}:hover {
background-image: url("#{url}#{i}#{hover}#{ext}");
}
.generate-images(#n, (#i + 1));
}
Demo
Try before buy
It seems that you could define a CSS rule for each class that you need.
Perhaps the following may be helpful.
.willhover.class1 {
color: blue;
}
.willhover.class2 {
color: green;
}
.willhover.class1:hover {
background-color: yellow;
}
.willhover.class2:hover {
background-color: beige;
}
<div class="willhover class1">Class 1</div>
<div class="willhover class2">Class 2</div>
However, you still need to create specific two types of CSS rules, one for pointing to the non-hover image and the other pointing to the hover image.
I have defined some background colors that I'll be using on my site. So I can easily set the background color of different elements like:
.background_highlite{
background-color: rgb(231, 222, 207); /*Cream in my Coffee*/
}
.background_shadow{
background-color: rgb(201, 179, 156); /*Moose Mousse*/
}
Now, if I want all textarea elements on my page to have Moose Mousse color as their background I want to write another CSS rule that references back to .background_shadow, so I only have to change the rgb values in one place.
Something like:
textarea{
height:50px;
background-color: background_highlite /* want to feed forward to keep the rgb in one place */
}
Is this possible with CSS?
People have been frustrated by CSS's simplistic structure, and have created pre-processors to write CSS more conveniently. Look at Less, for example, or CleverCSS.
You can assign all the elements the same class, and then set the background color in the class's CSS:
<textarea class="background_shadow">blah</textarea>
Keep in mind that you can assign a number of classes to any element, so you can use one class just to control the background color, and then use other classes for your other needs:
<textarea class="background_shadow another_class something_else">...</textarea>
Not really. http://dorward.me.uk/www/css/inheritance/ lists your main options.
Sorry, no. CSS does not support variables, or chaining.
however, there is a javascript library that allows that. http://lesscss.org/
The best you can do would be
.hilight textbox {
background: black;
}
textbox {
color: pink;
}
.background_shadow {
background: grey;
}
Or, of course, you could add the .hilite class to your div.
You have two options to work with:
Native CSS, which is possible, but not good to maintain.
Preprocessor, like xCSS, which can create more cleaner code and provide variables.
For simple projects I assume, native CSS will be good. But in more complicated it`s best to use some sort of processors, like pals talked earlier.
In this method you can always use some human readable rule like:
.blabla {min-height: 20px}, which pre-processor by your own logic transform to CSS, that all of our target browsers can understand, like .blabla {min-height: 20px; height: auto !important; height: 20px;} etc.
Also what I realy like in preprocessors is that you can right code, as here:
.specialClass extends .basicClass {} // see more at extends
.selector {
a {
display: block;
}
strong {
color: blue;
}
} // see more at children
or what you needed is vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
} // see more at vars