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

jamaju

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 http://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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Marcus[IS]

Hi,

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

Code

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

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

@media screen and (min-width: 1180px)
.post-thumbnail {
    margin-left: -55px;
    width: 109.1%;
}

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

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

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]

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

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

Code

a {
    color: #e1122a;
   text-decoration: none;
}

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

aside#recent-posts-2 a:link {
    color: #000;
}

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

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

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]

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

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

@media screen and (min-width: 768px)
.main-navigation ul a {
    padding: 0;
    color: #000;
}

Sollte zum gewünschten Erfolg führen.

SEpp55

Die Schrift in der Navigationsleiste ist fast richtig ;-)

}

Code

.main-navigation a {
    color: #fff;

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

Und da ist die nächste Baustelle!

Code

@media screen and (min-width: 998px)

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

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

[FONT=&amp].main-navigation {[/FONT]
  [FONT=&amp]    background-color: #ff6600;[/FONT]
  [FONT=&amp]   border-bottom: 2px solid rgba(0, 0, 0, 0.15);[/FONT]
  [FONT=&amp]   color: #000000;[/FONT]
  [FONT=&amp]   display: block;[/FONT]
  [FONT=&amp]   padding: 0 1em;[/FONT]
  [FONT=&amp]}[/FONT]
  [FONT=&amp]a {[/FONT]
  [FONT=&amp]    color: #ff6600;[/FONT]
  [FONT=&amp]   text-decoration: none;[/FONT]
  [FONT=&amp]}[/FONT]
  [FONT=&amp]aside#recent-posts-2 a:link {[/FONT]
  [FONT=&amp]    color: #000;[/FONT]
  [FONT=&amp]}[/FONT]
  [FONT=&amp].main-navigation a {[/FONT]
  [FONT=&amp]            color: #000[/FONT]
  [FONT=&amp]}[/FONT]
  [FONT=&amp].post-thumbnail {[/FONT]
  [FONT=&amp]    width: 75%;[/FONT]
  [FONT=&amp]            margin-left: -55px[/FONT]
  [FONT=&amp]}[/FONT]

Alles anzeigen

[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

[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]}[/FONT]

Code

[FONT=&amp]@media screen and (min-width: 998px)[/FONT]

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

.form-submit {background-color: #ff6600}

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

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

.more-link {
    color: #ff6600
}
aside#archives-2 a:link {color: #000
}

SEpp55

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

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

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

Danke hat mir auch sehr gut geholfen!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

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

Jetzt mitmachen!