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

Darstellung von Events

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von sonoptikon, 25. Juli 2019.

Schlagworte:
  1. sonoptikon

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Ich stelle die Frage erst mal hier:

    Ich habe wiederkehrende und einzelne Events. Die wiederkehrenden Events fangen alle vor den einmaligen an, deshalb werden sie grundsätzlich VOR den einmaligen gezeigt.

    Auf der rechten Randleiste sollen aber nur die einmaligen Termine gezeigt werden, deshalb definiere ich meine einmaligen Termine als "hervorgehoben" und zeige rechts eben nur die hervorgehobenen Termine. Zunächst sah das alles ziemlich schreiend blau aus, deshalb habe ich den Hintergrund der hervorgehobenen Termine über den Customizer sanft grau eingefärbt, und das sieht auch schön aus. So möchte ich das haben.

    Und so sieht das erst mal gut aus: https://dev1.dfgnrw.de/

    Nun gibt es verschiedene Gruppen, und die haben wiederkehrende Termine, z.B. Stammtisch oder Lauftreff, sie sollen VOR den einzelnen Events der jeweiligen Gruppe gezeigt werden, und das funktioniert auch.

    Hier ist das Beispiel: https://dev1.dfgnrw.de/bezirksgruppen/castrop-rauxel

    Zunächst sieht man den "Lauftreff" und den "Finntreff" als wiederkehrende Termine, und darunter kommen dann die Einzeltermine, zart grau hinterlegt.

    Aber jetzt habe ich rechts alles wieder in schreiend blau - wie kriege ich das nur wieder weg? Auf der rechten Randleiste sollen natürlich, so wie beim ersten Bild, die Termine auch zart grau hinterlegt sein.

    Auch wenn ich beim Anfangsbild rechts "mehr anzeigen" klicke, wird alles blau.
     
  2. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Indem du dich mit CSS beschaftigst ;) siehe:

     
  3. sonoptikon

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Das ist nicht das Problem, CSS ist mir vertraut, aber ich weiß nicht genau, an wechen Knöpfen ich drehen muss. - Genau das habe ich gemacht: Design->Customizer. Allerdings scheine ich noch nicht alles erwischt zu haben. Allerdings möchte ich das Video in ganzer Größe sehen. Ah - jetzt habe ich's gefunden ...
    Danke erst mal. Ich schau mir's an.
     
  4. sonoptikon

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Ich war der Meinung, dass ich das mit Bordmitteln von WordPress einstellen kann. das Video zeigt jedoch recht einfach, was man mit extra-CSS tun kann. Aber das hilft mir in diesem Fall nicht.

    Die falsche Darstellung tritt generell in der rechten Randleiste auf!

    Ich zeig mal ausführlich, was ich meine:

    So ist es richtig (Die einmaligen Termine sind grau hinterlegt): https://dev1.dfgnrw.de/

    Quellcode:
    <div class="type-tribe_events post-546 tribe-clearfix tribe-events-category-d tribe-events-category-versammlung tribe-events-venue-545 tribe-events-organizer-539 tribe-event-featured">
    [...]
    <a href="https://dev1.dfgnrw.de/event/jahreshauptversammlung-der-dfg-duesseldorf/" rel="bookmark">Jahreshauptversammlung der DFG Düsseldorf</a>[...]
    </div>

    ------------------------

    So ist es falsch: (einmalige Termine blau hinterlegt, in der Mitte werden die Bochumer Termine korrekt angezeigt): https://dev1.dfgnrw.de/bezirksgruppen/bochum-witten

    Quellcode:
    <h2 class="tribe-events-title">
    <div class="type-tribe_events post-546 tribe-clearfix tribe-events-category-d tribe-events-category-versammlung tribe-events-venue-545 tribe-events-organizer-539 tribe-event-featured">
    [...]
    </div>
    <a href="https://dev1.dfgnrw.de/event/jahreshauptversammlung-der-dfg-duesseldorf/" rel="bookmark">Jahreshauptversammlung der DFG Düsseldorf</a>
    </h2>
    [...]

    -----------------------------------

    Beide Quellcodes sind gleich, und doch werden sie verschieden dargestellt (ich kann auch die kompletten Codes posten, wenn das hilft). Die Klassen ist bereits spezialisiert auf die beiden Kategorien: "Versammlung" und "D" (für Düsseldorf. So einfach wie im Video scheint es nicht zu sein.

    Bei den Veranstaltungen, die in der Mitte unten dargestellt werden, gibt es naturgemäß keinen Vergleich, sie sollten auch grau hinterlegt sein,und das ist hier richtig. Es ist also nur die Darstellung in der Mitte, und zwar nur in den Menüs "Bezirksgruppen" und "Partner & Freunde", bei den anderen Menüs it es richtig, aber da tauche die Termine auch nur in der rechten Randleiste auf. Das Problem ist also ziemlich klar eingrenzbar:
    Wenn die Termine nur in der Randleiste auftauchen, sind sie grau, wenn sie auch in der Mitte auftauchen, sind sie da grau, aber in der Randleiste grün.

    Ich habe jedenfalls einmal im Customizer festgelegt, dass mit zartem grau hinterlegt werden soll - vorher war alles blau hinterlegt, jetzt bekomme ich dieses merkwürdige Ergebnis, einmal grau, einmal blau.
     
    #4 sonoptikon, 27. Juli 2019
    Zuletzt bearbeitet: 27. Juli 2019
  5. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Soviel zu:
    und

    oder gehts doch?? ;)



    siehe auch LINK
     
  6. sonoptikon

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Nein - ich wüsste nicht, wo ich anfassen soll. Laut Video muss ich einfach ein CSS-Schnipsel machen, das die betroffene Klasse überschreibt. Ich habe bereits ein Schnipselchen zu einem anderen Thema erfolgreich erstellt. Aber ich wüsste in diesem Fall überhaupt nicht, welche Klasse ich anfassen soll. Aber wenn du es weißt, dann sag es mir doch einfach. Ich habe oben die Beispiele gepostet und kann darin keinen Ansatzpunkt erkennen. Es geht um die hervorgehobenen Events auf dem rechten Sidebar. Ich habe ja einmal erfolgreich mit dem Customizer gearbeitet, komme aber nicht weiter.
     
  7. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    Grundsätzlich ist das Forum HILFE ZUR SELBSTHILFE!!!
    Im Video ist alles ab 1:35 was du brauchst!

    Der Weg dahin - mit dem Firefox-Browser.
    • bei 0:19 Cursor auf das Datum, rechte Maustaste drücken - Element untersuchen drücken. Der Browser-Inspektor offnet sich.
      Der Inspektor kann auch 2-teilig sein.
    • 0:23 Blau unterlegt das angewählte Element.
    • Im mittleren Abschnitt (CSS-Bereich) werden die Klassen, Selektoren mit dazugehörigen Anweisungen angezeigt. Es ist auch ersichtlich, wo diese CSS-Code geschrieben steht.
    • 0:31 Der Selektor color ist für die Schriftfarbe zuständig, was hsla bedeutet weiß Herr Google! Der Kreis vor hsla zeigt die eingestellte Farbe, dort stellst du die gewünschte Farbe ein und das Ergebnis sollte in Echtzeit sichtbar werden. Wenn das nicht so ist, stimmt ggf. der Selektor nicht, oder es wird diese Anweisung durch eine andere überschrieben! Dann heißt es weitersuchen. Diese Änderungen sind nur temporär und um die richtige CSS-Anweisung zu finden! Mit einem Neuladen der Seite bei 1:15 sind diese Änderungen wieder Geschichte und alles ist wie zuvor.
    • Wenn es aber passt kannst du das in die Zusätzlichen CSS übernehmen. Hier kann noch sein, dass die zuvor getestete Änderung NICHT klappt. Dann kannst du noch die zitierte Holzhammer-Methode mit - !important - versuchen
    Übrigens, wenn du die geänderten CSS-Anweisungen von der Castrop-Rauxeler Seite nimmst und die relevanten Werte mit !important versiehst klappt es zumindest im Firefox-Entwicklertool auch!!!
     
  8. sonoptikon

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Vielen Dank für diese auführliche Darstellung. Ich muss es ja auch verstehen.

    Ich habe versucht, alles nachzuvollziehen, und ich habe jetzt folgendes gemacht:

    Ich habe aus der "Unterschung" die relevanten Anweisungen hrausgesucht und mit der richtigen Farbe versehen, und dann folgendes zusätzliche CSS eingefügt:

    /* ----------------------------
    * Absichern, dass die Events nicht blau, sondern grau hinteregt werden
    * -------------------------- */
    .tribe-events-adv-list-widget .tribe-event-featured .tribe-mini-calendar-event, .tribe-mini-calendar-list-wrapper .tribe-event-featured .tribe-mini-calendar-event {
    background: #f7f7f7 !important;
    border: 0;
    margin-bottom: 0;
    padding-bottom: 16px;

    }
    ... und dann natürlich "Veröffentlichen"

    rechts neben dem Customizer ist meine Seite von Castrop-Rauxel - und übrigens sind jetzt alle Menüs rot hinterlegt, aber muss so so sein. Wenn ich jetzt anklicke: "Seite ansehen", dann habe ich genau das Ergebnis, das ich haben will.

    Dann habe ich (mal gucken) auf Seite erneut laden geklickt - ich habe immer noch das Ergebnis!

    Jetzt habe ich verschiedene Seiten ausprobiert - gut! Es ist der mindestens 5. Versuch, und immer hatte ich am Ende immer. Aber jetzt scheint es zu klappen! Ganz neu aufsetzen, Firefox beenden ... (natürlich dies hier nicht) - klappt.

    Ich denke, in der gleichen Weise kann ich jetzt auch die etwas blassen Schriften bearbeiten.

    Ein großer Schritt nach vorn! Ich ha'bs noch nicht zu 100% verstanden. Auf jeden Fall vielen Dank für die detaillierte Anleitung
     
  9. sonoptikon

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Noch nicht!

    Ich habe jetzt im Bearbeitungsmodus mit dem Customizer genau das Ergebnis, das ich habe möchte, aber wenn ich das in einem zweiten Reiter in Firefox ansehe, sehe ich zwar den schönen grauen Hintergrund, aber außer der Überschrift sind keine Angaben mehr zu sehen.
     
  10. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    In den Zusätzlichen CSS ist ja auch nur die Hintergrundfarbe geändert. Nun kommen die nächsten Elemente, wie Datum mit Uhrzeit und die Örtlichkeit.
    Wenn du einen Code postest, bitte das + Symbol (Einfügen..) und </> Code verwenden!
    In den Zusätzlichen CSS reicht es, wenn du die Zeilen mit Änderungen hinein schreibst, also -

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Es werden sonst alle Zeilen ein zweites Mal abgearbeitet, bei den Zeilen ohne Änderungen ist das nur Rechenleistung ohne Sinn.

    Nun noch die Schrift:

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

    sonoptikon Active Member

    Registriert seit:
    14. Juli 2019
    Beiträge:
    39
    Zustimmungen:
    0
    Verstehe ... das habe ich vermutet. Da die Schrift grsu ist, kann man sie natürlich nicht sehen ...
    hat geklappt: Punkt am Anfang nicht vergessen, Kommas dazwischen, und ...!important.

    So, jetzt habe ich noch ein bisschen rumgeCSSt. Was ich auch erkennen kann: Die Eigenschaften, die ich geändert haben, werden im Untersuchungsfenster eingetragen, und die ursprünglichen sind durchgestrichen.

    Nun ist die Seite erst mal ziemlich genau so, wie ich sie haben will.

    Danke für diesen kleinen, aber exzellenten Workshop :)
     
    #11 sonoptikon, 28. Juli 2019
    Zuletzt bearbeitet: 28. Juli 2019
  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