CSS ~ Personnaliser le rendu des actions

Un type de questions qui revient souvent sur les forums est de savoir comment modifier et agrémenter visuellement le résultat des actions.

Je vais essayer de faire la liste des possibilités offertes par UP

Un petit mot sur UP et le CSS

Vous avez l'habitude de séparer les classes et les styles  dans les balises HTML.

<div class="float-right" style="color:red">Mon texte</div>

UP est tolérant. Ces 4 shortcodes produisent le même résultat

{up div | class=float-right | style=color:red>Mon texte</div>
{up div | style=float-right | class=color:red>Mon texte</div>
{up div | class=float-right;color:red>Mon texte</div>
{up div | style=float-right;color:red>Mon texte</div>

J'ai pris l'action div pour l'exemple, mais le principe est le même pour toutes les options qui attendent un style ou une classe.
Si cela n'est pas possible, la documentation le précise.

UP utilise sa feuille de style

Même si cela n'est pas une obligation, elle procure beaucoup d'avantages : 

• le nom des classes est court
• le nom des classes est logique : w50 pour une largeur de 50%, on ajoute un s avant la valeur pour limiter son action aux mobiles (ws50)
• la totalité de la documentation tient sur une page que vous pouvez imprimer UP-memo-CSS-v6.0.pdf

Utiliser les options de l'action

Elle retourne des infos directement lues dans le script de l'action. Cela nous assure d'avoir une documentation à jour.

Son contenu est également affiché si vous ajoutez une option ? à votre shortcode.
Vous pouvez aussi saisir le shortcode : {up upactionslist=nom_action}

Par exemple, pour l'action csv2table, nous voyons qu'il existe des options pour influer sur le rendu des différentes parties de la table : class, header-style, footer-class
Vous noterez la présence d'options se terminant par -* et d'une option css-head. Nous verrons cela ci-dessous

Feuille de style de l'action

Comme csv2table, plusieurs actions proposent des feuilles de style accessible par une option model. 

Vous pouvez choisir parmi celles proposées, mais il est possible de modifier ou créer les siennes dans le dossier "custom" de l'action

Les options se terminant par -*

L'option col-style-* de l'action csv2table, qui doit être comprise comme le style des colonnes, permet de les styler globalement ou individuellement. 

• col-style-* = color:blue va mettre le texte des colonnes en bleu
• col-style-1 = b;color:red va mettre le texte de la première colonnes en gras et en rouge. 

L'option css-head

C'est une option disponible pour la presque totalité des actions.
Elle permet d'ajouter, sans aucune contrainte,  du CSS dans le head de la page.
Elle évite de recourir à une feuille de style externe ou à une action addCssHead. 

css-head=#id .bloc1[color:red;p1]

Ce qu'il faut remarquer dans l'exemple ci-dessus  : 

• l'argument ressemble à une règle CSS classique, si l'on fait abstraction des accolades {} remplacées par des crochets [] pour éviter une confusion avec les accolades du shortcode.
• le tag #id sera remplacé par l'identifiant de l'action à partir de laquelle il est appelé. 
  Sauf si l'identifiant a été défini par l'option id, il a la forme up-id_article-numéro_ordre_dans_article. 
  Pour les actions dans les modules perso, c'est un nombre aléatoire. Il est souhaitable de le forcer avec l'option id.
• une autre différence avec une règle CSS qui ne peut contenir que des couples propriété:argument;, UP, depuis la version 5.2, permet d'utiliser des noms de classes simples. Comme les styles, ils doivent être séparés par des points-virgules.
  Dans le jargon UP, on les dénomme sous le terme de class2style.
  Par défaut, les classes simples de la feuille de style de UP sont utilisables. Plus d'info dans la démo de l'action upclass2style 

template et mots-clés

Beaucoup d'actions proposent de mettre en forme le résultat à l'aide d'une option template composée de mots-clés.

template=[b style="color:red" class="bg-hover-jaune"]ceci est un ##motcle##[/b]

Cet exemple affiche le terme correspondant au mot-clé en gras et rouge avec un fond jaune au survol.
Si le terme correspondant au mot-clé est vide, le style et le libellé seront toutefois affichés, rendant la compréhension difficile. 

template = ##motcle # [b style="color:red" class="bg-hover-jaune"]ceci est un %%[/b]##

La version ci-dessus peut faire peur, mais vous paraitra évidente avec quelques explications

• si le mot-clé est vide, il ne sera pas affiché tout comme ses libellé et style
• comme un mot-clé simple, il commence par ##motcle
• il est suivi d'un espace, d'un signe dièse et d'un espace pour annoncer la définition qui va suivre
• la définition est identique à celle de la version simple, à la différence que l'on indique la position de la valeur du mot-clé par %% 
• il se termine par ##

Il est possible de faire beaucoup plus, vous trouverez plus d'informations sur l'article consacré aux mots-clés 

Les actions spéciales CSS

Quelques actions de UP n'ont pour objet que la manipulation de CSS

addCssHead

Cette action ajoute une ou plusieurs règles CSS dans le head de la page.

Son action est semblable à l'utilisation d'une feuille de style externe comme user.css.
Elle apporte les avantages suivants :

• la ou les règles sont chargées uniquement sur les pages concernées. 
• le fichier user.css est plus compact et plus facile à relire
• à la lecture de l'article, on connait les règles utilisées

mq

mq pour mediaquerie, cette action facilite leur rédaction pour une utilisation comme argument d'une option css-head ou d'une action asscsshead

{up div=bd-gris p1 b tc 
  | css-head=#id[font-size:120%;
                 @media(max-width:480px)[color:red]
                 @media(min-width:481px) and (max-width:760px)[color:green]
                 @media(min-width:761px) and (max-width:1200px)[color:orange]
                 @media(min-width:1201px)[color:blue]]}
Le contenu de la div
{/up div}

{up div=bd-gris p1 tc b
  | css-head={up mq=#id 
               | default=font-size:120% 
               | mobile=color:red 
               | tablet=color:green 
               | desktop=color:orange 
               | large=color:blue}
}
Le contenu de la div
{/up div}

J'ai ajouté des sauts de ligne pour rendre plus lisible les shortcodes, mais imaginer la même chose sur une ligne !

addclass

Cette action permet d'ajouter du CSS à un bloc sur lequel nous n'avons pas la main et qui ne possède aucun identifiant ou classes permettant de le cibler.

Voir cette étude de cas qui lui est consacrée : addclass ~ Donner du style aux parents