Change the color of the checkboxes

This topic has 8 replies, 3 voices, and was last updated 1 year, 9 months ago by Elise Noromit.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
October 8, 2022 at 6:25 pm #412117

ramkhakov
Participant

Please tell me how I can change the colors of the checkboxes in the “Frequently bought together” block.
With respect.

October 9, 2022 at 2:08 am #412154

Elise Noromit
Member

Hello,

Thank you very much for choosing our theme and for contacting us.

Could you kindly provide the page URL and screen of the block you mean, please we will check the settings or give the CSS.

Best Regards

October 9, 2022 at 11:33 am #412188
ramkhakov
Participant
I sent you a link to the page and a screenshot where I highlighted the checkboxes that I would like to change.
Thank you very much.
- This reply was modified 2 years, 2 months ago by ramkhakov.
- This reply was modified 2 years, 2 months ago by ramkhakov.
Attachments:
You must be logged in to view attached files.
October 9, 2022 at 8:45 pm #412265
Elise Noromit
Member
Hello,

Please add this code to the Theme Settings > Custom CSS > Global:
```
body .wd-toolbar {
    background-color: red;
}
body .wd-tools-element .wd-tools-icon {
color:white;
}
body .wd-toolbar.wd-toolbar-label-show .wd-toolbar-label {
    color:white;
}
body .wd-tools-element:is(.wd-design-2,.wd-design-5) .wd-tools-count,
body .wd-header-cart.wd-design-2 .wd-cart-number, 
body .wd-header-cart.wd-design-5 .wd-cart-number{
    background-color: black;
}
```
Best Regards
October 9, 2022 at 8:50 pm #412267

Elise Noromit
Member

Hello,

Sorry. this code is wrong. Your product link is not workable. Please check the site.

Best Regards

October 9, 2022 at 9:14 pm #412273

ramkhakov
Participant

Yes, I realized that you sent me the wrong code. I have sent you a new product link.

October 11, 2022 at 1:56 am #412639

Elise Noromit
Member

Hello,

We have checked the checkboxes, unfortunately, it is not possible to customize them. Here is the screen showing how they look by default: https://prnt.sc/RaXXsFnfY8rE

If you have any questions please feel free to contact us.

Best Regards

March 12, 2023 at 6:37 pm #450473
Jonatas
Participant
```
/*  Change the size of checkboxes */
.wd-fbt-product input[type="checkbox"] {
    width: 17px;
    height: 17px;
    color: red;
}
/* Change color of checkboxes */
input[type="checkbox"]{
  -webkit-appearance: none;
  content: '';
  width: 18px;
  height: 18px;
  background-color: white;
  border: 1px solid gray;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 3px;
}

input[type="checkbox"]:checked{
  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3E%3Cg class='nc-icon-wrapper' stroke-width='1' fill='%23555555'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' data-cap='butt' d='M2.83 4.72l1.58 1.58 2.83-2.83'/%3E%3C/g%3E%3C/svg%3E");
  background-color: black;
  background-position: center;
  border: none;
  padding: 1px;
}
```
In “(input[type=”checkbox”]:checked)” just change the background-color to whatever color you want
March 13, 2023 at 5:03 am #450555

Elise Noromit
Member

If you have any questions please feel free to contact us.

Best Regards
Author

Posts