How to change CSS in Ionic 1

Navigation
1

Good afternoon, I'm trying to put css on Ionic, some things worked and some did not. I studied a bit of css with this booklet , I tried to apply background colors in ion-list of menu.html , but it did not work, the only thing I could change for now, was the source.

menu.html 

<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>

style.css 

body {
    background-color: #FF8C69;
}
.menu.menu-left {
    font-weight: bold;
}
.menu.content-teste {
    background-color: #F0FFFF;
}
.list-custom .item {
    background-color: #FF8C69;
}
    
asked by anonymous 30.03.2017 / 22:31

2 answers

0

As I did in html 

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

I put the a in the ion-item and then with that I got it in the css.

in CSS 

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

Many thanks for the help and explanation @abfurlan

    
02.04.2017 / 21:00
0

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

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 stylize this element you need to apply the style to the element a .

CSS 

 .list-custom .item a{ background-color: #000000; color: orange; }
    
31.03.2017 / 13:21
Capture error return in asynchronous function for treatment I can not do UPDATE on my table