angular2-mdl changer la couleur de l'en-tête et la hauteur

J'utilise angular2-mdl (http://mseemann.io/angular2-mdl/) pour le style dans mon projet cli angulaire. J'ai ajouté défaut dans mon css index.htmlangular2-mdl changer la couleur de l'en-tête et la hauteur

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" /> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

Mon contenu principal qui définit la tête et la navigation:

<div class="demo-container" mdl-shadow="2"> 
<mdl-layout mdl-layout-fixed-header mdl-layout-header-seamed> 
    <mdl-layout-header> 
    <mdl-layout-header-row> 
    <mdl-layout-title>AMM</mdl-layout-title> 
    <mdl-layout-spacer></mdl-layout-spacer> 
    <!-- Navigation. We hide it in small screens. --> 
    <nav class="mdl-navigation"> 

    <!-- logout --> 
    <button mdl-button mdl-button mdl-button-type="icon" (click)="logout()"> 
    <mdl-icon>exit_to_app</mdl-icon> 
    </button> 
</nav> 
</mdl-layout-header-row> 
</mdl-layout-header> 
<mdl-layout-content> 
<!-- Your content goes here --> 

<div class="mdl-grid"> 

</div> 
</mdl-layout-content> 
</mdl-layout> 
</div>

Je veux personnaliser le style de mon en-tête: Je veux utiliser la couleur personnalisée et Je veux définir ma propre taille pour cela.

Comment puis-je y parvenir? Quoi et où dois-je modifier?

NOTE: Je ne veux pas changer le thème entier, j'ai juste besoin de modifier mon en-tête.

Source

2017-09-27 Nitish

Vous Vous devez avoir essayé cela, mais pourquoi ne pouvez-vous pas remplacer les styles de hauteur et de couleur des classes d'en-tête? – Santosh

J'ai essayé mais je ne sais pas où et comment et exactement quoi (quelle classe) puis-je remplacer? – Nitish

Une façon consiste à remplacer le mdl-layout-header pour la hauteur et la couleur. ajouter Ainsi, une classe personnalisée à elle, et passer outre sa css

mdl-layout-header.custom{ 
    min-height: 30px; //change this value for height 
    height: 30px; 
    background-color: red; // change this for color 
} 
mdl-layout-header.custom mdl-layout-header-row{ 
    height: inherit; 
}

code barre de navigation (html)

<mdl-layout-header class="custom"> 
    <mdl-layout-header-row> 
     ... 
     ... 
     ... 
    </mdl-layout-header-row> 
</mdl-layout-header>

Source

2017-09-27 14:47:20 Santosh

Je n'Override classes CSS d'origine dans le fichier style.css, qui a bien fonctionné

Source

2017-09-27 15:04:51 Nitish

angular2-mdl changer la couleur de l'en-tête et la hauteur

Répondre

Questions connexes