How can you change the swatch that a button uses inside a grid?

[Patrick Kelly]

I have three buttons, horizontally aligned on a single screen. I would like to make them different colors, but it appears that the Grid Component overrides any swatch setting chosen by the component within any particular cell. Is there any way to change the swatch used on a particular component without the grid overriding it?

[Kateryna Grynko]

Hi Patrick,

You can set any button colour using CSS: precode[name=button]{
background-image: linear-gradient( #295b8e, #3e79b5);
}/code/preOr JavaScript:preAppery("button").css("background-image","linear-gradient( #295b8e, #3e79b5)");/preWhere 'button' is a component name.

[Patrick Kelly]

Can text be changed in a similar way?

[Alena Prykhodko]

Do you mean style? Should be possible.

[Patrick Kelly]

Color.

[Alena Prykhodko]

Sure, using CSS:
pre[name=button]{color: #295b8e;}
/pre
Or JavaScript:
pre
Appery("button").css("color","#295b8e");/pre

[Patrick Kelly]

Thanks!

[EJLD]

Hi There,

I hv tried the above in different ways but no change to my default SwatchC of the Twitter-Bootstrap Theme.

More precisely, I hv buttons in a HTML component. Those buttons appear in the above swatch which seems to be "by default". I need to hv them in different colors.

Could you tell me how to retrieve other Swatches from that Theme ?

[and some codes which work pls ]

thks in advance,
Eric

PS : BTW, if you have time, in the above posts, why using [name ...] i/o class which works for button font setting for example ... ?

[Maryna Brodina]

Hello!

Sorry, not sure I understand what do you mean on [quote:]Could you tell me how to retrieve other Swatches from that Theme ?[/quote] As Katya posted above you can use either CSS, or JS to change any property. Here is how to work with CSS, add class to components and apply styles http://devcenter.appery.io/documentat...

[EJLD]

Dear Maryna,
I partially agree with what you write.
CSS, or JS can change some property but not "any", as far as I hv tried.
yes, in the link you indicated, it's possible to change font-size, italic, bold, ... add an icon (in fact, I was looking for this one too. thk you).
however, still I would like an answer for my buttons set in an HTML component.
when a button is dragged-n-dropped from the panel to the builder, we can give this button the color of the A, B, ... F swatches part of the theme.
but when the buttons are made within an HTML block, the color of those buttons is by default set to a certain color (red in my case).
how can I change this default color ? and if possible get the color refs belonging to the theme' s swatches I picked up (namely Twitter-Boottrap) ?
It will be a pleasure to read you again