Is it possible to change the background color of a collapsible button that isn't a swatch?
Is it possible to change the background color of a collapsible button that isn't a swatch?
Hello Adrian,
You can change the color by adding the desired style in the CSS file
Thanks Evgeny, I was looking for the CSS syntax as the button itself is not named and I could not find it in any of the documentation.
Hi Adrian,
Please use the following CSS code pre.ui-collapsible-heading a{
background:red !important;
}/pre
Thanks Kateryna, but that changes the color of the block header. I am trying to change the color of the button within the block header only.
Hi Adrian,
Sorry, could you please post a screenshot of where you placed this button?
Hello!
Please inspect element using browser console and apply styles to the necessary selector.
From what I can tell there is not a separate selector style for the button as opposed to the collapsible block. Unless I am missing something, it looks like the +/- button background is derived automatically by the background of the block:
This is further confirmed when I am in Themeroller. In the 3 swatches below, I have tried to change the color of the drop down button, but it derives background from the block:
Hi Adrian,
1) Please use the following CSS code to change button colour:pre[dsid=mobilecollapsibleset_X] .ui-collapsible-heading-toggle:after{
background-color:#000000;
}/pre
2) Or you can upload a needed icon for collapsible button to Media Manager (ui-icon.png) and use it with the following code:pre[dsid=mobilecollapsibleset_X] .ui-collapsible-heading-toggle:after{
background:url("../image/ui-icon.png");
}/pre
Please replace colour code with the needed.
Here mobilecollapsibleset_X is a collapsible block name.