Linien Full With farbig (Riverbank)
-
Hallo. Habe das Theme „Riverbank“ installiert.
Ich habe das Design geändert, in eine schwarze Seite.
Wenn ich die Linie unterhalb der Nav-Leiste blau haben will,
oder die zwei Linien oberhalb/unterhalb des Seitentitels, geht das für mich als Laie anscheinend nur, wenn die im Design die Textfarbe auf blau ändere.
Aber das kann doch wohl nicht sein.Wo wir dabei sind, möchte ich die Seitentitel grün haben.
Ich kann aber nur ALLE Überschriften farblich ändern und dann unterscheiden zwischen H1-H6.
Wenn ihr mir Anleitung gebt was ich ändern muss, würde ich mich auch an die CSS rantrauen (natürlich nachdem ich ein backup gemacht habe 😉
Lieben Gruß
Matze / RainchillerDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Hallo,
das Theme Riverbank ist ein Block Theme.
Eine Anpassung ist über Design > Website-Editor möglich.Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
(1) Gruppen-Block wählen
(2) Klicke auf „Block“
(3) Unter „Ränder“ findest du beim unteren Rand die Höhe der Linie: 2px
(4) Bei Klick auf dieses Symbol kannst du die Farbe wählen oder angebenDa scheint eine Anpassung nur über eine CSS-Regel möglich zu sein:
(1) Auf „Halbmond“ (Tooltip ist „Stile“) klicken
(2) Dann Auswahl „Zusätzliches CSS“ und Eingabe der CSS-Regel:h3.wp-block-heading { color: green; }
(3) Die Farbe der H3 (Übersschrift) ändert sich dann entsprechend
(4) Auf Button „Speichern“ klicken.Nachtrag: Eine Doku zu dem Theme findest du übrigens hier: https://docs.themeisle.com/article/1781-riverbank-fse-theme
Viele Grüße
Hans-Gerd- Diese Antwort wurde geändert vor 5 Monaten von Hans-Gerd Gerhards. Grund: Ergänzung
Danke für die ausführlich Anleitung. Zu 1. Bei mir sieht das leider etwas anders aus. Ich wollte die Linie oberhalb andern. Unterhalb der Navbar. (Die gehört zum Header.)
Aber gut, dann könnte ich die drei Linien ändern von den Spalten im unteren Block. Leider sehe ich keine Ränder mit Top,Left,Right,Bottom sondern nur eine Eistellung für alle Seiten.
Zu 2. Einzelne Überschriften (H1-H6-oder einzelne) kann ich farblich ändern, in den Einstellungen. Ich möchte den Titel farblich ändern und dabei auch die Linien oberhalb und unterhalb des Titels.
LG MatzeHallo,
nun ja, du hast auch nicht wie in meinem ersten Screenshot zu sehen ist, die Änderung bei der Gruppe im Header vorgenommen.zu 2.: Du bist nicht auf meinen Vorschlag eingegangen. 🤔
Ich war davon ausgegangen, dass du die Überschriften auf der Hauptseite meinst. Jetzt betrifft aber die gewünschte Änderung den Titel im Template „Seite“.Da klickst du links auf „Titel“ und kannst dann rechts bei den Styles die Farbe ändern.
Viele Grüße
Hans-GerdHallo @rainchiller
wenn du es so, wie von @hage erklärt, nicht hinbekommst, dann halt mit CSS:
/* Rand oben */ header.wp-block-template-part .wp-block-group.wp-block-group-is-layout-constrained, .is-layout-constrained .wp-block-group.alignwide.is-layout-constrained.wp-block-group-is-layout-constrained .wp-block-columns .wp-block-column-is-layout-flow hr /* Rand oberhalb der 3 Boxen */ { border-bottom-color: #0094ff; } /* Rand unter der Überschrift */ main#wp--skip-link--target .wp-block-group.is-layout-flow { border-bottom-color: #0094ff; } /* Rand oberhalb der 3 Boxen */ is-layout-constrained .wp-block-group.alignwide.is-layout-constrained.wp-block-group-is-layout-constrained .wp-block-columns .wp-block-column-is-layout-flow hr { border-bottom-color: #0094ff; } /* Rand unten */ footer.wp-block-template-part .wp-block-group.wp-block-group-is-layout-constrained { border-top-color: #0094ff; }
CSS-Code kann man (wenn kein Child-Theme vorhanden ist) im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS einfügen.
Abgekürzter Weg -> (https://dein-domainname.de/wp-admin/customize.php), also:
/wp-admin/customize.php
an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL SHIFT Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu).
Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst. AUf einem Smartphone musst du natürlich den Browser-Cache anders entfernen.
@hage: Auf deinem Screenshot, sah es so aus als wärst du nicht im Header.
Daher bin ich , wie du (aussah), auf den Mittelteil gegangen.Ich war davon ausgegangen, dass du die Überschriften auf der Hauptseite meinst. Jetzt betrifft aber die gewünschte Änderung den Titel im Template „Seite“.
hageWo wir dabei sind, möchte ich die Seitentitel grün haben.
Hies es im Startbeitrag
Ich kann aber nur ALLE Überschriften farblich ändern und dann unterscheiden zwischen H1-H6.Mit Seitentitel sind natürlich die Titel von Seiten gemeint.
Lieber Hans. Wenn ich nicht auf deinen Vorschläg/deine Vorschläge eingegangen bin hat das nichts damit zu tun, dass ich entweder keine Lust habe oder denke es besser zu wissen; sondern damit, dass es bei mir anders aussah im Editor.
Hallo,
Lieber Hans. Wenn ich nicht auf deinen Vorschläg/deine Vorschläge eingegangen bin hat das nichts damit zu tun, dass ich entweder keine Lust habe oder denke es besser zu wissen; sondern damit, dass es bei mir anders aussah im Editor.
davon bin ich auch nicht ausgegangen, sondern habe nur festgestellt, dass du meiner Meinung nach nicht darauf eingegangen bist. 😉
Aber jetzt noch mal zurück zum Thema: Wenn du das aber so wie im Screenshot im Header anpasst, sollte das doch funktionieren. Welche Fragen sind denn jetzt noch offen?
Viele Grüße
Hans-Gerd@hage
Danke Titelfarbe ist geändert. Hab dann doch mein persönliches Blau genommen. Das persönlich Grün wäre dann doch zu viel.@la-geek
Vielen Dank 🙂 Hat geklappt, sogar ohne Cache leeren.
Linienfarben geändert. Die für die drei Blocks auf der Startseite kommen echt gut.
Könntest du mir bitte CSS geben, wie ich die zwei oben und den unten vorm Footer entfernen kann.
bzw. die gewünschte Version und eine Version wo ich EINE Linie unterhalb der Nav-Leiste habe.Die Linien sind schon blau.
Hallo @rainchiller,
noch ein Hinweis: Bei einem Block Theme wie TT4 kannst du auch die Gestaltung der Headings individuell vornehmen:Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
1: Auf Design > Website-Editor und oben auf den „Halbmond“ (Styles) klicken.
2: Colors wählen
3: Klick auf die drei senkrechten Punkte (Kebap-Menü)
4: Auswahl von z. B. H2
5: Hier kann de Farbe für Hintergrund und Textfarbe gewählt werden.Diese Option habe ich gerade in diesem Video gesehen: https://wordpress.tv/2024/04/10/styling-your-site-with-global-styles-2/
Damit kannst du dir dann CSS für Headings sparen.
Viele Grüße
Hans-GerdDanke @hage . Der Anleitung konnte ich folgen.
Jetzt möchte ich nur noch wissen wie ich die blauen Linien
(Oben die zwei und unten die eine durchengezogene/n) wegbekomme.
siehe mal zB eine normale Seitebzw. möchte ich einmal probieren ganz ohne die durchgezogenen Linen,
und mal mit der einen Linie unterhalb der Navigationsleiste.
Halt wie auf der Startseite oben die. Aber dann auch auf einer Seite.
(Die drei kleinen im Block auf der Startseite [mit den 3 Spalten] sollen bleiben.)Habe das mit den Linien geregelt.
mitborder-bottom: none;
bzwborder-top: none;
Nun noch die Frage, wie bestimme ich die Farbe global für eine Trennliene
0094FF
? siehe SeiteIch danke euch für eure Hilfe und eure Geduld.
- Diese Antwort wurde geändert vor 4 Monaten, 3 Wochen von Rainchiller.
@rainchiller Dann wäre jetzt eine gute Gelegenheit, den Thread noch als „gelöst“ zu markieren. 😉
Habe das mit den Linien geregelt.
mitborder-bottom: none;
bzwborder-top: none;
Nun noch die Frage, wie bestimme ich die Farbe global für eine Trennliene
0094FF
? siehe SeiteIch danke euch für eure Hilfe und eure Geduld.
Es ist noch eine Frage hinzugekommen.
Dir ist aber bekannt, dass wir hier Anwendungsfragen zu WordPress behandeln wollen und es für Fragen zu CSS besser geeignete Foren gibt? Wir erstellen eigentlich auch nicht auf Zuruf irgendwelche CSS-Regeln, auch wenn Hans-Gerd und Angelika da großzügig Ausnahmen gemacht haben.
Du bekommst WordPress, Themes und Plugins bereits kostenlos zur Verfügung gestellt und wenn es bei der Nutzung ein Problem gibt, versuchen wir, dir zu helfen oder eine Alternative zu finden. Es würde aber den Rahmen sprengen, wenn wir hier vermitteln sollten, wie man ein Plugin anders programmiert oder ein Theme (das dafür keine Gestaltungsoptionen bereithält) nach ganz individuellen Kriterien angepasst wird.
Das ist auch nicht der Sinn von Themes. Du bekommst vielmehr verschiedene Layouts angeboten, die du mit Einstellungsoptionen nach deinen Wünschen anpassen kannst. Kommst du damit nicht zurecht, suchst du dir am besten ein anderes Theme. Oder du erwirbst die nötigen Kenntnisse, um die Programmierung des Theme nach deinen Wünschen anzupassen und daraus ein eigenständiges (Child-)Theme zu erstellen. Das können wir hier aber nicht vermitteln.Wie geht man so eine Änderung an?
Du öffnest im Browser mit einem Rechtsklick auf Layout-Elemente, die du ändern möchtest (1), die Entwickler-Tools deines Browsers und bekommst das HTML dazu angezeigt. In der rechten Spalte findest du für die CSS-Klassen (2) die zugehörigen CSS-Regeln. In diesem Fall wird mit
header.wp-block-template-part .wp-block-group.wp-block-group-is-layout-constrained, .is-layout-constrained .wp-block-group.alignwide.is-layout-constrained.wp-block-group-is-layout-constrained .wp-block-columns .wp-block-column-is-layout-flow hr { border-bottom-color: #0094ff; }
der CSS-Klasse
header.wp-block-template-part .wp-block-group.wp-block-group-is-layout-constrained
für den unteren Rand eine Farbe#0094ff
zugewiesen.Möchtest du die Farbe nur für diese CSS-Klasse ändern, kopierst du die notwendigen Teile und fügst sie als Zusätzliches CSS ein:
header.wp-block-template-part .wp-block-group.wp-block-group-is-layout-constrained { border-bottom-color: #00ff00; /*andere Farbe */ }
Möchtest du die Farbe für alle Stellen nutzen, die diese Farbe für den unteren Rand verwenden, kopierst du die gesamte CSS-Regel und änderst den Farbwert:
header.wp-block-template-part .wp-block-group.wp-block-group-is-layout-constrained, .is-layout-constrained .wp-block-group.alignwide.is-layout-constrained.wp-block-group-is-layout-constrained .wp-block-columns .wp-block-column-is-layout-flow hr { border-bottom-color: #00ff00; /* andere Farbe */ }
- Du musst angemeldet sein, um auf dieses Thema zu antworten.