CMS

Style für Booklet

Ein Typo3-Kollege hat mich auf eine Seite aufmerksam gemacht (ging dabei um ein neues Plugin für imagecycle). Als ich mir dann die Seite weiter angeschaut habe, hab ich dann noch einen interessanten Artikel gefunden...

Dabei ging es um einen Style für das Booklet-Plugin das ich ja bei jfmulticontent verwende.

Gleich mal runterladen und an meine Implementation angepasst und so sieht das dann aus:

Hier noch das Archiv zum runterladen.

1. style.css einbinden
2. Plugineinstellungen
   1. width: 800
   2. height: 500

Die Kleinigkeit...

...dass das Backend des T3BLOG nicht besonders aussieht kann man einfach so hinnehmen, oder man bindet sein eigenes CSS ein. Das kann man indem man einen Ordner im fileadmin erstellt mit einer CSS Datei darin und folgendes PHP im extTables.php verwendet:

if (TYPO3_MODE == 'BE') {
  $GLOBALS['TBE_STYLES']['skins'][$_EXTKEY] = array(
    "name" => $_EXTKEY,
    "stylesheetDirectories" => array(
      "sprites" => 'fileadmin/t3blog_css/'
    )
  );
}

Das Problem:

Der Tab oder das Accordion bei jfmultcontent sieht immer rot aus, aber meine Seite ist Blau mit Blümchen, grün mit Punkten oder gelb mit Knöpfen.

Was tun?

Dei zwei Styles "Tab" und "Accordion" basieren auf jQuery UI und gibt es eine ganz tolle Möglichkeit, wie man sein CICD auch auf Tab und Accordion anwenden kann, der Themeroller.

 

Die Lösung:

Wenn man den Themroller öffnet, sehen wir schon alle Möglichkeiten die uns die Entwickler von jQuery UI zur Verfügung gegeben haben, einfach mal Kreativ sein und die Einstellungen vornehmen, das Resultat wird sofort angezeigt.

Wenn man dann seinen Style zusammengeklickt hat, kann man das Design herunterladen.

Das herunterladen ist gekoppelt mit der Auswahl der Verwendeten Komponenten, da nicht zwingend alle CSS Definitionien benötigt werden.

Ich persönlich lade immer das Gesamte Packet herunter, da bei späterem Verwenden von zusätzlicher Komponenten das Design erneut erstellt werden muss.

Nach dem Entpacken schauen wir uns mal das Ergebnis an:

Wir kopieren den gesamten Ordner "customer-theme" zu unserem fileadmin und ändern den Namen des Ordners in das was dazu passt (blaue_bume, gelbe_punkte oder rote_nase)

Damit das Plugin jfmulticontent auch den neuen Style benutzt, müssen wir die Konstante anpassen, dazu bearbeitet man das entsprechende Template und setzt die folgende Konstante (nicht im Setup!):

plugin.tx_jfmulticontent_pi1.file.jQueryUIstyle = fileadmin/mein_ordner/jquery-ui-1.8.11.custom.css

Nachdem der Cache geleert wurde erblüht unser Frontend im neuen Glanz des angepassten Themes...