Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Navigation Template anpassen

  1. #1
    Contao-Nutzer
    Registriert seit
    06.08.2013.
    Beiträge
    16

    Standard Navigation Template anpassen

    Hallo zusammen,

    habe ein Problem wegen mangelnder PHP-Kenntnisse mit der Anpassung des Standard Navigation-Templates.
    Und zwar möchte ich zwischen den einzelnen Navigations-Elementen jeweils eine Grafik einsetzen. Am Anfang ist eine andere Grafik als zwischen den einzelnen Items und am Ende soll ebenfalls eine andere Grafik platziert werden. Das funktioniert auch fast ohne Probleme. Ich bekomme es nur nicht hin, dass am Ende die andere Grafik angezeigt wird, denn dazu fehlen mir schlichtweg die PHP-Kenntnisse.

    Mein modifiziertes Template-Skript sieht wie folgt aus:

    PHP-Code:
    <ul class="<?php echo $this->level?>">
      <img src="files/Bilder/menu-backgr-links.png">
      <?php foreach ($this->items as $item): ?>    
        <?php if ($item['isActive']): ?>       
          <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
          <img src="files/Bilder/menu-backgr-beides.png">
        <?php else: ?>
          <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
          <?php if ($item['isLast']): ?>
              <img src="files/Bilder/menu-backgr-rechts.png">
          <?php else: ?>
              <img src="files/Bilder/menu-backgr-beides.png">
          <?php endif; ?>
        <?php endif; ?>
      <?php endforeach; ?>
    </ul>
    Das Problem ist die Zeile "<?php if ($item['isLast']): ?>", denn hierfür kenne ich nicht den richtigen Syntax (Das "isLast" habe ich einfach mal aus den Fingern gesogen...). Ich möchte die Anweisung geben, wenn das Element das letzte ist, dann nimm als letzte Grafik "menu-backgr-rechts.png" und nicht die Grafik "menu-backgr-beides.png", die zwischen den Elementen eingesetzt wird.

    Kann mir einer weiterhelfen, wie ich das korrekt hinbekomme?

    Vielen Dank im Vorraus!

  2. #2
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Lösche das komplette Template und versuche es mit CSS, denn dafür ist es da.

    Viele Grüße
    Patrick

    Wenn ich euch helfen konnte könnt ihr euch gerne mal
    meine Amazon Wunschliste anschauen. Dankeschön.

  3. #3
    AG Pressearbeit
    Community-Moderator
    Buchautor 'Contao für Webdesigner'
    Avatar von planepix
    Registriert seit
    05.06.2009.
    Ort
    Stuttgart
    Beiträge
    6.464
    Partner-ID
    107
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo seven80,

    wenn du für das erste li-Element eine Grafik benötigst und für die li-Elemente dawischen eine gleiche Grafik und für das letzte li-Element eine, kannst du das alles ohne Anpassung des Templates nur mit CSS machen.

    Hintergrundgrafiken einsetzen und Contao vergibt die Klasse li.first, li und li.last
    ---------------------------------
    Beste Grüße planepix
    Contao für Webdesigner (Website), Twitter: @contaowebdesign
    weitzeldesign
    Contao-Sprechstunde
    Contao Schulungen: https://www.weitzeldesign.com/cms-co...chulungen.html
    Contao Jahrbuch: www.contao-jahrbuch.de
    Contao Agenturtag: www.contao-agenturtag.de
    Contao Stammtisch Stuttgart: www.contao-stammtisch-stuttgart.de
    Contao 4 Erfahrungen als Gitbook: https://app.gitbook.com/@planepix/s/...-mit-contao-4/
    Contao 4 & Manager Hosterhinweise: https://github.com/contao/contao-manager/wiki

    Schon wieder ein Update?
    Glücklich sind die, die den Wert erkennen – und wertschätzen.
    „Muss man machen wie beim Zahnarzt. Der bestraft einen auch mit hohen Rechnungen wenn man die Pflege vernachlässigt.”

  4. #4
    Contao-Nutzer
    Registriert seit
    06.08.2013.
    Beiträge
    16

    Standard

    Naja, in die Richtung CSS/Hintergrundgrafik habe ich auch schon gedacht und getestet. Aber das Problem ist ein wenig komplexer mit der Darstellung. Ich habe mal einen Screenshot von dem Menu angehangen.

    Da es sich um ein responsive Design handelt, wird die Schriftgröße der einzelnen Menüpunkte angepasst. Damit zusammenhängend sollen sich auch die "Tab-Reiter-Grafiken" in der Breite dem jeweiligen Text anpassen. Dazu ist der Mittelteil eines Tab-Reiters (der Bereich hinter dem Text) per CSS erstellt und wiederholt sich entsprechend der Breite. Die Abschrägungen des Tab-Reiters sind wie anfangs beschrieben über das Template zwischen den Menü-Elementen als Grafik eingefügt und fix in der Breite. Wenn ich diese also per CSS einfüge werden die beschnitten bzw. verzerrt. Daher bin ich ja auf die Lösung mit dem Template gekommen...
    Angehängte Grafiken Angehängte Grafiken

  5. #5
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Hatte vorhin vergessen dich im Forum willkommen zu heißen was ich hiermit nachhole.

    Dein Problem ist ein Darstellungsproblem. Sollte also trotzdem mit CSS gelöst werden.
    Ab IE9 kann dir CSS background-size für deine responsive Seite weiterhelfen. Meiner Meinung nach sollte das vorhanden sein, daher würde ich das so machen.

    Du kannst einen grafisch weniger schönen Fallback hinterlegen (z.B. Einfache Reiter ohne Grafiken).
    Das Fallback-Menu wird dann nur eingeblendet wenn Modernizr (http://modernizr.com/) meldet dass background-size nicht vorhanden ist.

    Wenn ich euch helfen konnte könnt ihr euch gerne mal
    meine Amazon Wunschliste anschauen. Dankeschön.

  6. #6
    Contao-Nutzer
    Registriert seit
    06.08.2013.
    Beiträge
    16

    Beitrag

    Hab jetzt einige Zeit mit euren Lösungsvorschlägen per CSS ausprobiert und getestet. Vielleicht gibt es auch über diesen Weg eine Lösung (-> Viele Wege führen nach Rom), aber ich hab mich dann doch auf die einfachere und m.E. unproblematischere Lösung in Bezug auf Browserkompatibiltät per PHP konzentriert.

    Das korrigierte Template lautet dann:

    PHP-Code:
    <ul class="<?php echo $this->level?>">
      <img src="files/eikel/Bilder/menu-backgr-links.png">
      <?php foreach ($this->items as $item): ?>    
        <?php if ($item['isActive']): ?>       
          <li class="<?php echo $item['class']; ?>"><span class="<?php echo $item['class']; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
          <img src="files/eikel/Bilder/menu-backgr-beides.png">
        <?php else: ?>
          <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
          <?php if ($item['class'] == "sibling last"): ?>
              <img src="files/eikel/Bilder/menu-backgr-rechts.png">
          <?php else: ?>
              <img src="files/eikel/Bilder/menu-backgr-beides.png">
          <?php endif; ?>
        <?php endif; ?>
      <?php endforeach; ?>
    </ul>
    War also in der Tat nur ein kleiner Fehler in einer Zeile, der mich dann etliche Stunden gekostet hat!

    Dennoch Danke für die Hilfsansätze.

  7. #7
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von seven80 Beitrag anzeigen
    Hab jetzt einige Zeit mit euren Lösungsvorschlägen per CSS ausprobiert und getestet.
    Wo hat es gehakt?

    Zitat Zitat von seven80 Beitrag anzeigen
    Vielleicht gibt es auch über diesen Weg eine Lösung (-> Viele Wege führen nach Rom)
    In diesem Fall nicht. Dein Code ist absolut nicht valide.

    Wenn ich euch helfen konnte könnt ihr euch gerne mal
    meine Amazon Wunschliste anschauen. Dankeschön.

  8. #8
    Contao-Fan Avatar von MacPix
    Registriert seit
    11.07.2011.
    Ort
    Zürich
    Beiträge
    552

    Standard Anpssung Navigation

    Hallo
    ich brauche ein zusätzliches Div vor dem Level 2 ul .. kann man dis in Contao machen ? und wie?
    dann das trail geht bei mir nicht wenn ich auf einem untermenu hover bin ansonsten bei aktiven untermenu dan geht es

  9. #9
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Kann man irgendwo sehen was Du erreichen möchtest?
    Mit .trail bei :hover geht nicht, .active aber schon? Das sollte doch nur ein CSS Problem sein.

  10. #10
    Contao-Fan Avatar von MacPix
    Registriert seit
    11.07.2011.
    Ort
    Zürich
    Beiträge
    552

    Standard

    Ich will das wie auf dem Bild dass muss aber noch weiter runter aber dann wird der obere rote teil grösser

    ich muss es auch. mit padding machen sonst wenn man von hauptnav in das untere will verschwindet es wieder...
    Angehängte Grafiken Angehängte Grafiken

  11. #11
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Schick doch bitte einen Link, damit man Dein Problem nachvollziehen kann.
    Ich vermute übrigens auch eher ein css-Problem.

    Grunsätzlich kannst Du aber die Ausgaben in Contao im Template beeinflussen.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •