Changing color for the "Card Showcase" example

ionic-v1
1

Hi,

So lets say I have a card as shown here:
http://ionicframework.com/docs/components/#card-showcase.

I have a transparent/overlay kind of theme for my design. I do so by setting the background image of components to a translucent image pixel like this:

background: url(’…/img/translucent_black_1X1.png’);

So, now I want to make the background for this card transparent as well. How do I do so? Or just change the color of the card background in general? I have tried adding custom class to the list element, but it didn’t work:

CSS:
.custom-card {
background: url(’…/img/translucent_black_1X1.png’);
}

What am I doing wrong here? Feels like it should be simple. Thanks in advance!

2

A card is made up of items, so you have to take that into consideration.

.card .item{
  background: red;
}
1 Like
3

Hello ,

How can we make multiple cards with different background colors?

4

you could make a few different classes,

.card-red .item{
  background: red;
}

.card-blue .item{
  background: blue;
}

.card-green .item{
  background: green;
}

And then conditionally apply the classes with ng-class.

1 Like
5

@mhartington can you please provide me working example for this i am also struggling and i am new to ionic