How to change the background color of the header of the listcard

1

i want to change the deafult color of the header and remove the white border around the full screen image

image
zabatnyscreenshoot.png784Ă—548 170 KB

2

You should be able to do something like this:

<div class="card">
  <div class="item item-balanced item-divider">
    I'm a Header in a Card!
  </div>
  <div class="item item-text-wrap" style="padding: 0 !important">
    This is a basic Card with some text.
  </div>
</div>

Adding the item-balanced class to the item-divider class will change the color to the balanced class.

2 Likes
3

the color trick item-balanced worked but how can i make the image take the entire width of the image and remove this thing white border

4

Just need to remove the padding.

2 Likes
5

@fady Sorry I didn’t specify what this code did, there is padding on the item class so you have to remove the padding.

1 Like
6

thank you very much for your help it worked

1 Like
7

thank you very much , i have tried many frameworks before , and i think ionic is the best , and even when something get complicated i always get answers from the forum

1 Like
8

“item-balanced class to the item-divider class will change the color to the balanced class” - What is the balanced class? I realize that this is probably a very trivial question, so if you can just point me towards some documentation, that’ll suffice. Clearly, I’m very new to this. Thanks.

9

Here is the documentation for the different colors: http://ionicframework.com/docs/components/#colors

These colors are used in different classes to change the components (bar-balanced, item-balanced, toggle-balanced, etc).

Here is a large list of resources that you may find useful as you develop: http://mcgivery.com/100-ionic-framework-resources/

10

Thank you . that works :slight_smile: (y)