Fehler: Seit Contao-Update Anzeigefehler bei MainNav & Videos

Sid's Avatar

Sid

21 Mar, 2019 07:56 PM

Produkt: Tao Contao
Contao-Version: 4.4.35

Hallo, seit dem Update auf Contao 4.4 wird mir die Navigation, sowie die eingebundenen Videos fehlerhaft angezeigt. (siehe Bild) In der Mobile-Version habe ich durch die fehlerhafte Videoanzeige und die verschobene Video-Nav breiten Balken auf der rechten Seite (Siehe Bild). Woran liegt das und wie lässt sich der Anzeigefehler wieder beheben?

  1. Support Staff 1 Posted by RockSolid Theme... on 22 Mar, 2019 09:26 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Das Navigationsproblem liegt daran, dass der aktive Menüpunkt seit Contao 4 mit einem <strong>-Tag ausgezeichnet wird. Der Selektor ist also um die Zeile .main-navigation > ul > li > strong zu erweitern. Wenn Sie diverse Anpassungen am Stylesheet vorgenommen zu haben, würde es sich empfehlen die Änderung direkt vorzunehmen. Ansonsten können Sie auch ein Theme-Update durchführen um die CSS-Anpassungen für Contao 4 zu erhalten.

    Das Problem mit dem Video konnten wir nicht direkt nachvollziehen. Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  2. 2 Posted by Sid on 22 Mar, 2019 06:02 PM

    Sid's Avatar

    Hallo und danke für die schnelle Rückmeldung. Hier der Link zur Seite: [Link entfernt]. Danke

  3. Support Staff 3 Posted by RockSolid Theme... on 25 Mar, 2019 08:13 AM

    RockSolid Themes's Avatar

    Die fehlerhafte Video-Anzeige können Sie korrigieren indem Sie die CSS-Klasse border aus dem Video-Inhaltselement entfernen.

    Den Fehler in der mobilen Navigation konnten wir nicht reproduzieren, welchen mobilen Browser setzen Sie ein?

  4. 4 Posted by Sid on 26 Mar, 2019 10:45 AM

    Sid's Avatar

    Das Problem in der Mobile-Ansicht konnte ich bereits beheben. Die Css-Klasse zu entfernen löst nicht das eigentliche Problem (dieser Rahmen ist bei allen Videos und Bildern gewollt ). Vor dem Update befand sich das Video innerhalb des Rahmens ebenso wie das darüber liegende Bild und besaß die gleichen Abmessungen. Seit dem Update ragt das Video allerdings über den Rahmen hinaus und schließt nicht mehr bündig mit dem darüber liegenden Bild ab.

  5. Support Staff 5 Posted by RockSolid Theme... on 26 Mar, 2019 11:42 AM

    RockSolid Themes's Avatar

    Die CSS-Klasse border die den Darstellungsfehler verursacht stammt nicht aus dem Theme. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Fügen Sie bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein, damit sollte sich das Problem beheben lassen:

    .ce_player.border {
        box-sizing: content-box;
    }
    .border > .mejs__video {
        margin: 0;
    }
    
  6. 6 Posted by Sid on 27 Mar, 2019 12:20 AM

    Sid's Avatar

    Perfekt, hat funktioniert, Danke

  7. 7 Posted by contact on 03 Jun, 2019 08:42 AM

    contact's Avatar

    ich plage mich ebenfalls mit dem TAO Menü unter Contao 4.4 herum. Mit der Information oben konnte ich schon einige Fortschritte erreichen, aber die Platzierung ist oberhalb der nichtaktiven Menüpunkte. Mit margin und padding konnte ich keine Erfolge verzeichnen.

    http://test.xl-page.de/downloads.html

  8. Support Staff 8 Posted by RockSolid Theme... on 03 Jun, 2019 11:46 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Handelt es sich um eine neue Installation, oder um ein Update von Contao 3.X?

    Die Seite http://test.xl-page.de/downloads.html konnte in unserem Test leider nicht geöffnet werden, der Webserver ist anscheinend nicht erreichbar.

  9. 9 Posted by contact on 03 Jun, 2019 12:20 PM

    contact's Avatar

    Sorry, die Website wurde gerade auf einen anderen Server verschoben. Jetzt sollte es wieder gehen.

    Es handelt sich um eine Neuinstallation von Contao 4.4. Datenbank und notwendige Dateien (z.B. Templates) wurden aus 3.5. übernommen. Anschließend Installtool aufgegrufen. Es läuft Alles sehr gut. Außer der Darstellung des Menüs ist mir noch nicht aufgefallen.

  10. Support Staff 10 Posted by RockSolid Theme... on 04 Jun, 2019 07:15 AM

    RockSolid Themes's Avatar

    Das Navigationsproblem liegt daran, dass der aktive Menüpunkt seit Contao 4 mit einem <strong>-Tag ausgezeichnet wird. Der Selektor ist also um die Zeile .main-navigation > ul > li > strong zu erweitern. Wenn Sie diverse Anpassungen am Stylesheet vorgenommen zu haben, würde es sich empfehlen die Änderung direkt vorzunehmen. Ansonsten können Sie auch ein Theme-Update durchführen um die CSS-Anpassungen für Contao 4 zu erhalten.

  11. 11 Posted by contact on 04 Jun, 2019 07:34 AM

    contact's Avatar

    Wie Sie auf der Demopage sehen können, haben wir das - wie oben bereits erwähnt - durchgeführt. Der Menüpunkt wird nicht mehr fett dargestellt und auch die aktive Farbe wird berücksichtigt. Es geht nur mehr darum, den Menüpunkt auf die gleiche Zeilenhöhe zu bringen.

  12. Support Staff 12 Posted by RockSolid Theme... on 04 Jun, 2019 07:49 AM

    RockSolid Themes's Avatar

    Bearbeiten Sie bitte die Datei files/tao/css/main.css und fügen Sie an der Stelle an der folgende Zeile vorkommt

    .main-navigation > ul > li > a,
    

    zusätzlich diese Zeile ein:

    .main-navigation > ul > li > strong,
    

    dasselbe gilt für die Zeile

    .main-navigation > ul > li > a:before,
    

    welche mit dieser ergänzt werden muss:

    .main-navigation > ul > li > strong:before,
    

    sowie

    .main-navigation > ul > li > a:after,
    

    mit folgender Zeile:

    .main-navigation > ul > li > strong:after
    

    Damit der Text nicht fett dargestellt wird können Sie folgenden CSS-Code einsetzen:

    .main-navigation > ul > li > strong {
        font-weight: inherit;
    }
    
  13. 13 Posted by contact on 04 Jun, 2019 08:03 AM

    contact's Avatar

    und wie bekomme ich die aktive Seite auf die gleiche Zeile wie die inaktiven Seiten im Menü? Wie schon beschrieben ist font-weight nicht mehr das Problem.

  14. Support Staff 14 Posted by RockSolid Theme... on 04 Jun, 2019 01:33 PM

    RockSolid Themes's Avatar

    und wie bekomme ich die aktive Seite auf die gleiche Zeile wie die inaktiven Seiten im Menü?

    Indem Sie wie beschrieben die Datei files/tao/css/main.css anpassen.

    Dadurch erhalten die <strong>-Elemente dieselben Styles wie die Links und werden somit auf der richtigen Position dargestellt.

  15. 15 Posted by contact on 05 Jun, 2019 07:14 AM

    contact's Avatar

    Ich konnte das gestern noch entsprechend Ihrem Vorschlag beheben. Zuvor hatte ich die Änderungen in der custom.css über den Eintrag .main-navigation > ul > li > strong gemacht.

  16. 16 Posted by Martin on 07 Jun, 2019 03:17 PM

    Martin's Avatar

    ich hatte dasselbe Problem mit dem Menü und auch via Änderung im main.css gelöst.
    sobald ich jedoch den Themeassistent danach benutze überschreibt dieser die main.css.
    auch wenn ich update passiert dasselbe sobald ich den Theme Asssisten benutze.

    ist oder wird dies im Theme Assistent nicht berücksichtigt? oder in Zukunft?
    also dass die Main.css vom ThemAssistent mit einer aktuellen main.css (wo dieser "Fehler" korrigiert ist) überschreibt?

    vielen Dank im Vorraus - Martin

  17. 17 Posted by contact on 08 Jun, 2019 05:44 AM

    contact's Avatar

    Es würde meiner Meinung nach auch helfen, die betreffenden Blöcke komplett in die costum.css zu übernehmen. Diese wird vom Themeassistent nicht überschrieben.

  18. Support Staff 18 Posted by RockSolid Theme... on 11 Jun, 2019 06:59 AM

    RockSolid Themes's Avatar

    sobald ich jedoch den Themeassistent danach benutze überschreibt dieser die main.css.

    Sie können die Anpassungen zusätzlich in der Datei main.css.base durchführen, diese wird vom Theme-Assistant benutzt um die main.css zu generieren.

  19. 19 Posted by Martin on 11 Jun, 2019 09:51 AM

    Martin's Avatar

    Hallo

    Super vielen Dank - Hat bestens geklappt

    Jetzt hab ich leider noch eines: der aktive Menüpunkt wird auch nicht in der Farbe wie im Themassistent angegeben dargestellt. Hover funktioniert.
    Vielleicht könnt ihr mir da auch kurz auf die Sprünge helfen?

    lieben Gruß - Martin

  20. 20 Posted by Martin on 11 Jun, 2019 10:11 AM

    Martin's Avatar

    teilweise gelöst.
    einfach bei
    .main-navigation > ul > li > strong {
        font-weight: inherit;
    }
    eine color hinzugefügt

    problem mit Themeassistent bleibt natürlich- wäre schöner wenn er verwendbar wäre
    lg Martin

  21. 21 Posted by Martin on 11 Jun, 2019 10:44 AM

    Martin's Avatar

    gefunden

    .main-navigation > ul > li > strong.active,

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Unbenannt-1.jpg 128 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac