Intégrateur certifié et Développeur TYPO3

Les autres blogs

Générer du CSS dynamique en TypoScript

Cette astuce va nous permettre de générer du code CSS dynamique à partir des constantes définies dans votre gabarit.

L'astuce consiste à créer un objet page avec un typeNum différent de 0 (valeur utilisée pour le rendu de vos pages HTML) et à l'appeler  sur le rendu HTML de votre site.

Exemple d'utilisation: Changer le thème couleur de votre site.

Définition des constantes

Je déclare 3 constantes qui vont me permettre de modifier la couleur du fond de mon site, de mes menus ainsi que de mes titres.

Typoscript (définition de mes constantes)

couleur {
    menus = #576A74
    titres = #000000
    fond = #EBEBEB
}

Configuration de la feuille CSS

Je créé la feuille de style dans mon gabarit en déclarant un nouvel objet de type PAGE et je construis son contenu (le code CSS) directement via un COA en TypoScript.

TypoScript (configuration du CSS)

themeCSS = PAGE
themeCSS {
  typeNum = 127
  config {
    disableAllHeaderCode = 1
    additionalHeaders = Content-Type:text/css
  }
    10 = COA
    10 {

        # Menus
        10 = TEXT
        10.value = #menu {background-color:{$couleur.menus}}

        # Titres
        20 = TEXT
        20.value = h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a {color:{$couleur.titres}}

        # Fond de page
        30 = TEXT
        30.value = body {background-color:{$couleur.fond}}
    }
}

Utilisation de mon CSS sur mon site

Ma feuille de style CSS est désormais créée et peux être consultée via l'URL suivante "index.php?type=127" où "127" est le typeNum utilisé lors de la déclaration de mon objet PAGE.

Il ne reste plus qu'à l'utiliser sur les différentes pages de mon site. Pour cela, j'utilise l'instruction "headerData"

TypoScript (utilisation du CSS)

page.headerData.108 = TEXT
page.headerData.108.value = <link rel="stylesheet" type="text/css" href="./index.php?type=127" />

Autres possibilités

L'astuce décrite ci-dessous n'est qu'un méthode parmis tant d'autres.

Vous pourriez par exemple insérer le code CSS directement en "inline" dans le corps de votre page HTML via l'objet "headerData", cela fonctionnerai très bien mais la méthode est, selon moi, moins propre.

Vous avez également la possibilité d'utiliser un template classique ou fluid pour le rendu de votre page "CSS".

N'hésitez pas à partager vos méthodes dans les commentaires.

Commentaires

commentaires générés par Disqus