addCssHead ~ ajoute du code CSS dans le head

Cette action permet d'ajouter des règles CSS dans la balise HEAD de la page, sans risque de nettoyage par un éditeur WYSIWYG

➠ addcsshead : ajoute du code ou fichier CSS dans le head.

Cliquer pour lire la documentation

sans risque de nettoyage par un éditeur WYSIWYG
syntaxe 1 {up addCssHead=.foo[color:red]} Attention: mettre des [ ] au lieu de {}
syntaxe 2 {up addCssHead=chemin_fichier_css}
Utilisation : charger un fichier CSS spécifique à une page
author LOMART version 1.0 license GNU/GPLv3
  • addcsshead: code CSS. ATTENTION [ ] à la place des {}

    version 1.7 possibilité de saisir des crochets [] en les échappant par \

    {up addcsshead=\[test="foo"\] li:nth-of-type(odd)[color:red]}

    version 1.6 Il est possible de passer un fichier CSS comme paramètre.

    {up addcsshead=plugins/content/up/actions/box/up-box.css}

    Le code ci-dessus ajoute le fichier dans le head de cette page. Vous pouvez vérifier !

    Cette action permet d'ajouter des règles CSS dans la balise HEAD de la page, sans risque de nettoyage par un éditeur WYSIWYG

    Exemple d'utilisation

    Vous voulez mettre une bordure verte à toutes les cellules d'un tableau et un fond grisé aux lignes paires

    Dans un article, la seule solution serait de l'indiquer dans les balises TR et TD. En cas de modif, il faut reprendre toutes les lignes une par une: un travail passionnant!

    1-un 1-deux
    2-un 2-deux
    <table style="text-align:center; width:100%">
    	<tr>
    		<td style="width:50%; border:green 1px solid">1-un</td>
    		<td style="width:50%; border:blue 2px solid">1-deux</td>
    	</tr>
    	<tr class="bg-grisTresClair">
    		<td style="width:50%; border:green 1px solid">2-un</td>
    		<td style="width:50%; border:blue 2px solid">2-deux</td>
    	</tr>
    </table>
    

    Avec l'action addCssHead, on procède ainsi:

    1. On crée un tableau simple en donnant un nom de classe à la balise table
      <table class="mon-tableau">
      	<tr>
      		<td>un</td>
      		<td>deux</td>
      	</tr>
      	<tr>
      		<td>un bis</td>
      		<td>deux bis</td>
      	</tr>
      </table>
    2. On crée le shortcode quelque part dans l'article
      {up addCssHead=
        .mon-tableau [
          width:100%; 
          text-align:center;
        ]  
        .mon-tableau tr:nth-child(even) [
          background-color: #ccc;
        ]
        .mon-tableau td [
      	border:green 1px solid
        ]
        .mon-tableau td:nth-child(2) [
      	border:blue 2px solid
        ]
      }

      Notez qu'il est possible d'écrire un shortcode sur plusieurs lignes.

      il faut remplacer les {} par [ ] dans la définition des propriétés

    Et voilà le résultat:
    un deux
    un bis deux bis

    Une petite action* qui rend de fiers services

    • fini d'ajouter une règle CSS dans un fichier qui sera toujours chargé alors qu'elle ne concerne qu'une page
    • le fichier custom.css est plus facile à relire: il ne contient que les règles générales
    • vous supprimez un article, la règle est supprimée.
    • quand vous indiquez une règle CSS sur le forum Joomla, fini les nombreux posts pour savoir où le mettre, où savoir pourquoi ça ne marche pas. C'est aussi plus simple pour le webmaster en herbe.
    • fini les balises <style> supprimées par un éditeur wysiwyg lors de la modification par un rédacteur qui n'a pas les droits pour l'utiliser (histoire vécue).

    * petite action, car son code se limite à une seule ligne.