Menu
My Logo

Kanalreinigung : deutschlandweit

Wir treffen immer ins Ziel!

Das Template „fhs-target“

Ein Template für CMSimple_XH ab Version 1.7

Vor kurzem begegnete mir mal wieder die CSS-Pseudoklasse :target. Die kenne ich zwar schon länger – habe sie aber noch nie eingesetzt. Grund unbekannt.

Mit :target kann man das Ziel (engl.: target) eines Links, der eine ID hat, mithilfe von CSS beliebig verändern. Die technischen Details erspare ich mir hier. Im Netz gibt es unzählige Beispiele für sinnvolle Anwendungen. Unter anderem fand ich ein :target-Menü von Jim Ramsden, das ich hier als Basis verwende. Ursprünglich wollte ich kein Template daraus bauen, sondern nur irgendwo (im Forum?) daran erinnern und eine Beschreibung zur Anwendung liefern. Mir kam es dann aber schnell in den Sinn, dass ein praktisches Beispiel hilfreicher ist als viel Text.

Übrigens: Die Firma „:target KANALREINIGUNG : DEUTSCHLANDWEIT“ und ihr Logo sind reine Fantasieprodukte und dienen hier nur zur beispielhaften Illustration. Falls jemand eine Firma mit diesem Namen gründen will (es gibt schon ’ne ganze Menge davon), kann er das Logo von mir günstig, sagen wir mal zu einem 4-stelligen Betrag, erwerben. — Das war natürlich nur ein Spaß ;-)))

Das :target-Menü

Letztendlich funktioniert es so: Im Footer befindet sich ein Navigationsmenü, das (nur) alle Menüpunkte der ersten Ebene anzeigt. Hat man also eine Seite bis ganz unten durchgelesen, kann man zum nächsten Menüpunkt wechseln. Dieses Menü kann man ganz normal mit CSS stylen. Also nichts Neues.

Zusätzlich gibt es auf jeder Seite rechts oben ein Hamburger-Symbol. Ein Klick darauf öffnet das :target-Menü. Es ist genau das gleiche Menü wie unten im Footer – nur wird es eben durch :target an einem anderen Ort und anders gestylt angezeigt. Im Footer verschwindet es logischerweise und taucht wieder auf, sobald das :target-Menü geschlossen wird.

Die LandingPage

LandingPage Screenschot

LandingPage Screenshot

Die LandingPage ist eine eigenständige Seite im CMS, die als Newsbox immer oberhalb der ersten veröffentlichten Seite ausgegeben wird. Du kannst sie bearbeiten, wie jede andere Seite auch. Beachte, dass die LandingPage nicht als erste Seite im Seitenbaum platziert sein darf.

Die Besonderheit ist hier, dass die LandingPage in einen DIV gepackt ist (splash-container), der das gleiche (genauer: identische) Hintergrundbild wie der HTML-Bereich hat - nur eben in Farbe. Im hiesigen Beispiel handelt es sich sinnigerweise um eine Zielscheibe (target).

Selbstverständlich kannst/solltest du diese Hintergrundbilder mit deinen eigenen ersetzen (im Template-Ordner: stylesheet.css). Ich habe hier SVG-Grafiken verwendet, die jeweils nur ca. 2KB wiegen. Es ginge natürlich auch mit PNGs oder JPGs. Bedenke jedoch, dass diese evtl. ziemlich groß werden und erhebliche Ladezeiten verursachen könnten. Eilige Besucher könnten sofort wegklicken, sollte deine Seite nicht innerhalb von 2-3 Sekunden angezeigt werden.

Newsboxen

Außer der LandingPage, die wie oben beschrieben als Newsbox realisiert ist, habe ich in diesem Template keinen wirklich sinnvollen Platz finden können, um permanent sichtbare Newsboxen anzeigen zu können. Vielleicht hast du eine Idee?

Favicon, Apple-Touch-Icon & Co

Wichtig: Im Template, im Abschnitt head, gibt es die üblichen Festlegungen für die Icons usw. Die gelten natürlich nicht für deine Website! Du musst dir diese Angaben passend für deine neue Website neu generieren! Der betreffende Abschnitt ist in der template.htm durch Kommentare markiert und es steht dort auch ein Link, wo du das machen kannst.

Die generierten Icons (und alles andere) befinden sich im Template-Images-Ordner. Dort muss der neu generierte Kram auch wieder hin und die Pfade müssen im head-Bereich entsprechend angepasst werden.

Bitte nicht vergessen!

Ja, ja. Jeden Tag wird es ein bisschen komplizierter.
Wie schön einfach war es doch in den 90ern des letzten Jahrhunderts. Da brauchte das keiner. ;-)