2016-11-02 3 views
3

Ich arbeite mit materialize und ich versuche, Ihren Code nicht zu berühren, so dass ich nur aktualisieren kann, wenn eine neue Version ankommt, aber ich Ich möchte die Grundfarbe ändern und ich finde keinen einfachen Weg, das ganze Ding einfach auf die blaue Palette zu setzen.Wie ändere ich die Standard-Design-Farbe blau in blau ohne benutzerdefinierte CSS in materilaize

Ich habe gehört, sass aber ich weiß nicht, wie es meine CSS Dies ist

zu verwenden und JS-Datei, wie es

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<link rel="stylesheet" href="css/materialize.min.css"> 
<link rel="stylesheet" href="sass/materialize.scss"> 
<script src="js/bin/materialize.min.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 

Antwort

1

Sass ist sehr einfach, sass cli in Ihrem System

gem install sass 

Die Grundfarbe Sie ändern möchten installieren war in den folgenden Ordner

materialisieren-src/sass/components/_Color .scss

  • Nehmen Sie die erforderlichen Änderungen
  • laufen nur den Code unten in Terminal

    sass materialize.scss materialize.css

RUN, während Sie in der SCSS Ordner des materialisieren-src

sind

materialize-src/sass/

ersetzen Sie die neu erstellte materialize.css Datei in Ihrem vorhandenen Projekt.

Man könnte sogar eine verkleinerte Version der neuen Datei erstellen, indem Sie https://cssminifier.com/ verwenden und Datei mit dem Namen materialize.min.css

Fore mehr Bezug auf sass speichern Sie bitte den folgenden Link SASS Simple DOC

UPDATE schauen Sie in - wie pro Antrag

Geben Sie mir die Farbcodes gemäß Ihrer Anforderung, indem Sie das unten ersetzen, das ich Ihre Akte durch das gleiche Verfahren erzeuge, das ich oben erklärt habe.

$teal: (
    "base":  #009688, 
    "lighten-5": #e0f2f1, 
    "lighten-4": #b2dfdb, 
    "lighten-3": #80cbc4, 
    "lighten-2": #4db6ac, 
    "lighten-1": #26a69a, 
    "darken-1": #00897b, 
    "darken-2": #00796b, 
    "darken-3": #00695c, 
    "darken-4": #004d40, 
    "accent-1": #a7ffeb, 
    "accent-2": #64ffda, 
    "accent-3": #1de9b6, 
    "accent-4": #00bfa5 
); 
+0

einfach wie teal Farbe blaue Farbe sass.give meHauptseite einfache html zum Beispiel –

+0

Sie teal sollte als blaue Farbe angezeigt werden soll, verwenden ändern? Sie möchten blaugrün in blau ändern. –

+0

Wenn Sie wollen, nur blaugrün ersetzt mit blau .. Sie können einfach 'blau' anstelle von 'blaugrün' schreiben - http://materializecss.com/color.html. Wenn dies nicht der Fall ist, ändern Sie die gesamte Farbe der Farbe blau, indem Sie _color.scss ändern, aber es wird die gesamte Palette der Farben verursachen, die für immer blau bleibt, bis Sie sie wieder ändern. Ansonsten können Sie Ihre eigene Palette erstellen - Nenne es war dein eigenes. Wenn Sie möchten, dass ich das tue, dann senden Sie mir den erforderlichen Farbsatz für Ihre neue Palette. –

0

Haben Sie so es durch die Definition zu verwenden versuchen, wieder zu verwenden in Kopf-Tags

<style> 
* { 
    background-color: yellow; 
} 
</style> 

wenn Sie diese universal-Styling verwenden Sie es auf die gesamte Seite in gleicher Weise angewandt werden, sollten Sie verwenden, wenn Sie Absätze Überschriften-Tags oder etwas anderes nur definieren Ihre Tags in t mit seine geschweiften Klammern mit deinen eigenen Stilen.

Verwandte Themen