Posts Tagged ‘ CSS

(Deutsch) LESS mit Fluid-Templates verwenden in Typo3 4.5

TIP: To use LESS optimal fluid with TYPO3 templates, I recommend using the Fluid-Template-Manager (short FTM).

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 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. 🙂

The walking man from Andrew Hoyer – Using only CSS3 & HTML5

That’s hot! 🙂

The walking man (Andrew Hoyer) at this Page: http://andrew-hoyer.com/experiments/walking/ , is implemented using only CSS3 animations and simple HTML. You can read more about how it was implemented here. Be sure to view this experiment on an iPhone, iPod or iPad (or android device). 😉

Integrate free Web-Fonts by using Google Web Fonts

The distribution of usage of web fonts is gradually increasing on many websites. A long time, many designers and web developers have waived them, because of lack of browser-support and problems with the copyrights of many fonts, and used instead for example headlines as an image within their website.

Important points while using Web Fonts are therefore that it must be free fonts (for example under Open Font License) and chosen if possible, a format that does many or even all browsers understand.

We now want to integrate with the help of Google Web Fonts a free font in a website.
First we open the Google Web Fonts website and select any font. Have we decided on a font, we click the bottom right on ‘Use’.

Here we simply go to the steps that are pretending Google Web fonts:
1. Select the styles you want to use
2. Select the character set that should be used
3. Add the given code in the header of the website. Alternatively you can also download the fonts above the left and place it on your own webspace.

<link href='http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

 
4. At last just include the font in necessary places in the CSS.

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

 

Attention: With too many fonts can slow down its website. Choose therefore better only the fonts that are actually in need of website. So check on the Page Load speedometer 😉
 
Unfortunately the Internet-Explorer only supports the TTF format from version 9. Older versions of Internet Explorer only understand their own format Embedded OpenType, short EOT. However there is a new standard that should solving this problem. The Web Open Font Format, short WOFF. So far it is only supported by the latest browser versions. Therefore you must include all three formats of Web-Fonts, to make sure that every visitor can see the right fonts on your website
 

  IE Firefox Chrome Safari Opera
TTF 9 3.5 4 3.1 10
EOT 4
WOFF 9 3.6 5 5.1 11.1

 
An online tool that allows you to convert TTF to Web-Fonts (EOT, OTF, SVG, WOFF) is available at www.font2web.com
After the we now converted all three Web-Font formats, it’s time to integrate these into the system. This one solves the following CSS:

@font-face {
  font-family: 'Marvel';
  src: url('fonts/Marvel.eot#iefix') format('embedded-opentype'),
       url('fonts/Marvel.woff') format('woff'),
       url('fonts/Marvel.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

Include CSS files by using page.includeCSS under TypoScript

TIP: For an easier work with CSS by using LESS in your TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short FTM).

The including of CSS-Files by using TYPOScript is very easy. Just assign the files with the page.includeCSS, like:

page.includeCSS { 
  file1 = fileadmin/templates/css/style.css 
  file1.title = Default CSS
  file1.media = screen
  
  file2 = fileadmin/templates/css/print.css 
  file2.title = Print CSS
  file2.media = print
}

Insert Google Analytics JavaScript direct within TypoScript

TIP: For an easy integration of Google-Analyticy in each of your TYPO3 Fluid-Template, I recommend using the Fluid-Template-Manager (short FTM).

In order to integrate CSS or JavaScript into your TYPOScript, as an example the usage of a Google Analytics JavaScript-Snippet, use the following code:

page {
  headerData {
    1 = TEXT
    1.value (
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}) ();

</script>
    )
  }
}