➠ addcsshead : ajoute du code CSS dans le head. DEMO
possibilité d'ajouter du code CSS dans le head
sans risque de nettoyage par un éditeur WYSIWYG
syntaxe {up addCssHead=.foo[color:red]} Attention: mettre des [ ] au lieu de {}
author LOMART version 1.0 license GNU/GPLv3
  • addcsshead: code CSS. ATTENTION [ ] à la place des {}

    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.