Checkbox styling the glyphicon in NGClient

[pitc]

In NG client I am not liking the look of the checkbox that renders. I would like to style the checkbox but so far only the text gets styled. Is there a way that one can change the glyphicon color, for both the checked and not checked state? I have looked at Bootstrap documentation and it appears to me that the Servoy implementation is currently limited.
Has anyone tips for reviewing documentation regarding styling the checkbox look and feel?
(As you might guess I am not an expert in css/less but trying hard!)
Perhaps the Bootstrap version needs to be updated?
As a note I have examined internet articles and many say there are css only ways to do this and some others say there are css plus javascript ways. If I could dive into the Servoy implementation maybe I could figure it out (or not if the css is complicated!),
By the way ideas that I have tried from the internet by adding a style class to the checkbox from Servoy have no effect.
Tom

[paronne]

Hi Tom,

are you using the Servoy LESS Theme in your solution ?
Styling the checkboxes it can fully be done in CSS indeed.
If you are using the Servoy Theme you can change the color of the checkboxes by simply setting value of field-check-color to your desired color in the Servoy Theme Properties ( configurable by editing the the custom_servoy_theme_properties.less ).

You can read more about the Servoy Theme at the wiki page: https://wiki.servoy.com/pages/viewpage. ... d=31752222

Regards,
Paolo

[pitc]

Yes, I am using the Servoy theme less file along with my own.
I have looked at the Servoy them less file before this and did not realize the field-check-color was for the check box. The wiki has no mapping of the names to understandable English.

So now I can change the color - so nice not to clash with the form background color now - thanks.

As for changing the actual icon/font/image used for the box or check mark can that be changed (easily for me please!).

[paronne]

Hi,

glad i could help with the checkbox color. There is not a dedicated wiki section for the variable names;
In the latest version of Servoy Theme variables are grouped by context;



hope it will make the the theme more readable and more intuitive to be used.

Unfortunately the check icons can be changed easily via a property. Current theme is referencing glyphicons which are available by default.
You can possibly reference the optional Font Awesome icon in CSS however you will need to tune the CSS.

The sample below shows how checks are customized using the Glyphicons.
If you decide to use Font Awesome you will need to see the correct font-family, font-weight and icon code (for the content).

Code: Select all

.svy-check input[type=checkbox] + span:before,
.svy-check input[type=radio] + span:before,
.svy-checkgroup input[type=checkbox] + span:before,
.svy-radiogroup input[type=radio] + span:before,
.bts-check input[type=checkbox] + span:before,
.bts-radiogroup input[type=checkbox] + span:before,
.bts-radiogroup input[type=radio] + span:before {
     font-family: 'Glyphicons Halflings';
}

.svy-check input[type=checkbox] + span:before,
.bts-check input[type=checkbox] + span:before,
.svy-checkgroup input[type=checkbox] + span:before,
.bts-radiogroup input[type=checkbox] + span:before {
   content: "\e157";
}

.svy-check input[type=checkbox]:checked + span:before,
.bts-check input[type=checkbox]:checked + span:before,
.svy-checkgroup input[type=checkbox]:checked + span:before,
.bts-radiogroup input[type=checkbox]:checked + span:before {
   content: "\e067";
}

.svy-radiogroup input[type=radio] + span:before,
.bts-radiogroup input[type=radio] + span:before {
   content: "\e157";
}

.svy-radiogroup input[type=radio]:checked + span:before,
.bts-radiogroup input[type=radio]:checked + span:before {
   content: "\e165";
}



Regards,
Paolo

[pitc]

I think you mean '

Unfortunately the check icons can NOT be changed easily via a property

[paronne]

I think you mean '

Unfortunately the check icons can NOT be changed easily via a property

Oops i lost my "NOT" in the void
Indeed you are right. I mean can NOT be changed via property as the color.