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

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

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

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!

<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

   Comme argument principal du shortcode

   {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
     ]
   }

   Comme contenu entre shortcode

   {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
     }
   {/up addCssHead}

   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: