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

Bitte um CSS-Hilfestellung (Bildzentrierung)

Dieses Thema im Forum "Design" wurde erstellt von zonebattler, 7. Dezember 2019.

Schlagworte:
  1. zonebattler

    zonebattler Well-Known Member

    Registriert seit:
    23. Februar 2008
    Beiträge:
    369
    Zustimmungen:
    20
    Hallo zusammen,

    auf der Website unseres StadtWiki-Fördervereins möchte ich ein Quiz-Plugin installieren. Nach einigem Ausprobieren habe ich mich für "Quiz Cat" entschieden, welches auf dieser meiner Testsite (mit dem "Generate Press"-Theme) ganz wunderbar "out of the box" funktioniert:

    https://www.klein-aber-fein.de/labor/pruefstand/

    Leider schaut die Darstellung auf unserer Vereinsseite (die seit vielen Jahren mit einem farblich angepaßten "TwentyTen"-Standard-Theme läuft) nimmer ganz so schick aus, siehe die temporäre Demo ganz unten auf der Seite

    https://www.fuerthwiki.de/verein/datenschutz/

    Funktional ist alles OK, aber das Auge ißt ja mit: Insbesondere ist es störend und unelegant, daß die Fotos am Start und bei den einzelnen Frageseiten nicht zentriert erscheinen, sondern linksbündig (unabhängig von der Ausrichtungsoption beim Einbinden des Fotos aus der Mediathek).

    Überdies fehlt bei den Fragen jeglicher Abstand zwischen der Bildunterkante und der ersten Antwortoption. Das liegt bestimmt an dem nicht vorhandenen Schattenrand rings herum. Ein solcher wäre schön, aber mit einem normalen Leerraum unter einem unschattierten Foto könnte ich auch gut leben...

    Leider kann ich aber mit den Diagnose-Tools meines Browsers nicht wirklich gut umgehen und auch meine CSS-Kenntnisse sind eher rudimentär. Ich bin freilich einigermaßen hoffnungsfroh, daß mir ein(e) Kundige(r) hier mit ein, zwei kleinen CSS-Schnipseln für den Theme-Customizer ("Zusätzliches CSS") einen einfachen Ausweg aus dem doppelten Darstellungs-Dilemma zeigen kann.

    Ich bedanke mich schon mal ganz herzlich für zielführende Hinweise!

    Beste Grüße,
    Ralph
     
    #1 zonebattler, 7. Dezember 2019
    Zuletzt bearbeitet: 7. Dezember 2019
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Versuche mal nachfolgenden Code im Dashboard unter Design > Customizer > Zusätzliche CSS einzugeben:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ggf auf unerwünschte Nebeneffekte prüfen ;)
     
  3. zonebattler

    zonebattler Well-Known Member

    Registriert seit:
    23. Februar 2008
    Beiträge:
    369
    Zustimmungen:
    20
    Du bist mein Held! Funktioniert auf Anhieb korrekt und Nebenwirkungen/Kollateralschäden habe ich keine entdecken können...

    Da ich dank Deiner Hilfe jetzt die korrekte CSS-Klasse kenne, habe ich mittels

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    auch noch einen schönen Schattenrand um die nunmehr korrekt zentrierten Fotos generieren können. Dennoch klebt die erste Antwortoption bei jeder Frage weiterhin direkt an der Unterkante des Fotos. Gibt's da noch eine Möglichkeit, einen Abstand(shalter) unter dem Bild einzufügen?

    Merci vielmals,
    Ralph
     
  4. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Ok, dann ändere den Abstand (margin) auf

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

    zonebattler Well-Known Member

    Registriert seit:
    23. Februar 2008
    Beiträge:
    369
    Zustimmungen:
    20
    Allerhand: Kaum macht man's richtig, schon funktioniert's! ;)

    Ganz herzlichen Dank für die schnelle und kompetente Unterstützung und noch ein schönes Adventswochenende!

    Beste Grüße,
    Ralph
     
  6. zonebattler

    zonebattler Well-Known Member

    Registriert seit:
    23. Februar 2008
    Beiträge:
    369
    Zustimmungen:
    20
    Argh, ich habe doch eine höchst unerwünschte Nebenwirkung gefunden: Mit

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    wird zwar alles wie gewünscht dargestellt, aber leider nur in der Desktop-Ansicht. In der Mobil-Ansicht - die ich dem uralten, nicht-responsiven Theme mit Hilfe des Plugins "WPtouch" aufgepfropft habe - werden jetzt die runden Preview-Artikelthumbnails an den linken Rand geschoben und die Permalinks rücken ebenfalls auf. Überdies gibt's in den Artikeln selbst keine Abstände mehr zum Headerbild... :(

    Ich habe einen Teilerfolg erzielt, indem ich im Customizer auf das Mobil-Theme umgestellt habe und dort ein "CSS-Gegengift" eingegeben habe, um wieder zum ursprünglichen Aussehen zurückzukommen. Funktioniert auch prinzipiell, aber damit zerschieße ich dann logischerweise die mobile Ansicht des Wuiz-Plugins: Alles auf einmal ist so nicht zu haben!

    Kann man denn nicht den gewünschten Effekt nebenwirkungsfrei erzielen, wenn man mit dem obigen CSS-Code nicht die übergeordnete Klasse (?) #content img adressiert, sondern vielmehr gezielt nur die Quiz-Bilder bzw. deren spezifische Klasse (?) anspricht, um die es ja ausschließlich geht, also sowas wie ".fca_qc_quiz_description_img"?

    Das wiederum habe ich versucht, aber natürlich mangels grundlegenden Durchblicks nicht hinbekommen. Dürfte ich daher nochmals um Rat ersuchen?

    Dank & Gruß,
    Ralph
     
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    So, ich habe nun den Selektor auf Quiz-ID geändert. Damit sollte die CSS Regel nur mehr dafür gelten.
    Da ich zu Beginn auch auf die Responsivität aus Unwissenheit nicht geachtet hatte, habe ich damals auch mit einem Plugin das nachzuholen versucht, weil das Theme noch nicht dafür vorgesehen war. Das Ergebnis war für mich nicht das, was ich mir wünschte und damit begann die Suche nach einen für mich geeignetem Theme. Die gibst ja wie Sand am Meer. Man muß sich halt einmal die eine oder andere Stunde Zeit nehmen ...

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

    zonebattler Well-Known Member

    Registriert seit:
    23. Februar 2008
    Beiträge:
    369
    Zustimmungen:
    20
    Im Prinzip stimme ich Dir zu und ich fange neue Projekte auch nur noch mit von Haus aus responsiven Themes an. Aber ich kann nicht alle meine "Altlasten" erneuern, da hängt viel dran (und viele handgeschnitzte Spezialtricks drin), was nicht mal so eben portierbar ist. Bei vor langer Zeit beauftragten (und längst bezahlten) Sites ginge der Aufwand überdies auf die eigene Kappe. Und ganz ehrlich: Mit WPtouch bekommt man durchaus eine ganz schicke Pseudo-Responsivität hin, die auch auf den zweiten Bilck wenig zu wünschen übrig läßt...

    Melde mich gleich nochmal mit dem Ergebnis des neuen Tests...

    Beste Grüße,
    Ralph
     
    #8 zonebattler, 8. Dezember 2019
    Zuletzt bearbeitet: 8. Dezember 2019
  9. zonebattler

    zonebattler Well-Known Member

    Registriert seit:
    23. Februar 2008
    Beiträge:
    369
    Zustimmungen:
    20
    Sodele, erwartungsgemäß killt die nunmehr punktgenau fokussierte Strahlentherapie das Problem, ohne unbetroffene Organe in Mitleidenschaft zu ziehen. Perfekt! Du hast schon recht mit Deiner Signatur: nothing is as easy as it looks.

    Ich danke einmal mehr ganz herzlich, ziehe meinen nicht vorhandenen Hut in Anerkennung Deiner Expertise und wünsche einen gemütlichen zweiten Adventssonntag!

    Beste Grüße,
    Ralph
     
  10. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Also solw down - das ist, seit ich Wordpress kenne, mein Hobby. Bei Designfragen fühle ich mich wohl, wenns um PHP oder wirklichen Code geht stehe ich auch an, zumindest mit dem Helfen können.
    Wenns bei WP wieder einmal wo klemmt - das Forum ist immer da ;)
     
  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