1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

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

Dieses Thema im Forum "Design" wurde erstellt von jamaju, 23. November 2017.

Schlagworte:
  1. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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
     
  2. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.445
    Zustimmungen:
    62
    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.
     
    #2 Marcus[IS], 23. November 2017
    Zuletzt bearbeitet: 23. November 2017
  3. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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
     
  4. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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
     
  5. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.445
    Zustimmungen:
    62
    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.
     
  6. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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
     
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.571
    Zustimmungen:
    172
    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
     
    Julia2019 gefällt das.
  8. Marcus[IS]

    Marcus[IS] Well-Known Member

    Registriert seit:
    23. August 2009
    Beiträge:
    5.445
    Zustimmungen:
    62
    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.
     
  9. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.571
    Zustimmungen:
    172
    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.
    sela-theme01.jpg
    Die class "post-thumbnail" anklicken und rechts werden die Anweisungen angezeigt - hier "width: 107.1%;".

    Meine temporären Änderungen kannst du hier sehen.
    sela-theme02.jpg
    Rechts die Anweisungen sin für die Zusätzlichen CSS (die sofort übernommen werden). Wenns gefällt speichern nicht vergessen sonst weiter ändern.
     
  10. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.571
    Zustimmungen:
    172
    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 ;)
     
  11. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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
     
  12. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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!
     
    #12 jamaju, 26. November 2017
    Zuletzt bearbeitet: 26. November 2017
  13. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.571
    Zustimmungen:
    172
    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]
     
    #13 SEpp55, 26. November 2017
    Zuletzt bearbeitet: 26. November 2017
  14. jamaju

    jamaju Member

    Registriert seit:
    23. November 2017
    Beiträge:
    7
    Zustimmungen:
    0
    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
     
  15. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    1.571
    Zustimmungen:
    172
    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
     
  16. Julia2019

    Julia2019 New Member

    Registriert seit:
    7. Oktober 2019
    Beiträge:
    1
    Zustimmungen:
    0
    Danke hat mir auch sehr gut geholfen!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden