1

Boa tarde, estou tentando colocar o css no Ionic, algumas coisas funcionaram e outras não. Estudei um pouco de css com essa apostila, tentei aplicar cores de fundo no ion-list do menu.html, mas não deu certo, a única coisa que consegui alterar, por enquanto, foi a fonte.

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;
}
9
  • Alguem poderia me ajudar como posso alterar o fundo do componente ion-list ? 30/03/2017 às 20:32
  • Tente mudar a cor do .item e .item a, exemplo: .menu .list .item a,.menu .list .item {background-color:red}.
    – abfurlan
    30/03/2017 às 20:51
  • tentei colocar o seguinte : .list-custom .item{ background-color: #000000; color: orange; } com isso consegui alterar a cor das palavras que estão dentro ion-item, mas a cor de fundo não deu certo. @abfurlan 31/03/2017 às 1:20
  • @abfurlan o que você sugere? parece como se eu não conseguisse sobrescrever a cor desse componente. 31/03/2017 às 1:24
  • Tente colocar o cor de fundo no elemento a exemplo: .list-custom .item a { background-color:...
    – abfurlan
    31/03/2017 às 1:27

2 Respostas 2

0

Você precisa colocar a cor de fundo no elemento a filho do elemento .item, exemplo:

HTML

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

Quando o framework renderizar o elemento acima ele transformará em algo como:

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

Portanto para estilizar este elemento você precisa aplicar o estilo no elemento a.

CSS

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

Como eu fiz no html

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

eu coloquei o a no ion-item e depois com isso consegui pegar ele no css.

no CSS

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

Muito obrigado pela ajuda e pela explicação @abfurlan

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .