I have an image (combination of blue and white in color) and background colour(white) . On click of the div, I need to reverse the colors. (background color to blue) and image(blue part of the image to white colour and white part of the image to blue colour).
Html :
<div class="col" ng-click="onHomeButtonClick()">
<img src="images/iconHome.png" class="menu-icons"><br>
</div>
Js code :
this.onHomeButtonClick = function($event){
$event.target.style.backgroundColor="DarkSlateBlue";
}
Tried so far :
Using $event.target.style.backgroundColor="DarkSlateBlue"; I am just able to set the background colour.But how do i invert the colors.
Try to use the CSS deklaration:
This could be like this:
HTML:
<img src="images/iconHome.png" id="imageToInvert" class="menu-icons">
CSS:
#imageToInvert:hover {
filter: invert(100%);
}
Hope this helps.
Not sure that filter:invert(100%) is actually what you're asking for but if it is as indicated in a comment you made, just make a class with that style. Such as .filterClass{filter: invert(100%)} then add that class in your click event using this element.className +="filterClass";
I hope this may help you Fiddle this one is for the div with background color you can use the same technique and change the image color too.
Related
<Button className={`white-color-text bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]" bodyS my-4`} text={"Get Started"} />
I cant see to change the background color (which is linear) on active in Tailwind . Any suggestions?
You are using the hover modifier with the wrong syntax. Instead of wrapping your hover modifier (hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]"), you need to apply the modifier to each segment of your gradient utility:
<div class="bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:bg-gradient-to-r hover:from-[#fff] hover:to-[#ff6f48]">Get Started</div>
Tailwind-play
There's an explanation on how to apply modifiers on each class in the documentation, for example, for the Gradient Color Stops.
I have created a p-tabview with each tab containing some content. For that I have modified my app.component.html by adding the following code:
<p-tabView class="tabmain" [style]="{'background-color': 'cyan', 'margin-left':'0'}">
<p-tabPanel header="Godfather I" leftIcon="pi pi-calendar" [style]="{'background-color': 'red'}">
<div [style]="{'background-color': 'red', 'margin-left':'0'}">
Hi. This is the content.
</div>
</p-tabPanel>
</p-tabView>
I intend to give a dark background as I have to create the tabview in dark theme. I tried to add styles above to check the background color and the result is:
As visible, the portion between the content and the tabview is white in color. I intend to style in such a manner that the entire grid becomes dark. Cyan and red are just sample colors to check where the background color is getting applied against each property.
How to change the background color(white currently) between content and tab view boundary?
Looking the docs
You should manipulate p-tabview-panels in your scss(or css) of your component our globaly in style.scss (or css).
So your css is something like this
:host ::ng-deep .p-tabview .p-tabview-panels{
'background-color': 'red'
}
Read more here in local styling section
https://www.primefaces.org/primeng/showcase/#/theming
I would like to use a glypicon using css.
The original HTML uses a background image which I would like to replace. I can't edit the html, so I want to modify the background image using css to a Glyphicon. I would like to use glyphicon glyphicon-arrow-right. I know I could replace the .gif file but I would like to avoid having to do that.
This is the HTML were I need to modify the css
<img title="My Title" class="handle icon-navigate_right medium" alt="My alt Text" src="assets/images/transparent.gif">
At the moment I have added in my css
.icon-navigate_right {background-image:none;}
and it is working, but I don't know how to now add a new background image that is a Glyphicon.
If I add something like
.icon-navigate_right:before{
content:"\2b";
font-family:"Glyphicons Halflings";
line-height:1;
margin:5px;
}
It won't display anything. Also I am not sure what content:"\2b" means.
Any help would be much appreciated.
Thanks in advance Tess
I have a problem with creating custom p:chart type="pie" canvases.
I have to change the background color of the pie chart like from white to another color.
I tried almost everything i found. I tried to override css resource of Prime Faces chart classes but it doesn't work. It turns all canvas/frame into one color and make chart disappears.
.xhtml file
<p:chart type="pie"
model="#{dashboardController.model}"
style="width:500px;height:250px; margin: 0 auto;" />
bean.java file
model= new PieChartModel();
model.setDataFormat("value");
model.setShowDataLabels(true);
model.setFill(true);
model.setTitle("States");
model.setSeriesColors("62656a,a5a5a5,929397");
model.setShowDataLabels(true);
model.setDiameter(200);
This is the component which i need to change background of the canvas. You can see the same chart from here : http://www.primefaces.org/showcase/ui/chart/pie.xhtml
**How can i change only the background? **
Thanks in advance.
Change the bg on this class:
.jqplot-series-canvas {
background:blue;
}
div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled { background-color:#ff9966; }
div.task { background-color:#ffffcc; }
Now I want to print this
<div class="legend-container">
<div class="legend">
<div class="task_pending_execute"></div>
<div class="legend-text">Executing</div>
</div>
<div class="legend">
<div class="task_cancelled"></div>
<div class="legend-text">Finished</div>
</div>
...
</div>
For IE graph is rendered as image.
User browser set not to print background-color by default, but that's inacceptable in this concrete situation
I still don't want to subsitute 'color' div's here by images.
What css property should I use instead?
You can try using a colored border, something like this:
div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }
However, I'm not sure if IE considers borders as background or foreground when printing.
[EDIT: another idea]
Another solution would be to use Unicode Block Elements and then set the foreground (text) color.
<div>█████</div>
<div>█████</div>
However, this will fail on systems without proper unicode support, or without correct fonts.
Also, it will give you little control about what is the width of the legend, because different fonts have different widths. (maybe CSS #font can help you solve this, but I'm not sure)
Finally, maybe there are visible "seams" between each character, depending on the font. (this might be "fixed" by setting a negative letter-spacing)
Not something you can really do anything about. Background colour/image printing is a printer option and not something you should really count on - http://css-tricks.com/dont-rely-on-background-colors-printing/