Ion-list background color

ionic-v1
1

Hey everyone,

I have a problem regarding the ion-list. I use a ion-list for my ion-side-menu and I want to make the list dark, same as the bar-header. Can anyone tell me how I can do this?

cheers

-Gizmou

2

You can use CSS to customize the properties of all ionic elements, including ion-list.

3

Thanks for your reply, I’m searching in the CSS file right now but I can’t seem to find it :confused:

4

You can define your own CSS rules in your own CSS file. Don’t overwrite rules in ionic.css or ionic.min.css! Your app will start breaking when you upgrade to a new version of Ionic.

If you’re unsure as to how to define CSS classes, I would respectfully suggest you read up on that and using tools like Firebug or Chrome inspector first before attempting to use Ionic.

5

@Gizmou I actually did this too, here’s an example of the css I used.

.dark {
  background-color: #3f4041 !important;
  color: #ffffff;
}
.dark .scroll-content {
  background-color: #3f4041 !important;
}
.dark .item {
  background-color: #3f4041;
  border: none;
  border-top: 1px solid #464646;
  border-bottom: 2px solid #333333;
  padding: 20px;
  max-height: none;
}
.dark .item:first-child {
  border-top: 1px solid black;
}
.dark .item:last-child {
  border-bottom: 1px solid #333333;
}
.dark .item.current {
  background-color: #262727 !important;
  border-top: 1px solid #464646 !important;
  border-bottom: 2px solid #333333 !important;
}
.dark .item.current p, .dark .item.current h3 {
  opacity: .7;
}
.dark h2,
.dark h3,
.dark p {
  color: #F0F1F1;
}

.dark-head {
  text-decoration: none;
}
1 Like
6

Here is an option similar to what I use, but it takes care of some additional needs of mine as well:

.item-complex .item-content, .item{
    background-color: #FFFF
}

I am personally controlling the color of the background behind the list / items. I set the above css selector to background-color:rgba(0,0,0,0); to make it transparent (there are obviously other ways to do this). Then add a class to the ion-view and give that the particular background that I want.

If you are testing on iOS, you should really look into the Safari web inspect options. Let me know if you need help with this.

2 Likes
7

thank you for all of your replies! I got it working. And @gylippus : elegant way of doing this! :slight_smile:

8

I have one more question about the ion-list @gylippus and @mhartington maybe you know a solution for this too :slight_smile:
I have a pretty big space between the list elements, is it possible to make this smaller? And is it possible to set another color to the frames of these list elements?

9

@Gizmou It really depends on how you are using list/item vs. ion-list/ion-item, but for the height of item elements, I use this for my specific needs:

.item {
    min-height: 56px;
}
.item-complex .item-content {
     padding: 10px 20px 10px 15px;
}

Again, that is very specific to my implementation but shows you where to look. By frames do you mean the borders for each list item?

.item {
    border:1px solid #XXXXXX;
}
3 Likes
10

Hey @gylippus thank you very much your code helped me a lot!

11

I’m having a strange problem in Safari where the background color of the side menu is white. The Safari inspector, however, shows whatever color I specified. The background color shows up fine in Chrome.

Thoughts?

12

hi sir…
could you explain, where you get .item-complex, .item-content, .item?
thank you :smiley:

13

Waooh it works like charm. @gylippus :smile:

14

@gylippus This changes the background color of all ion-list/ion-items I use. Is there a way to have multiple lists with different background-colors?

15

I solved it just add your class in front of “.yourclass .item.complex .item-content” it also works with “.yourclass .item .item-content”

16

hello @Gizmou , your answer looks good and promising , can you display your <ion-list> code.
how do you implement a class in <ion-list>

Is it simple like this <ion-list class="dark">

Thanks

17

Nice solution, it works for me, saved my time. Thanks a lot.