Adrian Stoch
Posts: 0
Joined: Thu Jul 31, 2014 3:09 pm

Collapsible button color

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

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Collapsible button color

Hello Adrian,

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

Adrian Stoch
Posts: 0
Joined: Thu Jul 31, 2014 3:09 pm

Collapsible button color

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.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Collapsible button color

Hi Adrian,

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

Adrian Stoch
Posts: 0
Joined: Thu Jul 31, 2014 3:09 pm

Collapsible button color

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.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Collapsible button color

Hi Adrian,

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

Adrian Stoch
Posts: 0
Joined: Thu Jul 31, 2014 3:09 pm

Collapsible button color

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

Image

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Collapsible button color

Hello!

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

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

Adrian Stoch
Posts: 0
Joined: Thu Jul 31, 2014 3:09 pm

Collapsible button color

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

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Collapsible button color

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.

Return to “Issues”