How to make ion-items transparent?


#1

I am trying to make ion-items transparent by adding style: background-color: rgba(255, 255, 255, 0.1); to:

ion-content
ion-list
ion-item

to all of them, but still I see white background. How to make list items transparent?


#2

Very much a CSS wimp here, but have you tried:

background-color: transparent;


#3

Hi I am new here and I am trying the same thing.

I want to change the background color for my ion-list in side menu. adding style like background or background color doesn’t really work :frowning: how do I add a style to an ion tag? Can I handle it like a div tag with id’s and such things? I tried to change the color in the safari devtools and it worked for al lists in my app but not for the side menu.


#4

I found the solution in another forum post

My solution is
.my-menu {
background-color: #3f4041;
}

.my-menu .item, .my-menu .item-content, .my-menu .item-complex{
background-color: rgba(0,0,0,0);
color: #FFFFFF;
}

I add the class my-menu to ion-content in my side menu.

I don’t know if it’s a good way but it worked for my…I am open to better solutions =)


#5

did you know, what exactly .item, .item-content and .item-complex are using for?


#6

I use a CSS class to make the job, something like this inside your content:

<ion-item class="item item-trns text-center">
      I'm transparent!
</ion-item>  

And this on your style.css

.item.item-trns {
	border-color: rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0);
	color: white; 
}

The result:


Ionic item transparent background
#7

Thanks. @swfideas Itworked for me. I had the same problem and wanted something like that. It is an encouragement for us novices in development and in Web frameworks using Ionic.


#8

it works , thank you