Ändern von Schriften auf Ihre Drupal-Site

Das style.css Datei enthält die Regeln für die Farbe, die Art und Größe der Schriftarten für Ihre Drupal Thema. Hier ist ein Überblick über einige der Codierung verwendet, um das Aussehen von Schriften steuern, die Sie sehen in style.css:

  • Schriftart: Erscheint Dieses Tag nur einmal in style.css und gibt die Schrift für die gesamte Site zu verwenden.

  • Schriftgröße: Legt fest, wie groß oder klein der Text ist.

  • font-weight: Gebrauchte Text fett zu setzen.

  • Schriftstil: In erster Linie kursiv verwendet, um Text zu setzen.

  • text-decoration: Legt fest, ob ein Link unterstrichen wird.

  • FarbeLegt die Farbe des Textes.

Die folgenden Codezeilen zeigen einige wichtige Texteinstellungen in style.css dass Sie möchten, können sich ändern.

body {font: 76% / 170% Verdana, Arial, Helvetica, sans-serif- color: # 000000-}

Zwei Dinge geschehen in dieser Linie. Das Attribut Farbe steuert die Textfarbe für die gesamte Site, es zu schwarz zu setzen. Wenn keine anderen Regeln die Farbe später in dieser Datei zu ändern, zeigt es als Schwarz auf der Website auf. Diese Spezifikation bestimmt die Farbe des gesamten Inhalts Text der ganzen Website.

Die Schriftart-Einstellung, 76% / 170% Verdana, Arial, Helvetica, sans-serif, beide setzt die Textgröße und Schriftart. Wenn Sie eine andere Schriftart und größeren Text verwenden möchten, können Sie diese Zeile wie folgt zu lesen ändern:

font: 100% Times New Roman, Georgia, Serif-

Dadurch ändert sich die Schriftart für den gesamten Standort, wie Sie in der folgenden Abbildung sehen können.

bild0.jpg

Die Schrift ist größer - und ist jetzt Times New Roman anstelle von Verdana. Im Beispiel wurde die kleinere Schriftgröße und Verdana für den Stil, so gewählt, dass diese Linie geändert wurde zurück font: 76% / 170% Verdana, Arial, Helvetica, sans-serif-.

a {text-decoration: none; font-weight: Bold-}

Das text-decoration steuert, ob Links auf Ihrer Website sind unterstrichen. In diesem Fall sind sie nicht. Das font-weight macht die Website Links Fettdruck.

a: Hover {text-decoration: Unterstrichen}

Wenn Sie den Mauszeiger über einen der Links auf der Seite bewegen, wird die Unterstreichung. Wenn Sie den Cursor bewegen weg, verschwindet es. Jedes Mal, wenn Sie sehen, schweben, es wird unter Bezugnahme auf die Cursor wird über etwas bewegt und dort angehalten.

#branding {color: # 000-}

wenn der Farbe ist geändert # 000, die Farbe wird schwarz und sieht besser gegen den gelben Hintergrund.

image1.jpg

Wenn CSS-Code zu ändern, seien Sie vorsichtig die Satzzeichen genau zu halten, wie sie sind. Zum Beispiel, stellen Sie sicher, dass jede Zeile in dem Code-Block mit einem Semikolon endet.

Versuch und Irrtum ist eine Möglichkeit, herauszufinden, welche Stile in der style.css gehören, welche Elemente auf Ihrer Website. Aber es gibt einen einfacheren Weg. Sie können die Web-Browser Firefox verwenden und das Add-in namens Firebug installieren. Andernfalls eine Scheibe im Web-Browser öffnet sich und zeigt Ihnen, welche Stile die Elemente auf Ihrer Webseite verwenden.

In der folgenden Abbildung sehen Sie, welche Linie in style.css das Erscheinungsbild des Site-Namen in der Kopfzeile gesteuert wird. Am unteren rechten Ecke des Browsers können Sie sehen, wo in der CSS-Code die Formatierung festgelegt ist. Erfahren Sie mehr über Firebug bei Getfirebug.com.

image2.jpg

Sie können viele andere Details optimieren und Modifikationen an Themen machen. Drupal.org/theme-guide ist eine äußerst gründliche Anleitung.

Ähnliche

Menü