How to change CSS in Ionic 1

Asked

Viewed 1,421 times

1

Good afternoon, I’m trying to put css in Ionic, some things worked and others didn’t. I studied a little css with this booklet, I tried applying background colors to ion-list of menu.html, but it didn’t work, the only thing I was able to change, for now, was the source.

html menu.

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-assertive">
            <ion-nav-back-button class="no-text"></ion-nav-back-button>

            <ion-nav-buttons side="left"><button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button></ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-header-bar class="bar-assertive"><h1 class="title">Santa Filomena</h1></ion-header-bar>

        <ion-content class="teste">
            <div>
                <img class="full-image" src="img/santa-filomena3.jpg" class="avatar motion spin fade"> 
                <p>Santuário Santa Filomena - Sorocaba/Sp</p> 
            </div>
            <ion-list class="list-custom">
                <ion-item menu-close href="#/app/principal">principal </ion-item>
                <ion-item menu-close href="#/app/missa">Missa</ion-item>
                <ion-item menu-close href="#/app/adoracao">Adoração</ion-item>
                <ion-item menu-close href="#/app/doacao">Doação</ion-item>
                <ion-item menu-close href="#/app/confissao">Confissao</ion-item>
                <ion-item menu-close href="#/app/santaFilomena">Santa Filomena</ion-item>
                <ion-item menu-close href="#/app/avisos">Avisos</ion-item>
                <ion-item menu-close href="#/app/eventosFestas">Eventos e festas</ion-item>
                <ion-item menu-close href="#/app/secretaria">Secretaria</ion-item>
                <ion-item menu-close href="#/app/playlists">Em Desenvolvimento</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

css style.

body {
    background-color: #FF8C69;
}
.menu.menu-left {
    font-weight: bold;
}
.menu.content-teste {
    background-color: #F0FFFF;
}
.list-custom .item {
    background-color: #FF8C69;
}
html css ionic

  • Could anyone help me how I can change the background of the ion-list component ?

  • Try to change the color of .item and .item a, example: .menu .list .item a,.menu .list .item {background-color:red}.

  • I tried to put the following : . list-custom . item{ background-color: #000000; color: Orange; } so I was able to change the color of the words inside the ion-item, but the background color didn’t work. @abfurlan

  • @abfurlan what do you suggest? it seems as if I could not override the color of that component.

  • Try putting the background color on the element for example: . list-custom . item a { background-color:...

  • Your CSS is being loaded after Ionic CSS?

  • thank you so much for helping @abfurlan, I put the letter a in all my ion-item and I now run the background color. no css -> . list-custom . item a{ background-color: #000000; color: Orange; }

  • example of how I put in the ion-list -> <ion-item menu-close href="#/app/secretary" a> Secretariat </ion-item> I put that in all and it put background color , thank you very much for the tips. @abfurlan

  • I posted as an answer :)

Show 4 more comments

2 answers

0

You need to put the background color in the element a child of the element .item, example:

HTML

<ion-item menu-close href="#/app/principal">
   Principal 
</ion-item>

When the framework renders the above element it will transform into something like:

<li class="item">
    <a href="#/app/principal">Principal</a>
</li>

So to style this element you need to apply the style to the element a.

CSS

 .list-custom .item a{ background-color: #000000; color: orange; }

0


Like I did in html

<ion-item menu-close href="#/app/principal" a>
          Principal 
</ion-item>

I put the a in the ion-item and after that I managed to get it in css.

in the CSS

.list-custom .item a{
  background-color: #000000;  
  color: orange;
}

Thank you so much for the help and explanation @abfurlan

Browser other questions tagged html css ionic

You are not signed in. Login or sign up in order to post.