Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress für Designer: Themes und Layout-Werkzeuge

CSS-Stile und -Klassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In wenigen Fällen reichen die Bordmittel von Cornerstone möglicherweise nicht aus. Dann hilft Cornerstone durch eigene CSS-Stile und Klassen ab.

Transkript

Wir wollen nun noch ein bisschen Feintuning machen. Ich möchte gucken, wie man jetzt nachträglich noch Abstände definieren kann, ich möchte die Farben von den Buttons ändern und so weiter. Und es gibt Eigenschaften, die lassen sich nicht in Cornerstone editieren, wie zum Beispiel der Abstand zwischen dem Button und dem Text hier. Wir können den Text auswählen. Dann haben wir hier in dem Fall kein Margin und Padding. Wir können den Button auswählen und dann haben wir auch kein Margin und kein Padding. Und Margin und Padding benötigen wir ja für die Außenabstände, also das Margin, um hier außen einen Abstand zu definieren, und das Padding, um einen Innenabstand zu definieren. Ja, außerdem, was ist, wenn ich die Farbe ändern möchte? Ich kann natürlich hier die Farbe für diesen Button ändern. Aber was ist, wenn ich jetzt noch andere Buttons habe, die schwarz sind, und ich sie weiß haben? Ich möchte hier den Button weiß, den Button schwarz, dann wieder einen weiß und so weiter. Das möchte ich jetzt mal gerade demonstrieren. Um jetzt hier einen Abstand zu bekommen, ich möchte den Abstand erhöhen, kann ich entweder das Element auswählen und dann unten Margin dazugeben, oder ich wähle den Button aus und kann dem oben ein Margin hinzugeben. Wie man das macht ist über eigenes CSS. Man muss sich wohl ein bisschen mit CSS auskennen. Und zwar kann man für jedes Element, das man ausgewählt hat, hier ganz unten unter "Style" selber CSS-Regeln hinzufügen. Und das ist eigentlich sehr einfach, wenn man die CSS-Regeln kennt. In unserem Fall wollen wir nach oben etwas Abstand haben. Deswegen ist das "margin-top:", und jetzt kommt der Wert. Ich möchte oben einen Abstand haben von, sagen wir, 10 Pixel. Dann schreibe ich hier "10 px" hinein. Und hier haben wir schon den Abstand. Wir können jetzt live sehen, wie sich der verändert, wenn ich jetzt sage "15" zum Beispiel. Oder "5". Ich finde eigentlich 10 schon direkt am besten. Genau. So habe ich also jetzt hier einen Abstand hinzubekommen, der sonst eigentlich nicht möglich gewesen wäre. Ja, was ist mit der Farbe von Buttons? Wir haben hier zum Beispiel diesen hier. Der soll jetzt ebenfalls weiß sein. Dazu wähle ich den Button aus, gehe jetzt hier nach unten, und werde jetzt hier unter "Style" die Farbe definieren. Und die Farbe, das ist in dem Fall "color:". Und ich kann jetzt schreiben "white" zum Beispiel. Und dann ist der Text schon einmal weiß. Statt dem "white" könnte man auch einfach die Rautetaste und dann dreimal das "f" beziehungsweise sechsmal das "f", das ist der maximale Farbanteil, also alle Farben werden in dem Fall angesteuert, mit dem Maximum, und das ergibt in dem Fall weiß. Okay. Wir brauchen jetzt noch die Farbe für den Rand, und das ist die "border". Dann sagen wir einfach: "border-color:". Und das ist dann ebenfalls weiß. Und schon haben wir das Ganze hier ergänzt. So, wenn ich das jetzt aber mehrfach anwenden möchte, da möchte ich nicht jedes Mal hier das alles eintippen, sondern ich kann mir eine Klasse erzeugen, die diese Eigenschaften hier beinhaltet, ich schneide das mal aus, und kann die Klasse dann hier zuweisen. Das möchte ich jetzt mal demonstrieren, und zwar macht man das in dem Fall nämlich über die Settings. In den Settings haben wir hier "Custom CSS". Und hier an dieser Stelle kann ich jetzt CSS eingeben. Als erstes mal müssen wir einen Namen definieren. Und zwar möchten wir an der Stelle jetzt, dass die Klasse "weiß" heißt. Ich gebe hier also "weiß" ein. Wir können das natürlich nennen, wie wir wollen. Aber Klassen fangen immer mit einem Punkt an. Dann kommt die geschweifte Klammer. Und hierhinein kommt jetzt das aus der Zwischenablage, nämlich "color: white" und "border: white". Das war es schon. Ja, wir haben also jetzt hier bereits die Angaben getätigt, können das Fenster schließen, müssen das dann speichern und können dann im nächsten Schritt jetzt die Elemente auswählen, die wir weiß haben wollen, also in unserem Fall den Button. Und dann gehen wir einfach hier unten auf die Klasse und geben hier den Klassennamen "weiß" an. Und schon ist alles weiß. So, haben wir noch einen Button, den wir umfärben müssen? Diesen hier. Dieser Text ist weiß, der liegt auf einem Film, auf einem Video im Hintergrund, und das Video wird uns hier in der Vorschau nicht angezeigt. Das können wir aber gleich sehen. Ich wähle jetzt den Button aus, gehe auch hier ganz nach unten und vergebe als Klassennamen "weiß". Und schon ist der Button auch weiß. Jetzt speichern wir das Ganze nochmal. Und dann gehen wir in die Vorschau und schauen uns das in einem neuen Tab an. Und hier sehen wir jetzt den Abstand. Wir sehen hier den Button, der jetzt weiß ist, genauso wie der Button hier auf dem Video, der jetzt ebenfalls weiß ist. Wir sind also in Cornerstone in der Lage, zum einen Stile direkt an dieser Stelle einzufügen, und zum anderen auch Klassen zu erzeugen, hier in den Settings, wo wir jede beliebige Klasse definieren können und diese dann zuweisen können. Wenn man sich mit CSS nicht auskennt, ist das nicht so wild. Man sollte vielleicht ein bisschen Englisch können. Man kann ganz einfach mal nach "css eigenschaften liste" googeln, und dann hier direkt mal das erste Ergebnis auswählen. Und dann haben wir hier die ganzen Eigenschaften. Das hier ist die Eigenschaft. Hier ist die Übersetzung davon. Also wenn wir die Schriftart ändern wollen, dann sagen wir einfach "font family:" und dann geben wir die Schriftart an. Wenn wir die Größe ändern wollen, sagen wir "font size:" und geben dann die Größe an. Ja, und wir haben eben auch mit Margin gearbeitet. Mit "margin-top", das ist hier. Hier ist die Übersetzung: "absoluter Abstand zum Seitenrand". Ja, und hier gibt man einfach einen Wert in normalerweise Pixel an. Hier steht jetzt "pt (Punkt) mm oder cm". In unserem Fall in CSS sollte man mit Pixel oder mit Prozent arbeiten. Das heißt, selbst wenn man sich nicht mit CSS-Regeln auskennt, kann man hier ganz einfach nachlesen. Wenn man irgendetwas verändern möchte, dann kann man einfach nachlesen, wie der entsprechende Befehl heißt beziehungsweise, wie die Eigenschaft heißt, die wir dann anpassen wollen. Auf der rechten Seite sehen wir Informationen, welche Möglichkeiten bestehen, für die Anpassung der entsprechenden Eigenschaft.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!