Change icon color on form buttons?
Change icon color on form buttons?
Hi, anyone know if it's possible to change the icon color on the form buttons? I am changin background and text color and would like to change the icon color to match the text. Can't seem to find a place to do this for buttons on forms, like I can for panel header?
Re: Change icon color on form buttons?
It works out of the box.
Make sure your Operation window is large enough so some options are not hidden for you.
You can resize the window if you don't see the same thing as below:
Make sure your Operation window is large enough so some options are not hidden for you.
You can resize the window if you don't see the same thing as below:
Re: Change icon color on form buttons?
Thanks, I should have seen that! But it might be just as you said, I looked at this at a small screen eralier today, probably didn't see it at all!
Great help!
Great help!
Re: Change icon color on form buttons?
But how come the colors of the icons are kind of blured? When I choose white it's definitivly not as white as the text. I would like it to be for visibility.
Edit: Seems like the bakground color of the button is above the color of the icon, hence giving it another color than the one I chosse. White icon on a blue button gives a light blue icon and so on.
Edit: Seems like the bakground color of the button is above the color of the icon, hence giving it another color than the one I chosse. White icon on a blue button gives a light blue icon and so on.
Re: Change icon color on form buttons?
Opacity is the culprit.
If you only want to change one button icon, you can just give the button a class in the Operation window like "coolButton".
Then just put this in your CSS file:
.coolButton .k-sprite{opacity:1;}
If you want to change every form button icon, it would look something like this:
.aw-form-buttons button .k-sprite{opacity:1;}
Please note I have not tested this. It should work, but you might need to make the CSS more specific.
If you only want to change one button icon, you can just give the button a class in the Operation window like "coolButton".
Then just put this in your CSS file:
.coolButton .k-sprite{opacity:1;}
If you want to change every form button icon, it would look something like this:
.aw-form-buttons button .k-sprite{opacity:1;}
Please note I have not tested this. It should work, but you might need to make the CSS more specific.
Re: Change icon color on form buttons?
Also it seems like the changes i do on the icons don't stick..
I use the "Icon i represented by CSS class" option, and even though i change to fa-check, it remains fa-check-circkle.
I use the "Icon i represented by CSS class" option, and even though i change to fa-check, it remains fa-check-circkle.
Re: Change icon color on form buttons?
This is probably only true for the save button (and possibly the close button).
I have never had to edit these so I don't have a solution unfortunately.
You could report it as a bug in the problem reports forum.
Re: Change icon color on form buttons?
Joben, I can't seem to target the button correctly. Figured I'd try adding the class to one specifc button using your coolButton example, but nothing changes. Changing directly while using inspect works, so I guess I am not targeting the right element somehow. Been a long time since I used CSS, so I would love som more help
Screenshot from ispect:
Re: Change icon color on form buttons?
If your custom CSS doesn't appear in the editor, it could be because you typed something wrong, or the CSS file is not loading for some reason.
Try to use CTRL+SHIFT+R to force a reload and emptying of cache.
But then it is also a matter of specificity which rules will take precedence. For instance, if your custom code does appear, but "opacity:1" is striked through, then it is because your rule is not specific enough. If this is the case, you can do something like this to make it more specific (in my browser, there is an id called aware_app on a very high level of the html document):
You can also do like this (not recommended to overuse this method):
Try to use CTRL+SHIFT+R to force a reload and emptying of cache.
But then it is also a matter of specificity which rules will take precedence. For instance, if your custom code does appear, but "opacity:1" is striked through, then it is because your rule is not specific enough. If this is the case, you can do something like this to make it more specific (in my browser, there is an id called aware_app on a very high level of the html document):
Code: Select all
#aware_app .coolButton .k-sprite {
opacity: 1;
}
Code: Select all
.coolButton .k-sprite {
opacity: 1 !important;
}
Re: Change icon color on form buttons?
This is exactly what happens, it doesn't appear, so I just need figure out where I went wrong, or maybe just settle for some opacity. The force reload didn't help, so it's all on me
Thanks for all your help, it's highly appriciated