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}.foo{color:red}{/up addCssHead}
syntaxe 3 {up addCssHead=chemin_fichier_css}
Utilisation : charger un fichier CSS spécifique à une page
@author: LOMART @version: UP-0.9 @license: GNU/GPLv3 @tags: Expert
  • addcsshead: fichier ou code CSS. ATTENTION [ ] à la place des {} pour code dans shortcode
  • filter: conditions. Voir doc action filter (v1.8)
  • id: identifiant
Version 1.6
possibilité de charger un fichier
Version 1.7
possibilité de saisir des crochet [] en les échappant par \
Version 2.9
possibilité de mettre le code css comme contenu (entre les shortcodes)
Voir les nouveautésreplier

version 1.8

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/model/badge.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>
Voir le codereplier

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

Pour info, cette page utilise 8 action(s) :
upactionslist (1) readmore (2) csv2def (1) modal (1) flexauto (1) addCssHead (1) jcontent-info (1)
Détails