Sela-Theme: Fragen zu Anpassungsmöglichkeiten (WP 4.9)

jamaju · 23. November 2017

Guten Abend zusammen!

Zu meiner Entschuldigung: ich bin blutiger WP- und CSS-Anfänger... Deshalb im Vorfeld schonmal vielen Dank für Antworten auf (für Euch vermutlich) einfachste Fragen...

Ich habe die SuFu bemüht, aber die Lösung des einzigen gefundenen Eintrags hat bei mir nicht funktioniert.

Und hier ein paar Infos:
Seite www.jamaju.de
WP-Version 4.9
Plugin Simple Custom CSS installiert

Folgendes würde ich gerne anpassen:

1. die Farbe des Menüs (der rote Balken) würde ich gerne ändern.

2. die Größe des Hummel-Bildes würde ich gerne verkleinern

3. die Beitragsbilder würde ich auch gerne kleiner machen. Hab unter Einstellungen/Medien die Zeile Bildgröße „post-thumbnail“ angepasst, das hatte aber keine Auswirkung. Oder ist das die falsche Stellschraube?

Im Voraus schonmal vielen Dank für Eure Antworten!

Viele Grüße
Janine

Marcus[IS] · 23. November 2017

Hi,

Für die Farbe in der Navigationsleiste ist dieser css Code zuständig.

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Background-Color ist die Rote Hintergrundfarbe und Color die Weiße Farbe der Schrift.
Wundert mich das man die Farben nicht per Customizer im Backend individuell einstellen kann und extra ein Custom CSS Plugin nutzen muss, da das Theme von Automatticc ist.

Aber es ginge auch ohne Plugin, allerdings muss man dafür dann vom Verwendeten Theme ein so genanntes Child Theme anlegen und dort eine extra style.css unterbringen, sonst sind alle Änderungen bei einem Theme Update im Nirvana.
Ich habe vor längerer Zeit mal einen Artikel über das Anlegen von Child-Themes verfasst. Die darin beschriebenen Schritte sollten an für sich auch mit der aktuellen WP Version noch funktionieren.

Für die Artikelbilder (Posts Thumbnail) ist dieser Code zuständig.

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Die Prozentangabe. Wenn du die verringerst, sollte das Artikelbild auch kleiner werden.
Da hier allerdings @media zum Einsatz kommt, weiß ich nicht ob es für die Ausgabe auf anderen Auflösungen, wie zum Beispiel Handy, oder Tablett auch greift. Müsstest du dann ausprobieren.

Bezüglich der Headergrafik sieht es für mich so aus, dass Grafik etwas größer ist und die Hummel auf weißem Hintergrund platziert wurde?
Falls dem so ist muss du an für sich nur mit einem Grafikprogramm die Hummel auf die gewünschte verkleinern, ohne die Gesamtgröße der Grafik zu verringern und diese neue Grafik dann hoch laden.

jamaju · 23. November 2017

Hallo Marcus,

vielen Dank für die schnelle und (sogar für mich) verständliche Antwort! Die einzigen Farben, die ich am Backend einstellen kann ist die Schriftfarbe und die Farbe des Hintergrundes des Headers.

Ich habe deinen Code im Custom CSS Plugin ergänzt und die Farben angepasst. Der Balken ist jetzt orange - super! Aber die Schriftfarbe Schwarz wird nicht übernommen. Auch bei geänderter Angabe der Farbnummer (#000) nicht

.main-navigation {
background-color: #ff6600;
border-bottom: 2px solid rgba(0, 0, 0, 0.15);
color: #000000;
display: block;
padding: 0 1em;
}

Wo genau finde ich denn eigentlich den entsprechenden Code? Über rechte Maustaste/Element untersuchen? Hast du das auf meiner Page gemacht? Den Part der .main-navigation konnte ich finden (rechts in der Box nach Suche des Begriffs). Aber den Code-Teil für die Post-Thumbnails finde ich nicht....

Das mit dem Bild muss ich nochmal prüfen, das hat mein Mann erstellt. Aber ich meinte eigentlich, dass es ein "freigestelltes Bild" ist. Allerdings ist im Backend weißer Hintergrund eingestellt.

LG
Janine

jamaju · 23. November 2017

Farbe von Links

Ups, ich glaube, ich habe vorher die falsche Art zu Antworten ausgewählt... Hier erscheint mir nämlich die Möglichkeit "Code" anzugeben...

Ich wollte meine vorherige Antwort noch ergänzen:

Kannst du mir auch zufällig sagen, welchen Code man anpassen muss, damit
- die Farbe von Links (auf andere Internetseiten)
- die Farbe von Links auf die letzten Beiträge (rechts im Menü)
geändert werden kann?

1000Dank vorab.

Grüße
Janine

Marcus[IS] · 24. November 2017

Zitat von jamaju: ↑

Ups, ich glaube, ich habe vorher die falsche Art zu Antworten ausgewählt... Hier erscheint mir nämlich die Möglichkeit "Code" anzugeben...

Ich wollte meine vorherige Antwort noch ergänzen:

Kannst du mir auch zufällig sagen, welchen Code man anpassen muss, damit
- die Farbe von Links (auf andere Internetseiten)
- die Farbe von Links auf die letzten Beiträge (rechts im Menü)
geändert werden kann?

1000Dank vorab.

Grüße
Janine
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Für Generelle Linkfarbe ist diese Anweisung zuständig;

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Wenn du für das Widget selber eine andere Farbe für die Links haben möchtest, dann musst du die jeweilige Klasse des Widget ermitteln und entsprechend anweisen.
In deinem Fall wäre das dann wohl

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
In diesem Beispiel habe ich die Farbe der Links auf Schwarz gesetzt.

Willst du die Sache noch erweitern, wenn man zum Beispiel mit der Maus drüber fährt musst du die selbe Klasse nochmals ansprechen (also nochmals den Code Block reinkopieren) und das a:link mit a:hover:#gewünschter Farbwert ersetzen.

jamaju · 24. November 2017

Mensch Markus, du bist mein Held!

Kannst du mir die Fragen aus meinem Post von 23:10 evtl. auch noch beantworten? Dann kann ich mir heute Abend das ganze zusammen anschauen und ausprobieren!

Vielen lieben Dank vorab, Gruß
Janine

SEpp55 · 24. November 2017

Hallo jamaju!

Etwas grundsätzliches - du hast lt. #1 das Plugin Simple Custom CSS installiert. Dieses Plugin ist seit 2 Jahren nicht mehr notwendig und hat daher auch kein Update mehr erhalten.
Ein derart veraltetes Plugin könnte ein erhebliches Sicherheitsrisiko darstellen!
Die Änderungen können seit dieser Zeit im Dashboard unter Design - Customizer - Zusätzliche CSS gemacht werden! LINK

Marcus[IS] · 24. November 2017

Zitat von jamaju: ↑

Mensch Markus, du bist mein Held!

Kannst du mir die Fragen aus meinem Post von 23:10 evtl. auch noch beantworten? Dann kann ich mir heute Abend das ganze zusammen anschauen und ausprobieren!

Vielen lieben Dank vorab, Gruß
Janine
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Ja kann ich.
Obwohl ich diese Lösung ehrlich gesagt nicht selber so wirklich nachvollziehen kann.
Normalerweise ist es ausreichen, wenn die Farben für die Schrift in der Hauptklasse vergeben werden.
Allerdings greift das aus irgend einem Grund bei dir nicht, da irgendwas die Angabe schlichtweg ignoriert.

Aber zum Glück kann man eine CSS mit den Entwicklertools meist bis ins kleineste Detail auseinander nehmen.

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Sollte zum gewünschten Erfolg führen.

SEpp55 · 24. November 2017

Die Schrift in der Navigationsleiste ist fast richtig

}

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Das #fff nun auf deinen Farbwunsch ändern und dann sollte es passen.
Allerdings gibt es Farben für verschiedene Zustände, wie ja Markus schon geschrieben hat.

Die Post-Thumbnails - Maus auf das Thumb - rechte Maustaste drücken - Element untersuchen.

Die class "post-thumbnail" anklicken und rechts werden die Anweisungen angezeigt - hier "width: 107.1%;".

Meine temporären Änderungen kannst du hier sehen.

Rechts die Anweisungen sin für die Zusätzlichen CSS (die sofort übernommen werden). Wenns gefällt speichern nicht vergessen sonst weiter ändern.

SEpp55 · 24. November 2017

Und da ist die nächste Baustelle!

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Das sind die Breackpoints für verschiedene Ausgabegeräte (Tablet, Handy)

Das heißt bei jedem dieser Points wird mit MediaQueries die Darstellung etwas geändert - z.B das Menü auf das Hamburgermenü (bei 768px) umgestellt usw. So ist bei Anpassungen zu überprüfen, ob die Ausgabe in den verschiedenen Bildschirmbreiten gefällt - sonst wieder Anpassen

jamaju · 26. November 2017

Ergebnisse

[FONT=&amp]Hallo ihr zwei,
habe jetzt endlich mal Zeit gefunden, eure Tipps umzusetzen!

Das ist jetzt mein Customizer-CSS, dass ich nun direkt eingetragen habe. Das Plugin habe ich entfernt.

[/FONT]

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
[FONT=&amp]

Nun ist wie gewünscht:
- Menübalken orange
- Menü-Schriftfarbe schwarz
- Linkfarbe in Beiträgen orange
- Linkfarbe 'letzte Beiträge' im Widget schwarz – solange sie nicht geöffnet wurden (s. u.)[/FONT]
[FONT=&amp]- Bilder der Beiträge (post-thumbnails) kleiner

Folgende CSS haben nicht funktioniert, es wurde beim speichern ein Fehler ausgegeben:
[/FONT]

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Die Linkfarbe der letzten Beiträge im Widget sind schwarz, aber wenn ich mal draufgeklickt habe, um sie zu lesen, haben sie wieder die ursprüngliche Farbe rot. Ich gehe davon aus, dass das die verschiedenen Zustände sind, von denen Marcus gesprochen hat? Ich müsste also den Code nochmal ergänzen mit Farbe für gelesen und ungelesen, richtig? Woher weiß ich nun, wie hier die korrekte Bezeichnung lautet?
Gibt es prinzipiell irgendwo im Netz ein CSS-Lexikon, in dem die englischen Begriffe/Befehle aufgelistet sind? So für uns Newbies?

Nun wollte ich mein neues Wissen anwenden und selbst versuchen, ein Objekt zu ändern. Und zwar der Button "Kommentar absenden" hat ebenfalls noch die (alte) Farbe rot. Das soll orange sein. Ich bin über "Objekt untersuchen" rein, habe die Class form-submit gefunden und versucht, einen CSS-Schnipsel zu erstellen:

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Tja, was soll ich sagen: Teilerfolg. Orangefarbener Balken kommt, allerdings zu breit und der Button selbst bleibt immernoch rot... Schriftgröße, fett, Großschreibung etc. würde ich jetzt wissen von den Begriffen her. Aber welcher Begriff ist der richtige für den "Button" - ergo wie bekomme ich hin, dass der Balken nur "Buttongröße" bekommt und das rot weg ist?

Lieben Dank wieder, für eure Antworten!

Viele Grüße
Janine

jamaju · 26. November 2017

Warum müssen manche Antworten vom Moderator freigegeben werden und manche nicht?!

Habe zumindest einen Erfolg zu verbuchen: Farbe des 'Weiterlesen-Links' und der Archivmonate erfolgreich auf schwarz geändert. *freu*

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

SEpp55 · 26. November 2017

Zum @media in #11

Vergleiche die diversen Klammern - da stimmt was nicht mit den geschwungenen Klammern!

[FONT=&amp]@media screen and (min-width: 768px)[/FONT]{
[FONT=&amp].main-navigation ul a {[/FONT]
[FONT=&amp] padding: 0;[/FONT]
[FONT=&amp] color: #000;[/FONT]
[FONT=&amp]}}

Den Button umfärben - Es sollte der "submit" sein, in der style.css ab Zeile 315 (siehe rechter Bereich) sind aber die anderen auch dabei

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
#infinite-handle span {
background-color: #FF6600;
}

die Linkfarben nach den Zuständen sind hie gut erklärt - LINK
[/FONT]

jamaju · 29. November 2017

Hat geklappt!

Hallo Sepp,

super, alle Buttons orange- so soll das sein! Vielen lieben Dank für die Hilfe.

Zum lesen des Links bin ich noch nicht gekommen. Das muss ich mal in einer ruhigen Stunde machen (was bei zwei Kindern garnicht so einfach ist...). Wenn ich wieder fragen habe, würde ich mich einfach wieder melden, wenn ich darf?

Viele Grüße und merci nochmals für die Unterstützung
Janine

SEpp55 · 29. November 2017

Ok, gerne geholfen. In diesem Fall wars ja sehr angenehm - Link vorhanden, super Kommunikation - so sollte es immer sein!
Wenns wieder was zu lösen gibt einfach einen neue Beitrag schreiben oder auch eine PN!

Sepp

Julia2019 · 8. Oktober 2019

Danke hat mir auch sehr gut geholfen!

WPDE.org

Sela-Theme: Fragen zu Anpassungsmöglichkeiten (WP 4.9)

jamaju Member

Marcus[IS] Well-Known Member

jamaju Member

jamaju Member

Marcus[IS] Well-Known Member

jamaju Member

SEpp55 Well-Known Member

Marcus[IS] Well-Known Member

SEpp55 Well-Known Member

SEpp55 Well-Known Member

jamaju Member

jamaju Member

SEpp55 Well-Known Member

jamaju Member

SEpp55 Well-Known Member

Julia2019 New Member

Nützliche Suchen

Sela-Theme: Fragen zu Anpassungsmöglichkeiten (WP 4.9)

jamaju Member

Marcus[IS] Well-Known Member

jamaju Member

jamaju Member

Marcus[IS] Well-Known Member

jamaju Member

SEpp55 Well-Known Member

Marcus[IS] Well-Known Member

SEpp55 Well-Known Member

SEpp55 Well-Known Member

jamaju Member

jamaju Member

SEpp55 Well-Known Member

jamaju Member

SEpp55 Well-Known Member

Julia2019 New Member