5 supereinfache CSS-Codes zum Anpassen Ihrer WordPress-Website
CSS ist schwer!
Hört sich an wie etwas, das Sie sagen könnten? Da wären Sie nicht allein. CSS (oder Cascading Style Sheet) ist eine Programmiersprache, mit der man nur schwer zurechtkommt.
Doch zu sagen, dass CSS schwierig ist, ist ein wenig hart. Wie jede andere Sprache auch, kann CSS anfangs etwas schwierig zu verstehen sein, aber wenn man erst einmal die Grundlagen verstanden hat, geht alles wie von selbst.
Der beste Weg, CSS zu lernen, ist zu verstehen, was es ist und wie es funktioniert. Dann können Sie einige grundlegende Codeschnipsel lernen, die Ihnen helfen, das anfängliche Verständnis ein wenig mehr zu erfassen, und Sie werden in kürzester Zeit entwerfen können.
Unser Beitrag wird genau das tun.
Was ist CSS?
Sicher, CSS bedeutet Cascading Style Sheet, aber jeder wird Ihnen das sagen. Aber das hilft nicht wirklich weiter, oder?
Es gibt einen einfacheren Weg, um zu verstehen, was es ist.
Stellen Sie sich HTML als den Rahmen eines Hauses vor und CSS als den Außenanstrich. Wenn Sie die Fassade des Hauses streichen oder die Veranda beizen, ändert sich dann der Rahmen des Hauses selbst?
Nein, das tut es nicht. Stattdessen wird nur das Aussehen verändert. Das Fundament und der Rahmen des Hauses bleiben gleich.
Das ist CSS.
Es verändert das Aussehen Ihrer Website, aber es stört nicht das Fundament oder den Kern davon.
Jedes Haus hat Farbe. Jedes WordPress-Theme verwendet CSS.
Sie arbeiten zusammen, um eine Website zu erstellen, und Sie können einige recht einfache CSS-Code-Schnipsel verwenden, um die so genannte „Farbe“ Ihres Themes zu ändern.
In der Tat könnten Sie überrascht sein, wie einfach es ist.
Einfache CSS-Bearbeitung: Bearbeiten der Schriftart und eine kurze Lektion über das Schreiben von Code
Wenn du ein Theme wie das Genesis Framework verwendest, brauchst du etwas so Einfaches wie die Schriftart auf deiner Seite zu ändern. Aber keine Sorge. Es ist wirklich nicht so schwer.
Um CSS-Änderungen an Ihrem Theme vorzunehmen, benötigen Sie zunächst einen benutzerdefinierten CSS-Bereich, um diese Anpassungen vorzunehmen. Ändern Sie nicht das Stylesheet, das in Ihr Theme integriert ist.
Verwenden Sie stattdessen ein Plugin wie die Option „Custom CSS“, die in Jetpack enthalten ist. Jede deiner CSS-Änderungen, die du dort vornimmst, wird das vorgegebene CSS deines Themes überschreiben.
Bevor du die Schriftart bearbeiten kannst, musst du herausfinden, welchen Bereich du bearbeiten willst.
Es gibt 7 Hauptbereiche, in denen du deine Schriftart bearbeiten kannst:
- Alle 6 Überschriften-Schriftarten
- Die Körper-Schriftart
Das Tag-Markup für diese ist einfach. Wenn Sie zum Beispiel die Schriftart der Überschrift 1, die auf Ihrer Website angezeigt wird, bearbeiten möchten, verwenden Sie den Tag h1. Wenn Sie die Schriftart der Überschrift 2 ändern möchten, wäre der Tag h2 und so weiter.
Hier ist ein Beispiel dafür, wie man CSS-Code schreibt, um die Schriftart der Überschrift 1 zu ändern:
h1 { font-family: 'Georgia'; }
Nun können Sie zwar versuchen, das zu kopieren und einzufügen, aber ich möchte, dass Sie besser verstehen, wie das wirklich funktioniert.
Der erste Teil (h1) ist das Thema, das Sie ändern möchten. Dieses Symbol ({ ) öffnet eure Codezeile und dieses ( } ) schließt sie ab.
Okay, okay.
Das klingt wahrscheinlich immer noch verwirrend, aber als ich CSS lernte, habe ich mir einen praktischen Trick beigebracht, um mich daran zu erinnern, wie man CSS richtig schreibt. Etwa so:
h1 { öffnet die Tür zu seinem Kleiderschrank
Auf der Suche nach etwas, das er anziehen kann: ‚Er findet, was er will‘;
Und dann schließt er die Tür}
Zurück zum Thema; hier ist ein weiteres Beispiel, wie man Änderungen an der Schriftart vornehmen kann.
body { font-family: 'Arial'; }
Indem ich das Element von h1 in body geändert habe, habe ich dem Stylesheet mitgeteilt, dass ich die Schriftart body, die in Beiträgen und Seiten angezeigt wird, in die Schriftart Arial ändern möchte.
Das ist doch ganz einfach, oder?
Wenn dein Theme Google Font unterstützt, kannst du die Schriftarten von dort auch auf deiner Website verwenden.
Einfache CSS-Bearbeitung Zwei: Schriftfarbe bearbeiten
Dieser kleine CSS-Trick ist eine nette Möglichkeit, die Farbe deiner Menüschrift oder die Farbe der Körperschrift zu ändern. Wie bei den oben beschriebenen Codeschnipseln genügen ein paar kurze Codezeilen, um wirklich etwas zu verändern.
Angenommen, ich möchte die Farbe der Schriftart meiner Überschrift 2 ändern. Ich kann das tun, indem ich eine ähnliche Gliederung wie zuvor befolge (erinnerst du dich an die Geschichte?), aber die wichtigsten Codezeilen ein wenig verändere. Etwa so:
h2 { color: #4f4f4f; }
Beachten Sie, dass die Überschrift als h2 definiert ist und wir immer noch die öffnenden und schließenden Tags ({}) haben, aber die Art und Weise, wie der Code geschrieben ist, ist ein wenig anders als oben, als wir den Code für eine Schriftartänderung geschrieben haben.
Im Gegensatz zur Schriftart, die durch Klammern abgeschlossen werden musste, (‚ ‚) braucht das hexadezimale Farbelement das nicht.
Nun müssen Sie nicht immer wieder Code für das gleiche Thema schreiben, um bestimmte Aspekte davon zu ändern. Sie können den Code für ein und dasselbe Thema kombinieren, um Dinge leichter zu finden und in Zukunft zu ändern. Sie können zum Beispiel Schriftart und Schriftfarbe in einer einzigen Codezeile kombinieren?
body { font-family: 'Roboto'; color: #4f4f4f; }
Sehen Sie, wie ich das gemacht habe?
Ich habe zwei Codezeilen in dieser einen Betreffzeile. Wenn Sie mehrere Änderungen an einem einzigen Betreff vornehmen müssen, sparen Sie Zeit, wenn Sie den Code auf diese Weise schreiben. Achten Sie nur darauf, dass Sie die einzelnen Codezeilen mit einem Semikolon (;) abschließen, bevor Sie zur nächsten Zeile übergehen.
Anmerkung: Um sich dies zu merken, stellen Sie sich das Semikolon wie einen Punkt am Ende Ihres Satzes vor. Sie beenden niemals einen Satz ohne Punkt. Beenden Sie niemals eine Codezeile in CSS ohne ein Semikolon.
Einfache CSS-Bearbeitung Drei: Hintergrundfarbe und ein Browser-Tool, von dem Sie nicht einmal wussten, dass Sie es haben
Ein weiterer einfacher CSS-Trick besteht darin, die Farbe bestimmter Dinge auf Ihrer Website zu ändern. Alles, was Sie wissen müssen, ist das Element oder Thema, das Sie ändern möchten.
Ein praktisches Tool, das viele Designer verwenden – mich eingeschlossen – ist das Tool „Inspect Element“ in unserem Google Browser. Es ist auch sehr nützlich, um das richtige Thema zu finden, das man ändern und definieren möchte.
Um es zu finden, doppelklicken Sie einfach mit der Maus, um die Optionen aufzurufen, wie Sie unten sehen können. Wählen Sie „Element inspizieren“, und Sie können nun die bearbeitbaren Elemente Ihrer Website durchsuchen.
Sehen Sie dieses Bild hier?
Ich habe einen Menüpunkt in einer anderen Farbe als den Rest meines Menüs hervorgehoben, um zu stehen. Um das zu tun, habe ich mein Inspect Element Tool benutzt, um den richtigen Namen für mich herauszufinden, den ich bearbeiten muss.
Wenn ich jetzt über die Menüpunkte scrolle, wird der tatsächliche Codename, der ihm gegeben wurde, in meinen Hervorhebungen angezeigt. Der von mir geänderte Eintrag hatte den Namen: #menu-item-473 (Sie können den Namen in dem gelben Feld sehen. Sein Name ist blau hervorgehoben.)
Das ist der Name des Gegenstands, den ich ändern wollte. Um die Hintergrundfarbe dieses Menüpunkts zu ändern, beginne ich die Zeile mit dem Namen des Menüpunkts und gebe an, dass ich den Hintergrund ändern möchte, etwa so:
#menu-item-473 { background-color: #D65050; }
Auch hier beginne ich damit, dem Stylesheet das Thema mitzuteilen, das ich ändern möchte (#menu-item-473), und dann sage ich ihm, was es ändern soll (background-color) und in was es geändert werden soll (#D65050).
Was auch immer Sie den Hintergrund ändern wollen, es wird einen anderen Namen haben als diesen, aber zum Glück wird die Option „Element inspizieren“ in Ihrem Browser das Auffinden so viel einfacher machen.
Eine weitere großartige Sache über das Google-Tool „Element inspizieren“ ist, dass Sie Dinge in Echtzeit bearbeiten können, um die Dinge genau richtig zu machen, und dann können Sie alle Ihre Bearbeitungsarbeiten von dort in Ihr benutzerdefiniertes CSS-Stylesheet kopieren und einfügen. Das spart Zeit!
Einfache CSS-Bearbeitung Vier: Float
Manchmal ist es schön, etwas anderes mit dem Hauptmenü oder den vordefinierten Widgets auf Ihrer Website machen zu können. Vielleicht möchten Sie einen Menüpunkt weiter rechts platzieren als die anderen, so wie ich es mit dem oben abgebildeten Menü gemacht habe. (Auch unten in voller Breite abgebildet.)
Um dies zu tun, können Sie das Float-Code-Snippet verwenden, um genau das zu tun. Wie bei den obigen Schritten sollten Sie das Werkzeug „Element inspizieren“ verwenden, um den Namen des zu ändernden Betreffs zu finden. Der hier abgebildete ist derselbe wie der oben erwähnte. (#menu-item-473)
Um diesen Punkt zu verschieben, aber trotzdem auf einem mobilen Bildschirm gut auszusehen, habe ich folgenden Code geschrieben:
#menu-item-473 { background-color: #D65050; float: right; }
Es war wirklich so einfach. Jetzt habe ich einen Menüpunkt, der sich von anderen abhebt, und das war es, was ich tun musste. Sie können dies auch auf andere Dinge als Ihre Menüpunkte anwenden.
Wenn Sie zum Beispiel ein Widget haben, das Sie neu positionieren möchten, können Sie den float: right; oder float: left; Codeschnipsel verwenden, um zu ändern, wo das Widget angezeigt wird.
Es braucht etwas Zeit und Feinarbeit, aber CSS wird einfacher zu bedienen, je länger man damit herumspielt.
Einfache CSS-Bearbeitung Fünf: Text ausrichten
Den Text in einem Beitrag auszurichten, ist eine Sache, die man sicher tun kann. Aber was ist mit den Titeln Ihrer Widgets oder ähnlichem?
Sie können diesen CSS-Code verwenden, um die Titel Ihrer Widgets einfach auszurichten.
Ich verwende das Genesis Framework für meine Websites, und dies ist der Code, den ich benötige, um die Titel meiner Widgets auszurichten:
.footer-widgets .widget-title { text-align: center; }
Der Name des Elements oder des Themas in Ihrem Thema kann leicht davon abweichen, aber Sie verstehen die Idee.
Dieser kleine Code sorgt dafür, dass der Text in den Titeln meiner Footer-Widgets zentriert bleibt, und da ich die .footer-widgets zusammen mit den .widget-title ausrufe, werden nur die Footer-Titel zentriert.
So, das war’s! 5 super einfache Möglichkeiten, wie Sie Ihr Thema mit CSS bearbeiten können! Mit CSS ist es wie mit jeder anderen Sprache. Am Anfang ist es schwer, aber wenn man erst einmal den anfänglichen Stolperstein überwunden hat, ist es ein Kinderspiel.