Change the header background of only one Ionic page

Asked

Viewed 1,629 times

2

Has a project ionic and I need to ion-header-bar only one page has a different background than the rest of the application.

Home ()

<ion-view view-title="Home">

<ion-content id="home" align="center" class="bg-home">
    <div class="row bg-green">
        <div class="col">
            <img src="img/logo-prov02.png" class="login-logo" style="width: 35%; padding-bottom: 5px">
        </div>
    </div>

    <div class="row">
        <div class="col col-50" style="padding-top: 15px">
            <a href="#/app/create-repass">                  
                <img src="img/icon-repass-green.png" class="login-logo" style="width: 35%; padding-bottom: 5px"><br>
                <span class="font-green">Repassar</span><br>
                <span class="font-gray">Crie anúncios para repassar seus veículos</span>
            </a>
        </div>
        <div class="col col-50" style="padding-top: 15px">
            <a href="#/app/create-preferences">
                <img src="img/icon-preferences-green.png" class="login-logo" style="width: 35%; padding-bottom: 5px"><br>
                <span class="font-green">Preferências</span><br>
                <span class="font-gray">Preferências de busca para achar o veículo certo</span>                 
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col col-50" style="padding-top: 15px">
            <a ng-click="showSearch()">
                <img src="img/icon-search-green.png" class="login-logo" style="width: 35%; padding-bottom: 5px"><br>
                <span class="font-green">Buscar</span><br>
                <span class="font-gray">Busque veículos em nossa base de dados</span>                   
            </a>
        </div>
        <div class="col col-50" style="padding-top: 15px">
            <a href="#/app/list-user-repass">
                <img src="img/icon-favorites-green.png" class="login-logo" style="width: 35%; padding-bottom: 5px"><br>
                <span class="font-green">Favoritos</span><br>
                <span class="font-gray">Acesse seus anúncios favoritos</span>                   
            </a>
        </div>
    </div>

</ion-content>

Could someone help me in this process?

css angularjs ionic

  • It seems, unless mistaken, your css is declared directly in the tags, where the precedence stands out. Even if you define a stylesheet in the head (as in my reply), the rules that will apply, will be those that are directly in the tags.

1 answer

5

You can define a specific style sheet for your page with the rules you want. By placing the reference to the file in the head from the page you want to apply the rule.

You can do it with javascript, putting the style directly in the tags or ...

It depends on the context. I hope it helps anything comments and we adjust.

suaPagina.php

<head>
    <link rel="stylesheet" type="text/css" href="novaRegra.css">
</head>
<body>
  <header class="ion-header-bar"></header>  
</body>

novaRegra.css

.ion-header-bar{
    background-color: #777777;
}

  • I tried several options and none worked, I tried to override the navabar ion, but it does not work.

  • @Edinhorodrigues are so many variables of what may be going on, that it’s unworkable, I put a suggestion. One idea to get started is to edit the question, and put the html and css codes you are using, the relevant snippet, comes this way.

  • Okay, I’ll put the codes

Browser other questions tagged css angularjs ionic

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