Archive for Nov. 2011

Codeschnipsel: Cross-Browser CSS3 Box-Shadow

Wie man einen Cross-Browser CSS3 Box-Shadow erstellt.
Benutze -moz für Mozilla, -webkit für Chrome und Safari und -o für Opera:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  -o-box-shadow: 10px 10px 10px #000; /* Opera */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

Kombinierte AND / OR Conditions mit mit TypoScript erstellen

Oft kommt es vor das man auf bestimmten Typo3 Seiten-IDs speziellen TypoScript Code einfügen möchte, der sich von anderen Seite unterscheidet.
Für diesen Fall gibt es in TypoScript Conditions. So hatte ich diese Woche den Fall das ich auf zwei bestimmten Seiten jeweils ein Dojo-Modul einbinden und ausführen wollte, aber auf allen anderen Seiten diese Module aus Performance Gründen nicht eingebunden werden sollten – die Dojo-Einbindung aber nicht fehlen sollte.
Für diesen Fall brauchte ich eine Condition mit zwei ‚ungleich‘ / ‚!=‘ Bedingungen, die ich mit einem ‚logischem UND‘ / ‚AND‘ verknüpfe.
Das Resultat ist das folgende TypoScript:

[globalVar = TSFE:id = 3]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
			
        // Own Module and Translation
        dojo.require("mop.Collection");
        dojo.requireLocalization("mop", "collection");	
        dojo.addOnLoad(function() {
          startUp();
          mop.Collection.create("./fileadmin/templates/collection.php", "content_main_full", "subNavi");
        });
      </script>
    )    
  }
}
[global]

[globalVar = TSFE:id = 8]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
			
        // Own Module and Translation
        dojo.require("mop.Slider");
        dojo.requireLocalization("mop", "slider");	
        dojo.addOnLoad(function() {
          startUp();
          mop.Slider.create("./fileadmin/templates/slider.php", "sliderCampaign");
        });
      </script>
    )    
  }
}
[global]

[globalVar = TSFE:id != 3] AND [globalVar = TSFE:id != 8]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
        
        dojo.addOnLoad(function() {
          startUp();
        });
      </script>
    )    
  }
}
[global]

Typo3 pageID mit TypoScript für JavaScript zur Verfügung stellen

Manchmal ist es notwendig, die aktuelle pageID von Typo3 innerhalb einer Website für JavaScript-Aktionen und oder ähnliches verfügbar zu haben.
Mit dem folgenden kleinem Wrap ist dies leicht möglich:

page.bodyTagCObject = HTML
page.bodyTagCObject.value.field = uid
#page.bodyTagCObject.value.wrap = <body id="pageID_|">
#page.bodyTagCObject.value.wrap = <body onload="sendPageIdToAnyFunction(|)">
page.bodyTagCObject.value.wrap = <body onload="alert(|)">

Das Dojo-Toolkit mit TypoScript in Typo3 integrieren

Wenn Du das Dojo Toolkit in Typo3 benötigen, brauchen Sie nur die folgenden paar Zeilen TypoScript:

page.includeJS {

  # Dojo Configuraton
  file1 = fileadmin/templates/javascript/djConfig.js
 
  # Dojo-Libraries
  file3 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js
  file3.external = 1
  file3.type = text/javascript
}

 
In diesem Fall habe ich die Dojo-Konfiguration in einer separaten JavaScript-Datei:

var djConfig = {
  parseOnLoad: true,
  locale: 'de'
};

 
Aber Achtung, wie Du sicher weißt muss die Konfiguration vor der Dojo-Bibliothek integriert werden. Daher hat die ‚file‘-Variable geringere Nummer .. 😉

Im nächsten Schritt müssen wir das erforderliche CSS integrieren:

page.includeCSS {
  file2 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/nihilo/nihilo.css
  file2.external = 1
  file2.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!

Abschließend müssen wir die Dojo-Theme class ’nihilo‘ in den Body-Tag schreiben. Dies kann mit dem nächsten TypoScript vorgenommen werden:

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body class="nihilo">

 
Und das war’s .. Nun sollten Sie in der Lage sein Dojo in Ihrer Typo3 Website zu nutzen. 🙂

Google Web Fonts mit TypoScript in Typo3 einbinden

Für die Integration von Google Web Fonts in Typo3 brauchst Du das folgende TypoScript:

page.includeCSS {  
  file5 = http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic
  file5.external = 1
  file5.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!
 
Danach kann die Font ganz normal mit CSS deklariert werden:

.webFont {
  font-family: 'Marvel',Arial,Helvetica,sans-serif;
}