Zusätzliche Funktionen

Weiter geht’s. Wie fügen wir ein paar Breadcrumbs (Brotkrümel) hinzu. Eine solche Brotkrümel-Navigation wird auch gerne Klickpfad genannt und zeigt den Weg in der Navigation an. Das zugehörige Snippet ist bereits in MODx enthalten, aber nur wenn der "Beispielcontent" mit installiert wurde. Falls Du es nachträglich installieren willst, geh zur MODx-Downloadseite und lade es dort herunter.

Kopiere dazu einigen Code von der Breadcrumb Dokumentation.

<div id="breadcrumb">
[!Breadcrumbs? &amp;maxCrumbs=`2` &amp;showCrumbsAtHome=`0`!]
</div>

und füge diese Stelle in die template.html ein. Nun haben wir etwas Platz beim Header. Wenn Du dir die style.css ansiehst weißt Du was ich meine.

div#branding{
height:250px;
background: url(../images/cixlogotropic.png) no-repeat bottom;
}

Wie Du sicher bemerkt hast haben wir hier eine Höhe von 250px das Logo ist aber nur 240px hoch. Somit haben wir ein wenig Freiraum. Wenn Du nicht weißt was das im CSS bedeutet hier die Erklärung: es handelt sich um ein div (stelle es dir als Box vor) die 250px hoch ist und in unserem Fall 770px breit ist. Diese hat keine Hintergrundfarbe sondern ein Bild (cixlogo-tropic.png) das nicht wiederholt wird und am unteren Rand platziert ist.

Lass uns hier das Breadcrumb platzieren und schauen wie es funktioniert.

<div id="branding">
[!Breadcrumbs? &maxCrumbs=`2` &showCrumbsAtHome=`0`!]
</div> <!-- end of branding -->

Es ist ein Snippet, welches hier einen Pfad mit 2 Levels generiert (die 1. Seite und eine Kindseite) die aber nicht den Pfad zur Home Seite zeigt. OK? Es gibt reichlich mehr Optionen für die Breadcrumbs, Du kannst sie in der Dokumentation nachlesen. Klicke auf Vorschau und ... sieht ja hässlich aus. Die Schrift ist zu groß und es drückt alles hinunter wenn es angezeigt wird. Das können wir kurieren. Lass uns das Breadrumb in ein div packen und anschließend können wir es mit CSS formatieren. Als erstes ergänze folgendes Markup (breadcrump div) in der template.html:

<div id="branding">
     <div id="breadcrumbs"> 
[!Breadcrumbs? &maxCrumbs=`2` &showCrumbsAtHome=`0`!]
     </div> <! end of breadcrumbs >
<div id="menu">

Wir kopieren nun einiges an Styling Script in unser CSS (am Ende der Datei):

/* ===== Breadcrumb ===== */
#breadcrumbs {
        width: auto; /* makes the div the entire width of the surrounding container.*/
        height: 0.6em;
        fontsize: .6em;
        color: black;
}

Speichere die Datei und drücke die F5 Taste im Browser. Die Seite wird jetzt aktualisiert. QE ist im Weg aber Du kannst es im Hintergrund erkennen. Im CSS sollte man noch ein wenig das Breadcrumb positionieren da es am Rand klebt – aber es funktioniert. Jetzt lies dir endlich die Dokumentation von Breadcumb Durch, damit Du andere Parameter ausprobieren kannst.

Login

Login

Zusätzliche Funktionen