Change the header background of only one ionic page

Question

Change the header background of only one ionic page

Navigation

#1 by (5 votes)

2

You have a ionic project and require that% of all pages have a different background than the rest of the application.

Home (HTML)

<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 anyone help me with this process?

angularjs css ionic

asked by anonymous 30.08.2016 / 22:45

1 answer

Jquery - How to pass a variable to a jquery selector? Strlen problem

score 5 · Answer 1

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

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

Depends on context. Hope it helps anything you comment and adjust.

YourPage.php

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

newRegra.css

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