Archive for November, 2011

Code-Snippet: Cross-Browser CSS3 Box-Shadow

How to create a cross-browser CSS3 Box-Shadow.
Use -moz for Mozilla, -webkit for Chrome and Safari and -o for 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 */
}

How to create combined AND / OR Conditions with TypoScript

Sorry, this entry is only available in Deutsch.

How to make the TypoScript pageID in Typo3 available for JavaScript

Sometimes it is necessary to have the current pageID from Typo3 available within you website for JavaScript actions and so on.
You are able to do this with a little wrap like this:

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(|)">

How to integrate Dojo Toolkit with TypoScript into Typo3

If you need the Dojo Toolkit within Typo3, you only need the following few lines 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 this case i’ve the Dojo configuration within a separate JavaScript file:

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

 
But attention, as you know the configuration must be included before the Dojo-Library. Therefore the ‘file’-variable have a lower number.. 😉

In the next step we need to integrate all required CSS:

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

 
Attention: The included CSS must be external=1 and media=all!

Finally we have to include the Dojo-Theme class ‘nihilo’ into the Body-Tag. This can be done with the next TypoScript:

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

 
And that’s it.. Now you should be able to use Dojo within your Typo3 site. 🙂

How to use Google Web Fonts with Typo3/TypoScript

For integrating Google Web Fonts into Typo3 you need the following TypoScript:

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

 
Attention: The included CSS must be external=1 and media=all!
 
After that, you are able to declare your font by using CSS as usual:

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