Change icon color on form buttons?

lueu

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?

joben

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:

lueu

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! 😃

lueu

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.

joben

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.

lueu

Also it seems like the changes i do on the icons don't stick.. :cry:

I use the "Icon i represented by CSS class" option, and even though i change to fa-check, it remains fa-check-circkle.

lueu

joben wrote
Opacity is the culprit.

Aha! I will try this, thank you! And yes, it's more than one button, I have a couple of forms that needs the same buttons.

joben

lueu wrote
Also it seems like the changes i do on the icons don't stick.. :cry:

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.

lueu

joben wrote
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;}

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:

joben

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):

#aware_app .coolButton .k-sprite {
    opacity: 1;
}

You can also do like this (not recommended to overuse this method):

.coolButton .k-sprite {
    opacity: 1 !important;
}

lueu

joben wrote
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.

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 :lol:

Thanks for all your help, it's highly appriciated 😃

joben

I sent you a PM.