Hi, can anyone tell me how I can change the theme on SuiteCRM so that I can see check boxes easier?
Regards, Chris.
What is your SuiteCRM version?
Hi, thank you for the reply: Version 7.14.4
But it is not the theme that I want to change. I know you can change that in Profiles. It is just the checkbox visibility. It is quite difficult under any of the themes to see the outline of the box and the X that goes into it. Presume it is a css change somewhere, but where?
Regards, Chris.
Can you send screenshot of checkbox?
You need to find a CSS code for it by doing to inspect on UI. Then create folders like below and write your CSS code.
custom/themes/SuiteP/css/Noon/style.css
Then you need to delete the below folder
cache/themes/SuiteP
and do empty cache & hard reload on the browser to see changes.
I agree. The contrast between the checkbox (pale gray) the check (pale pink) and the background color (white) is very low. This results a bad user experience - they can hardly see the checkbox!
Can you find out the CSS code for it ?
Here’s a general approach:
1. Identify the CSS class:
-
Inspect the element in your browser’s developer tools to find the CSS class that defines the checkboxes. It might be something like
.checkbox,.input-checkbox, or a more specific class based on the Suite theme’s structure. -
If the checkbox class is nested within other elements, you might need to use more specific selectors to target it accurately.
2. Modify the CSS:
- Add or modify the following CSS rules to target the checkbox element and its components:
CSS
/* Target the checkbox input element */
.checkbox input[type="checkbox"] {
/* Increase the border width and color */
border: 2px solid #000000; /* Adjust the color as needed */
border-radius: 3px; /* Optional: Round the corners */
}
/* Target the checkbox's checked state */
.checkbox input[type="checkbox"]:checked {
/* Change the background color and checkmark color */
background-color: #000000; /* Adjust the background color */
color: #ffffff; /* Adjust the checkmark color */
}
3. Customize the colors:
- Replace
#000000(black) and#ffffff(white) with the desired colors for the border, background, and checkmark. You can use a color palette tool to ensure good contrast and accessibility.
4. Adjust the border width and radius:
- Experiment with different border widths and radii to achieve the desired appearance.
5. Test and refine:
- Test the changes in your SuiteCRM instance to see if the contrast is improved. Make adjustments as needed.
Additional tips:
- Consider using a CSS preprocessor like Sass or Less to organize your CSS code and make it easier to manage.
- Test your changes on different devices and screen sizes to ensure they look good across various platforms.
You can significantly improve the contrast of checkboxes in SuiteCRM’s theme, making them easier to see.
chris001 What a brilliant reply to my post. One of the best I have ever seen. No AI there!
So the checkbox element is: input type=“checkbox” class=“checkbox”
I therefore assume that I can use the code that you have provided with amendments to the colour etc and place in the custom/themes/SuiteP/css/Dawn/style.css as suggested by rsp?
Have no experience with Sass or any CSS preprocessor so that is not going to be an option unless you would consider it an easier route?
Regards Chris.
OK, I have tried this as you suggest and the css gets added to the style.css in the cache folder but it does nothing on the front end. Any thoughts?
It works if I use Chrome F12 inspector and add the css directly to the page but will not work if I add it to the style.css file in the custom folder.
Did you follow these steps?
If you’re using Dawn sub-theme then you need to do this:
custom/themes/SuiteP/css/Dawn/style.css
Yep, I have done both of those. Dawn Theme so using custom/themes/SuiteP/css/Dawn/style.css and have done a hard Reload and Clear Cache. I have also done a General Repair. Just does not show up.
This is what I have in the style.css:
/* Target the checkbox input element */
.checkbox input[type="checkbox"] {
/* Increase the border width and color */
border: 2px solid #000000; /* Adjust the color as needed */
border-radius: 3px; /* Optional: Round the corners */
}
/* Target the checkbox's checked state */
.checkbox input[type="checkbox"]:checked {
/* Change the background color and checkmark color */
background-color: #000000; /* Adjust the background color */
color: #ffffff; /* Adjust the checkmark color */
}
It appears at the bottom of the rest of the sytle.css in the cache directory. Such as:
!important;text-align:center;font-size:16px}.search-module-selector .yui-dt-bd{overflow-x:auto;overflow-y:scroll}.search-module-selector .edit tr td table tr td{padding:10px;margin-right:0}.search-module-selector .view tr{padding:0}.search-module-selector .yui-dt0-col-label .yui-dt-liner{overflow:auto}#GlobalSearchSettings{background-color:transparent}#GlobalSearchSettings {border:none}/ Target the checkbox input element /
.checkbox input[type=“checkbox”] {
/ Increase the border width and color /
border: 2px solid #000000; / Adjust the color as needed /
border-radius: 3px; / Optional: Round the corners */
}
/* Target the checkbox’s checked state /
.checkbox input[type=“checkbox”]:checked {
/ Change the background color and checkmark color /
background-color: #000000; / Adjust the background color /
color: #ffffff; / Adjust the checkmark color */
}
Regards, Chris.
Where do you have these checkboxes?
I just found out that they are using this check png to show that 
sign.
…/themes/SuiteP/images/forms/check.png
So, you need to override this png file.
OK, I think that I have started to get something happening… In fact I have:
input[type=“checkbox”] {
border: 2px solid #000000;
}
This works, so now I can start playing with it to get a better definition. If the X was as bright as you have in your message that would be great.
Thank you for your help. May be back later.
Regards, Chris.
You are absolutely correct. The checkbox is produced from the png file. So border size has nothing to do with it. Now need someone to be able to produce a cleaner png file of the same size that can replace the one we have now. Anyone out there who is clever with some graphics image software to produce a darker png file. Where would it have to go in order to replace the existing one?
The check PNG file properties are:
Item type: PNG file
Dimensions: 70 x 16
OK, I have a much better view now:
I have had to change the png in the main directory. Just wondering if there is a custom place to put the image
1 Like
That’s good! So, is it now green color in checkbox?
Try out at below location.
…/custom/themes/SuiteP/images/forms/check.png