Typographie und Farbe im Blog verändern
-
Theme OceanWp 1.6.4
Browser Firefox
MAC OS Mojave 10.14.3
ElementorAls Anfänger freue ich mich schon sehr über den bislang erstellten Inhalt, nur hilft alles Googlen mir nicht weiter, den Blog ansprechender zu gestalten. Ich habe zwar herausgefunden, dass ich unter Appearance – Customize – General Options – General Styling die background color meines Blogs ändern kann, das bezieht sich aber nur auf die erste Blogseite. Geht man vom Blog zu continue reading fnde ich hier keine weiteren Möglichkeiten der Gestaltung. CSS kann ich leider nicht.
Konkret möchte ich den Hintergrund des Posts von babyblau auf #005daa und die Schrift auf #febd11 ändern. Ebenso ist mir der Zeilenabstand zu groß. Wäre toll, wenn mir jemaqnd einen Tipp geben könnte, wo ich den Blog bzw. dessen Posts formatieren könnte – danke schon mal!- Dieses Thema wurde geändert vor 5 Jahren, 7 Monaten von kaeptniglu.
- Dieses Thema wurde geändert vor 5 Jahren, 7 Monaten von kaeptniglu.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Als Anfänger
ist das Theme OceanWp schon der Jackpot also eine Herausforderung. Das von dir ausgewählte Theme hat viel mehr Einstellungen im Customizer als viele andere Themes. Ich habe mir das Theme mal auf eine lokale Testumgebung installiert und schnell durchgesehen.
Im Abschnitt Typografie sind für jede erdenkliche Möglichkeit eigene Einstellungen vorgesehen. So auch für den Zeilenabstand. Da vermute ich mal, dass im Body die Einstellung zu hoch ist, also den Schieber nach links und auf den gewünschten Wert einstellen.
Das deine Links auch gelb sind ist subobtimal bei gelben Hintergrund. In Allgemeine Optionen – Allgemeiner Stil die Primäre Farbe ist dafür zuständig.
Grundsätzlich wird auch der Seitenhintergrund so eingestellt.
Versuche mal das in den Einstllungen zu lösen, wenns noch besondere Wünsche gibt, die nicht im Customizer enthalten sind schreibst du das wieder.Jostu55, für Deine Antwort hab herzlichen Dank – ich nehme Deine Einschätzung mal als Kompliment.
Rückfrage zu Deiner Info bzgl. der Links: Wo der Hintergrund blau ist sollen sie gelb sein vv. Klappt das irgendwo nicht? Sehe den Wald wohl vor Bäumen nicht?Vieleicht habe ich nicht klar genug zum Ausdruck gebracht: Mir geht es um die Blogbeiträge, die ich formatieren möchte. In dem Typografiereiter habe ich nichts dazu gefunden. Wenn man „continue reading“ clickt, wechseln die Farben zu weißer Schrift auf hellem blau mit großen Absätzen, dazu suche ich eine Lösung.
Beste Grüße
Jo- Diese Antwort wurde geändert vor 5 Jahren, 7 Monaten von kaeptniglu.
Also zur Typografie: In deinem Quelltext steht:
Typography CSS */body{font-family:Tahoma,Geneva,sans-serif;font-size:20px;color:#005daa;line-height:3.1;letter-spacing:3.5px}
Das heißt in Kurzform –
20px Schriftgröße
Farbe:#005daa = blau
Zeilenabstand: line-height: 3.1 = zu hoch, Standard ist 1.8
Laufweite Zeichen: letter-spacing:3.5px = zu hoch, Standard ist 0
Bild-01
Mit der Farbe wäre ein Screenshot mit deinen Wünschen am einfachsten, damit wir nicht aneinander vorbei raten 😉Da der vorige Beitrag auf Freischaltung wartet, gleich noch einer mit Bild
Bild-02
Das ist in meiner Testumgebung mit OceanWP und deinen Werten – sieht doch ähnlich aus. Also die rot eingerahmten Werte auf „Normal“ bringen und weiter gehts.- Diese Antwort wurde geändert vor 5 Jahren, 7 Monaten von jostu55.
Da der Beitrag offensichtlich noch immer auf die Freischaltung wartet, einmal ohne Bild ;-(
Also zur Typografie: In deinem Quelltext steht:Typography CSS */body{font-family:Tahoma,Geneva,sans-serif;font-size:20px;color:#005daa;line-height:3.1;letter-spacing:3.5px}
Das heißt in Kurzform –
20px Schriftgröße
Farbe:#005daa = blau
Zeilenabstand: line-height: 3.1 = zu hoch, Standard ist 1.8
Laufweite Zeichen: letter-spacing:3.5px = zu hoch, Standard ist 0
Hier sollte das Bild sein.
Mit der Farbe wäre ein Screenshot mit deinen Wünschen am einfachsten, damit wir nicht aneinander vorbei raten 😉Und nochmals der Bildlink – mal sehen pb er wieder einen Admin braucht ….
LINK zu Bild-01Jostu, hab ganz herzlichen Dank für Deine großzügige Hilfe! Entschuldige, dass ich jetzt erst zu Dir zurückkomme, aber ich mache das ehrenamtlich neben anderen Aufgaben, die mich ziemlich fordern.
„Zeilenabstand: line-height: 3.1 = zu hoch, Standard ist 1.8
Laufweite Zeichen: letter-spacing:3.5px = zu hoch, Standard ist 0“
habe ich gesetzt. Das ist schon mal sehr viel besser.Ja genau, es geht um den Post den Du auf dargestellt hast.
Allerdings ändern sich die Farben, wenn Du unten auf „read more“ klickst zu blauen Balken mit weißer Schrift, für die ich keine Konfigurationsmöglichkeit finden kann.
https://rotarianrun.org/rotarian-run-in-new-design/Wie kann ich einen Bilder – Link wie Du posten? Das habe ich leider nicht hinbekommen, aber vielleicht ist es so schon klarer?
Herzliche GrüßeJo
Ok, da ich auf meiner Installation das nicht finden kann, bzw. ich nicht alle Customizer Einstellungen von dir nachvollziehen kann hier eine Lösung, die die Farben auf deine umsetzt.
Nachfolgenden Code im Customizer in die Zusätzlichen CSS einfügen und auch auf unerwünschte Nebenwirkungen achten 😉.has-vivid-cyan-blue-background-color.has-vivid-cyan-blue-background-color { background-color:#005daa; } .has-very-light-gray-color.has-very-light-gray-color { color:#febd11; }
Bilder verlinken – in diesem Forum mußt du Bilder in z.B. einem free-PicturePortal hochladen oder einer Cloud und den Link dann wie oben einsetzen.
- Diese Antwort wurde geändert vor 5 Jahren, 7 Monaten von jostu55.
Ja, geau das meine ich, funktioniert super!
D A N K E!
Kann ich die Farben innerhalb Deines CSS einfach so anpassen, dass die Schrift #005daa auf dem bestehenden gelben Hintergrund kommt?
Ich habe mal versucht, das Bild entsprechend Deinem Tipp zu verlinken:https://www.dropbox.com/sh/s90rmmoa5xjqulu/AAD3KB6VToBDFdAwQ3gcYbe5a?dl=0
Müssen die 3 Absätze so dominant sein? Sähe es nicht gefälliger aus, wenn der ganze Post zusammenstünde – ich vermute das passiert, wenn der Schreiber einen harten return setzt – so kenne ich es von Word als Unterschied zwischen hartem und weichem return, was zu unterschiedlicher Absatzformatierung führt.
Und sehe ich es richtig, dass ich als Anfänger keinen Einfluss auf die Gestaltung des Blogs habe, weil ich kein CSS kann?Herzliche Grüße und ein sonniges Wochenende
Natürlich wäre ein einheitliches Erscheinungsbild gut. Einfach die beiden Werte tauschen und gut 😉
Jetzt bleiben noch die Links, die beim hover auf gelb wechseln…..
Da du das Menü ja wuchtig mit deinem blau hinterlegst ist das für die andern Links suboptimal!done, super!
Hast Du noch eine Idee wegen der großen Absätze?
Gern setzte ich Deinen Vorschlag wegen der Links um, bin aber unsicher, wie das am Ende aussehen sollte.
Hälst Du den Wechsel der Home mit Schrift gelb auf Hintergrund blau für schlecht? Mich selbst stört jetzt der Wechsel des Hauptmenus mit entgegengesetzten Farben auch, das sollte ich wohl ändern?
Mal sehen, dass ich das wiederfinde.
Bei den Farben war ich an Rotary – Vorgaben gebunden, nun kann ich die natürlich einsetzen wie ich möchte:-)
War das mit dem Fotolink in meinem Post richtig?Ja, der Fotolink war gut, ich konnte ihn öffnen 😉
Der Abstand zwischen den Absätzen ist mit Gutenberg etwas übertrieben!
Weiters wird bei jedem Absatz das 1. Zeichen freigelassen.
Lösungsansätze – mit Umschalt+Enter wird der Text in der nächsten Zeile, ohne Abstand, fortgesetzt.
Oder wieder mit CSS – jeder Block hat einen Innenabstand = padding
Das sieht derzeit so aus:p.has-background { padding: 20px 30px; }
Der erste Wert ist für oben und unten der zweite Wert ist für links und rechts.
Das links/rechts sieht man besonders links mit dem eingerückten Text.
Du kannst beide verändern. Wenn du die Werte auf 0 (Null) stellst sind die px zu löschen.p.has-background { padding: 0; }
In diesem Fall ist ein Null für alle 4 Seiten.
Mit den Farben – ganz ehrlich gesagt – beim ersten Ansehen hatte ich Angst um meine Augen. Aber ich verstehe die wünsche von Rotary!
Zum Menü – da ist noch Luft nach oben. Es passt so meiner Meinung nicht ins Gesamtbild. Schon garnicht, wenn mit dem hovern Teile massiv verdeckt werden.
Aber offensichtlich sind da mehrere Gründe die da hinein spielen.Kopiere zum Testen nachfolgenden Code in die Zusätzlichen CSS, dann siehst du was ich meine. Das kannst du danach wieder löschen und es ist so wie zuvor.
#site-navigation-wrap .dropdown-menu > li > a:hover, #site-navigation-wrap .dropdown-menu > li.sfHover > a { background-color: #005daa4d; }
Super, ja danke. Ich habe jetzt
p.has-background {
padding: 0;
}
gesetzt.
Deine Info mit dem ersten Zeichen fei sehe ich allerdings nicht – oder ist das nun ebenfalls durch Dein Skript behoben?
Muß dann der „Blogger“ Umschalt Enter sagen oder kann ich das vorgeben? Oder soll ich es als „Anleitung“ am Anfang posten (sieht sicher nicht so klasse aus…?
Wobei ich den Blog jetzt Dank Diner Hilfe deutlicher ansprechender als zuvor finde, eigentlich könnte meine Nachfrage als „gelöst“ markiert werden.#site-navigation-wrap .dropdown-menu > li > a:hover, #site-navigation-wrap .dropdown-menu > li.sfHover > a {
background-color: #005daa4d;
}habe ich dankend übernommen und beibt gern drin.
Es ist für mich übrigens Premiere einer Supportanfrage, und ich bin über so viel good will ziemlich begeistert und möchze das keinesfalls ausnutzen oder überstrapazieren…Ganz herzlichen Dank an meinen Betreuer jostu55, der mich während der Implementation meiner ersten Website (und erstmaligem Kontakt mit diesem Forum) bei der Hand genommen hat.
Es ist nicht selbstverständlich, dass auf nicht kommerzieller Ebene eine solche Tutorenfunktion ausgeübt wird.
Da mein Hauptproblem gelöst wurde kann meine Anfrage als erledigt registriert werden.- Diese Antwort wurde geändert vor 5 Jahren, 7 Monaten von kaeptniglu.
Die Freude ist auf meinen Seite! Viel Erfolg weiterhin.
- Das Thema „Typographie und Farbe im Blog verändern“ ist für neue Antworten geschlossen.