I am new to jQuery. I want to use the "ui-icon ui-icon-triangle-1-e" with a color that matches my application ,also I dont want use a differnt .png file with the color I want. Please help me get this done.
Your best option is to use a different PNG file, that's the only option for this really (that works cross-browser). However it's pretty easy to get the color you want, use the jQuery UI ThemeRoller and you can configure/download the exact colors you want in a theme, including the icons.
Related
How can I replace the icons used in Vaadin Flow components (calendar, upload etc) with my own icons? Is that even possible? I didn't see anything in component's API and it looks like the icons are font icons instead of the usual iron-icon.
Yes, the component icons are implemented using font icons. The main reason was that they should be customizable with a theme (CSS), which seemed impossible using iron-icon. Eventually we want to transition to using SVGs for the component icons as well.
So, to customize the component icons, you need to write a component style sheet, where you change the icon. You can either create your own icon font, or use a CSS background image. The latter option has the downside of not being able to change color easily, without swapping the whole image.
As an example, here’s what you’d write for the vaadin-date-picker component (assuming that’s what you meant by “calendar”).
[part="toggle-button"]::before {
content: ""; /* Remove the existing font based icon */
background-image: url(...); /* data uri */
}
Use a base64 encoded data uri, so that you don’t have to worry about using relative or absolute paths for the image.
To use that style sheet in your Flow-based app, place CSS file in the frontend folder in your app, and add the following:
#CssImport(value = "my-styles.css", themeFor="vaadin-date-picker")
I'm using the material design package for my application layout menu.
I have 2 menus items where I can't find an icon that fits, so I got 2 SVG files that I added to the project.
I want to use this as the material-list-item icon instead of a material-icon.
Is there a way to do this by either adding a custom icon to the material-icon library or replacing the icon in the list.
If yes, please I need a complete example as I am new to DartAngular, still trying to figure out some stuff.
There is a mixin for material-icon which will get allow you to change a material-icon into using an SVG. https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_icon/_mixins.scss#L49
There is indeed a mixin for this as pointed out in Ted Sander's answer, but for the moment it does not seem to work. I've asked this on Gitter but did not get an answer, and I also opened a ticket on Github for this seemingly broken feature.
It's a telltale sign that even the official Angular Components Gallery has a broken SVG icon example.
I'd suggest to implement this by using separate list item rendering for those that have an official material-icon representation and those that need a custom SVG image, and conditionally render them with the ngIf directive.
I am using a code on my blog that is contained within <script> </script> tags, that when looking at the page, creates a link. My overall blog code sets a color for all links but I want this link to be a different color than all the rest.
I tried using a few different methods of changing the text color and even of changing the link color but nothing I tried worked.
It's hard to see what you are doing wrong without seeing your code, but basically all you will need to do is set the color of your link with the style attribute when inserting the HTML, something like style="color:red".
Assuming you are using pure JavaScript and your script looks something like this, this will give you a red link:
document.getElementsByTagName('body')[0].innerHTML +=
''This is red!'';
If you are using jQuery your script may look something like this:
$('This is red!').appendTo($('body'));
Inline styles have the highest priority of all CSS so these will override any other CSS you may have.
Leave a comment and update your question with your code if this doesn't help you, and I will try to improve this answer!
How to change a background color of jQueryUI Progressbar?
Im trying to use:
$('#progressbar div').css({backgroundColor: '#9CFF29'});
but no success :(
Anybody can help me?
Thanks!
The selector should be on the main <div> so just use #progressbar and to override the styling, use just background (since it also has an image defined as well), like this:
$('#progressbar').css({background: '#9CFF29'});
You can test it out here.
jQuery UI Progressbar plugin uses the
jQuery UI CSS Framework to style its
look and feel, including colors and
background textures. We recommend
using the ThemeRoller tool to create
and download custom themes that are
easy to build and maintain.
http://jqueryui.com/themeroller/
Make sure you are selecting the div. Are you able to change other properties of #progressbar such as width?
Now I'm using sIFR3. It works very nicely.
Additionally, I would like to put an effect on sIFR.
My idea is that when the page loaded, sIFR(ed) texts change its color. For example, sIFR in list item change color one by one.
The purpose is to emphasize the sIFR(ed) texts.
Reading the document, I thought Flash filters are not for like this animation.
Do you think is it possible to make animation on sIFR ?
Thank you for your help.
You could do this using JavaScript. See this answer for inspiration: Sifr and Javascript changing stylesheets (without a page refresh)