Page 1 of 2

Collapsible button color

Posted: Fri Oct 10, 2014 10:06 am
by Adrian Stoch

Is it possible to change the background color of a collapsible button that isn't a swatch?


Collapsible button color

Posted: Fri Oct 10, 2014 10:53 am
by Evgene Karachevtsev

Hello Adrian,

You can change the color by adding the desired style in the CSS file


Collapsible button color

Posted: Fri Oct 10, 2014 10:56 am
by Adrian Stoch

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.


Collapsible button color

Posted: Fri Oct 10, 2014 3:53 pm
by Kateryna Grynko

Hi Adrian,

Please use the following CSS code pre.ui-collapsible-heading a{
background:red !important;
}/pre


Collapsible button color

Posted: Fri Oct 10, 2014 5:06 pm
by Adrian Stoch

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.


Collapsible button color

Posted: Fri Oct 10, 2014 6:16 pm
by Kateryna Grynko

Hi Adrian,

Sorry, could you please post a screenshot of where you placed this button?


Collapsible button color

Posted: Fri Oct 10, 2014 7:38 pm
by Adrian Stoch

I didn't really place the button. It comes standard to open / close the collapsible block.

Image


Collapsible button color

Posted: Sat Oct 11, 2014 6:00 am
by Maryna Brodina

Hello!

Please inspect element using browser console and apply styles to the necessary selector.

http://devcenter.appery.io/documentat...


Collapsible button color

Posted: Sun Oct 12, 2014 2:30 pm
by Adrian Stoch

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:
Image

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:
Image

My desired outcome would be this:
Image


Collapsible button color

Posted: Mon Oct 13, 2014 5:35 am
by Kateryna Grynko

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.