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:

color.png (128.39 KiB) Viewed 31640 times

[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.

icon_colors.png (10.63 KiB) Viewed 31631 times

[joben]

Opacity is the culprit.

opacity.png (28 KiB) Viewed 31630 times

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

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

wrong_icon.png (54.11 KiB) Viewed 31629 times

[lueu]

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]

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

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]

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.

coolButton.png (6.9 KiB) Viewed 31577 times

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:

myButton.png (39.07 KiB) Viewed 31577 times

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

Code: Select all

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

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

Code: Select all

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

[lueu]

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

Thanks for all your help, it's highly appriciated

[joben]

I sent you a PM.