Support » Themes » Linien Full With farbig (Riverbank)

  • Gelöst Rainchiller

    (@rainchiller)


    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 / Rainchiller

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    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):

    Einstellungen Gruppen-Block

    (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 angeben

    Da scheint eine Anpassung nur über eine CSS-Regel möglich zu sein:
    Zusätzliches CSS

    (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

    Thread-Starter Rainchiller

    (@rainchiller)

    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 Matze

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    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-Gerd

    Moderator Angelika Reisiger

    (@la-geek)

    Hallo @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.

    Thread-Starter Rainchiller

    (@rainchiller)

    @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“.

    hage

    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.

    Hies es im Startbeitrag

    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.

    Moderator Hans-Gerd Gerhards

    (@hage)

    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

    Thread-Starter Rainchiller

    (@rainchiller)

    @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.

    Moderator Angelika Reisiger

    (@la-geek)

    Die Linien sind schon blau.

    Moderator Hans-Gerd Gerhards

    (@hage)

    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):

    Headings Einstellungen

    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-Gerd

    Thread-Starter Rainchiller

    (@rainchiller)

    Danke @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 Seite

    bzw. 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.)

    Thread-Starter Rainchiller

    (@rainchiller)

    Habe das mit den Linien geregelt.
    mit border-bottom: none; bzw border-top: none;

    Nun noch die Frage, wie bestimme ich die Farbe global für eine Trennliene 0094FF ? siehe Seite

    Ich danke euch für eure Hilfe und eure Geduld.

    • Diese Antwort wurde geändert vor 4 Wochen, 1 Tag von Rainchiller.
    Moderator Bego Mario Garde

    (@pixolin)

    @rainchiller Dann wäre jetzt eine gute Gelegenheit, den Thread noch als „gelöst“ zu markieren. 😉

    Thread-Starter Rainchiller

    (@rainchiller)

    Habe das mit den Linien geregelt.
    mit border-bottom: none; bzw border-top: none;

    Nun noch die Frage, wie bestimme ich die Farbe global für eine Trennliene 0094FF ? siehe Seite

    Ich danke euch für eure Hilfe und eure Geduld.

    Es ist noch eine Frage hinzugekommen.

    Moderator Bego Mario Garde

    (@pixolin)

    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.

    Moderator Bego Mario Garde

    (@pixolin)

    Wie geht man so eine Änderung an?

    Screenshot

    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 */
    }
Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)