Vader[FR] : ce n'est pas un blog, c'est un Sith

JavaScript

Vader[FR] — 2023-10-11T17:07:25Z

JavaScript

JavaScript est un langage interprété, exécuté côté client par le navigateur. Il n'y a aucun lien avec le langage compilé Java.

S'exécutant dans le navigateur, les droits du javaScript sont limités. Il ne peut par exemple pas lire ou écrire sur le disque dur.

Les scripts et fonctions en JavaScript permettent de modifier la page en temps réel, sans avoir à recharger toutes les informations depuis le serveur.

Contrairement à de nombreux sites, le site "Vader-fr" ne fait appel à aucun domaine tiers (voir onglet suivant).

Mais le site utilise néanmoins du JavaScript afin de fournir quelques fonctionnalités très pratiques :

Système d'onglets et de pages sur les articles, permettant de séparer les "chapitres" en onglets différents, d'avoir un article moins long et plus lisible.
Blocs dépliants
Protection des adresses courriel dans les articles et descriptif des rubriques.
Tri des tableaux

Serveur tiers ou Domaine tiers ou Site tiers : Serveur n'étant pas l'hébergeur de la page Web visitée mais un autre serveur, d'un autre domaine, auquel la page visitée fait un appel pour une raison quelconque (publicité, script, image, PDF, composants de la page visitée, calculs, etc.)

Sous Firefox, le plugin LightBeam permet de visualiser les relations entre les différents sites.

Toujours sur Firefox, des plugins permettent de gérer l'exécution des scripts de domaines tiers, par exemple :

Voici par exemple les serveurs tiers signalés sur le site Ouest-France :


Domaines Tiers site Ouest-France - NoScript


Domaines Tiers site Ouest-France - Ghostery


Domaines Tiers site Ouest-France - uBlock Origin

EcoIndex

Vader[FR] — 2023-10-11T16:53:35Z

l'EcoIndex calcule la performance et l'empreinte environnementale des pages web.

Voir aussi : EcoIndex

Présentation générale du site

Vader[FR] — 2022-06-20T08:31:34Z

Site de l'association "Histoire et Patrimoine" de la commune de Les Touches en Loire Atlantique

1914-1918 - première guerre mondiale
1939-1945 - deuxième guerre mondiale, résistance en Loire Inférieure (Loire Atlantique)
actualités sur la commune de Les Touches
actualités et informations sur l'association

Reprend également des articles des sites d'Henri Lepage.

Étant un site d'information et non artistique, ce site a besoin d'afficher beaucoup d'informations, son design est donc assez "chargé" contrairement à un site d'artiste ou de design qui, simple vitrine, serait plus épuré.
Le design reste donc très classique, un entête qui fait aussi menu de navigation (avec champ de recherche), pied de page et cadre contenu sur toute la largeur au centre pour plus de lisibilité, lequel reste fixe dans la page et a son propre scrolling.
Petite "innovation" personnelle [1] que l'on retrouve également sur mon site, un cadre dépliant sur la droite liste les articles de la même rubrique.

Ce site sous SPIP a été créé à partir du squelette zpip, "customisé" pour le site Vader-fr.fr, avec quelques modifications à la marge.

Son fonctionnement technique sera détaillé dans cette rubrique :

squelette
style CSS dont multi-rubrique
scripts JavaScript

[1] Je n'ai pas vu de tel design sur un autre site, mais il est possible que cela existe.

Fonctions pour PDO

Vader[FR] — 2018-07-01T10:29:46Z

PDO est une couche d'abstraction en PHP permettant d'adresser une base de données indépendamment de son type (MySQL, PostGres, Oracle...)
Par sécurité, il est préférable de faire des requêtes paramétrées afin d'éviter l'injection SQL.
Le contrecoup, c'est le rajout de code qui devient plus long à écrire.

Le code étant toujours le même, il est toutefois possible de le simplifier en créant une fonction simple qu'il suffira d'appeler.

Cette première fonction permet de préparer et exécuter une requête, laquelle peut être paramétrée, et dont le résultat pourra être :

plusieurs lignes, traitées ensuite dans une boucle foreach
un nombre de ligne modifié

Elle effectue donc un prepare, puis bindValue pour 0-n paramètres, puis un execute, et renvoie l'objet requête PDO.
les paramètres de la requêtes sont fournis dans un tableau qui commence à 1 (de préférence) ou zéro
la requête doit donc avoir " ?" en paramètre(s) afin de pouvoir les affecter depuis un tableau par indice, plus facilement traitable. voir l'exemple plus bas

function prepexec($rek,$params,$db){ if (isset($params[0])){ $debut=0; $correc=1; $fin=sizeof($params)-1; }else{ $debut=1; $correc=0; $fin=sizeof($params); } $rk=$db->prepare($rek); // si tableau param vide, pas de bindValue => fonction unique prepare avec/sans param + exec for ($i=$debut;$i<=$fin;$i++){ $typ_param=PDO::PARAM_STR;// PAR DEFAUT $param=$params[($i+$correc)]; if (preg_match("/[\w]+/",$param)){ $typ_param=PDO::PARAM_STR; } // PDO::PARAM_STR if (preg_match("/^[+-]?\d+$/",$param)){ $typ_param=PDO::PARAM_INT; } // PDO::PARAM_INT // PDO::PARAM_BOOL - MySQL might not support PARAM_BOOL if (preg_match("/^$/",$param)){ $typ_param=PDO::PARAM_NULL; } // PDO::PARAM_NULL $rk->bindValue($i,$param,$typ_param); } // renvoie la requête préparée et executée $rk->execute(); // $nb=$rk->execute(); OU foreach ($rk as $result){ // donc $nb=prepexec(... ou $rk=prepexec puis foreach($rk... ou même foreach(prepexec... return $rk; }

exemple d'appel :

 $rek="select count(login) as existe from utilisateur where login=?"; $params[1]=$user; $rk=prepexec($rek,$params,$db); $existe=0; foreach ($rk as $result){ $existe=$result['existe']; }

Cependant, cela est encore trop long.
Cette deuxième fonction va donc faire le boulot en appelant la première et en renvoyant la valeur attendue, unique, et dont le nom du champ est indiqué.

function simplexec($rek,$params,$db,$nomvar){ $resultat=null; $rk=prepexec($rek,$params,$db); foreach ($rk as $result){ $resultat=$result["$nomvar"]; } return $resultat; }

Fonctions sur les mots de passe

Vader[FR] — 2018-07-01T10:27:49Z

Diverses fonctions pour gérer l'authentification d'utilisateurs et le stockage sécurisé des mots de passe dans la BDD.

Vérification de la complexité d'un mot de passe

si la fonction renvoie une chaîne vide lorsqu'on l'appelle, tout baigne.

function chk_complex_mp($motpass){ $message=""; $patterns[0]="/^.*[A-Z].*+$/";	$complexe[0]="Il faut au moins une lettre majuscule
"; $patterns[1]="/^.*[a-z].*+$/";	$complexe[1]="Il faut au moins une lettre minuscule
"; $patterns[2]="/^.*[0-9].*+$/";	$complexe[2]="Il faut au moins un chiffre
"; $patterns[3]="/^.{8,}$/"; $complexe[3]="Il faut au moins 8 caractères
"; for ($i=0;$i

`Hashage de mot de passe avec sel, par algorithme choisi`


Cette fonction n'est qu'un exemple de fonction de cryptage, il est possible de faire plus souple/plus complexe.

A partir d'un mot de passe en clair, d'une chaîne de salage et d'un algorithme de hashage, elle :
 casse le sel en 3 parties de 10 caractères
 casse le mot de passe en 3 parties égales
 hash une première fois les morceaux de mot de passe mélangés aux morceaux de sel
 re-casse le mot de passe salé et hashé en 3 parties égales
 et enfin re-mélange le sel avec le mot de passe hashé.
function genere_motpasse($motpasse,$alt,$algo){ $alt1=substr($alt, 0, 10); $alt2=substr($alt, 10, 10); $alt3=substr($alt, 20, 10); $taillepass=strlen($motpasse); $taillemorceau=intval($taillepass/3); $pass1=substr($motpasse,0,$taillemorceau); $pass2=substr($motpasse,$taillemorceau,$taillemorceau); $pass3=substr($motpasse,($taillemorceau*2)); $passfin=hash($algo,"$pass1$alt1$pass2$alt2$pass3$alt3"); $taillepassf=strlen($passfin); $taillemorceauf=intval($taillepassf/3); $passf1=substr($passfin,0,$taillemorceauf); $passf2=substr($passfin,$taillemorceauf,$taillemorceauf); $passf3=substr($passfin,($taillemorceauf*2)); $passfou="$passf1$alt1$passf2$alt2$passf3$alt3"; // le mot de passe coupé, salé, hashé et re-salé est : return $passfou; }

`Génération de mot de passe aléatoire et/ou de sel`


voir l'article sur le salage en informatique sur Wikipedia.
Cette fonction génère donc une chaîne aléatoire, par exemple pour le sel aléatoire, qui devra être stocké, éventuellement pour chaque utilisateur.

Cela permet de se protéger (dans une certaine mesure) des attaques par rainbow table.
// génère une chaîne alpha-numérique aléatoire de longueur $taille function genere_chaine_aleatoire($taille) { $code_aleatoire=""; $chaine="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; srand((double)microtime()*1000000); for($i=0; $i<$taille; $i++) { $code_aleatoire.=$chaine[rand()%strlen($chaine)]; // ou $code_aleatoire .= substr($chaine,rand()%(strlen($chaine)),1); // ou $code_aleatoire .= $chaine[ rand(0, ($nb_chars-1)) ]; } // ou $code_aleatoire = str_shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'); return $code_aleatoire; }
si l'on veut casser et mélanger le sel et le mot de passe avant/après cryptage selon les chiffres compris dans le sel, il est possible, à sa génération, de rajouter une chaîne "0 à 9" au sel si celui-ci ne contient pas de chiffre, puis de mélanger le sel par la fonction str_shuffle().

`Choix d'un algorithme de hashage`


Ce bout de code cherche dans le tableau renvoyé par la fonction "hash_algos" les meilleurs algorithmes de hashage.

hash_algos() renvoie les algorithmes supportés sur le système.
Une fois trouvé, l'algorithme à utiliser pourra être stocké soit dans le fichier connect.php, soit dans la base de données, dans une table de méta-variables.

Les algorithmes à chercher sont triés par ordre "de préférence" du plus sûr (sha512, whrilpool...) au moins sûr (crc32).
 // chercher dans hash_algos si sha512, sha256, sha1... sont utilisables. $algos_prefs=array("sha512", "whirlpool", "sha384", "ripemd320", "sha256", "snefru256", "ripemd256", "snefru", "gost", "sha224", "ripemd160", "ripemd128", "fnv164", "joaat", "crc32b", "adler32", "fnv132", "crc32"); $algo=null; $i=0; $nbalgos=sizeof($algos_prefs); while (($i<$nbalgos)&&($algo==null)){ if (in_array($algos_prefs[$i],hash_algos())){ $info.="".$algos_prefs[$i]." est supporté
"; $algo=$algos_prefs[$i]; }else{ $info.="".$algos_prefs[$i]." non supporté
"; $i++; } } if ($algo==null){ $info.="Aucun algorithme supporté parmi ceux cherchés
"; $debug.="Aucun algorithme supporté parmi ceux cherchés"; }



Transformer une durée en secondes en sa description textuelle
Vader[FR] — 2018-07-01T10:23:43Z
// transforme une durée en secondes en sa description textuelle function sec2txt($durees){ $tabpuis=array("seconde","minute","heure","jour"); // + 30j/mois, 12 mois/an... ? $tabfrac=[60,60,24]; $traite=$durees; $puiss=0; $duree=""; while ($traite>=$tabfrac[$puiss]){ $reste=$traite%$tabfrac[$puiss]; $fraction=($traite-$reste)/$tabfrac[$puiss]; if ($reste>0){ $duree=($duree!="")?" $duree":$duree; $duree=($reste>1)?"$reste ".$tabpuis[$puiss]."s".$duree:"$reste ".$tabpuis[$puiss].$duree; } $puiss++; $traite=$fraction; } $duree=($duree!="")?" $duree":$duree; $duree=($traite>1)?"$traite ".$tabpuis[$puiss]."s".$duree:"$traite ".$tabpuis[$puiss].$duree; return $duree; }


Transformer un nombre (entier naturel) en sa description textuelle
Vader[FR] — 2018-07-01T10:20:45Z
// transforme un nombre en sa description textuelle
function num2txt($num){ $res=($num<0)?"moins":""; $tabchiffres=array("","un","deux","trois","quatre","cinq","six","sept","huit","neuf"); // commence à zéro ! $tabdix=array("","onze","douze","treize","quatorze","quinze","seize"); // idem $tabdizaines=array("","dix","vingt","trente","quarante","cinquante","soixante");	// idem $trnum=number_format($num); // pas de partie décimale, une , entre chaque millier $tabnum=explode(",",$trnum); $puiss=count($tabnum); // 1 = entre 0 et 999, 2 = entre 1000 et 999 999 milliers, 3 = entre 1 000 000 et 999 999 999 milions, 4 =... $tabpuis=array("","","mille","million","milliard"); // centaine/dizaine de milliards, centaine/dizaine de million, centaine/dizaine de millier, centaine/dizaine/unité foreach ($tabnum as $milnum){ $taillenum=strlen($milnum); $res.=($res!="")?" ":""; $verrounite=false; if ($taillenum==3) { // si 3 chiffres, traiter centaines // si 0 = rien, sinon x cent(s) if ($milnum[0]==1){ $res.="cent"; } if ($milnum[0]>1){ $res.=$tabchiffres[$milnum[0]]." cent"; $res.=(($milnum[1]>0)||($milnum[2]>0)||($puiss>=2))?"s":""; } } if ($taillenum>=2) { // si 2 chiffres, traiter dizaines $pos=($taillenum==3)?1:0; $res.=($res!="")?" ":""; //$res.=($pos!=0)?" ":""; $next=$pos+1; // si 1 if ($milnum[$pos]==1){ if (($milnum[$next]>=1)&&($milnum[$next]<=6)){ // onze à seize $res.=$tabdix[$milnum[$next]]; $verrounite=true; }else{ // 0 +	si 7 à 9 = dix- $res.=$tabdizaines[1]; $res.=($milnum[$next]>=7)?"-":""; } } // si 2 à 6 if (($milnum[$pos]>1)&&($milnum[$pos]<7)){ $res.=$tabdizaines[$milnum[$pos]]; $res.=($milnum[$next]>0)?"-":""; } // si 7, 8 et 9 qui utilisent aussi le chiffre des unités if ($milnum[$pos]==7){ $res.="soixante"; if ($milnum[$next]==0){ $res.="-dix"; } if ($milnum[$next]==1){ $res.=" et onze"; } if (($milnum[$next]>=2)&&($milnum[$next]<=6)){ $res.="-".$tabdix[$milnum[$next]]; } if ($milnum[$next]>=7){ $res.="-dix-".$tabchiffres[$milnum[$next]]; } $verrounite=true; } if ($milnum[$pos]==8){ //$verrounite=true; $res.="quatre-vingt"; if ($milnum[$next]>1){ $res.="-"; } } if ($milnum[$pos]==9){ $res.="quatre-vingt"; if ($milnum[$next]==0){ $res.="-dix"; } if (($milnum[$next]>=1)&&($milnum[$next]<=6)){ $res.="-".$tabdix[$milnum[$next]]; } if ($milnum[$next]>=7){ $res.="-dix-".$tabchiffres[$milnum[$next]]; } $verrounite=true; } } if ($taillenum>=1) { // si 1 chiffres $pos=$taillenum-1; // dernier chiffre 2-1 = 1 ? 3-1=2 if ($pos==0){ // 1 seul chiffre, donc si >1 ou 1 et puiss = 1, afficher le chiffre $res.=(($milnum>1)||(($milnum==1)&&($puiss==1)))?$tabchiffres[$milnum]:""; }else{ if ((!$verrounite)&&($milnum[$pos]!=0)){ // si chiffre dizaine != 7, 8 ou 9 $pre=$pos-1; if ($milnum[$pre]==0){ $res.=$tabchiffres[$milnum[$pos]]; } // si dizaine if ($milnum[$pre]==1){ // déjà un tiret $res.=$tabchiffres[$milnum[$pos]]; } // si vingt à 60 ou 80, et 1, mettre x et 1 if (((($milnum[$pre]>=2)&&($milnum[$pre]<=6))||($milnum[$pre]==8))&&($milnum[$pos]==1)){ $res.="et-".$tabchiffres[$milnum[$pos]]; } // si vingt à 60 ou 80 et pas 1 if (((($milnum[$pre]>=2)&&($milnum[$pre]<=6))||($milnum[$pre]==8))&&($milnum[$pos]!=1)){ $res.=$tabchiffres[$milnum[$pos]]; } } } } // si total>1, mettre le tabpuiss[puiss] if (($milnum>=1)&&($tabpuis[$puiss]!="")){ $res.=($res!="")?" ":""; $res.=$tabpuis[$puiss]; // mille est invariable // mais million, non $res.=(($puiss==3)&&($milnum>1))?"s":""; } $puiss--; } if ($num==0){ $res="zéro"; } return $res;
}


Exemples de fonctions PHP
Vader[FR] — 2016-07-27T08:09:54Z
Retour des erreurs

Lorsque les erreurs et autres messages à caractère informatif sont gérés dans les différents blocs, et empilés dans une variable qui sera au final affichée dans un bloc dédié (lequel peut être dépliant grâce au CSS).

Si l'on souhaite un style différent selon le niveau d'erreur atteint, les différents blocs peuvent faire appel à cette fonction, qui use d'opérateurs ternaires.
Il est aussi possible d'utiliser une variable globale pour le niveau d'erreur actuel, ce qui simplifie les appels à la fonction.
3 niveaux d'erreur sont gérés :
 info : tout va bien, on affiche un (ou plus) message(s) juste pour information
 debug : attention, risque d'erreur, tout n'est pas optimal
 error : erreur critique
function raise_debuglvl($lvl,$actuel){ $debuglvl=$actuel; $debuglvl=(($lvl=="info")&&($actuel=="info"))?"info":$debuglvl; $debuglvl=(($lvl=="debug")&&($actuel!="error"))?"debug":$debuglvl; $debuglvl=($lvl=="error")?"error":$debuglvl; return $debuglvl;
}
La déclaration du bloc d'affichage :
// bloc d'information - l'image sert au déploiement mais reste affichée dans le bloc déplié if ($debug!=""){ switch ($debuglvl) { case "info" : $debugimg="notif-info.gif"; break; // ou action-s-valide case "debug" : $debugimg="notif-warning.gif"; break; case "error" : $debugimg="notif-error.gif"; break; default: $debugimg="notif-warning.gif"; break; } echo "  $debug 
"; }
La page appelante déclare les variables $debug et $info :
 $debug contiendra les messages à afficher dans le bloc dédié
 $info contiendra les messages à afficher dans la page.
Les pages appelées (via include ou require empileront dans ces variables les messages qu'elles souhaitent soulever.

$debug.="message"; ou $info.="message";, cette dernière variable pouvant être affichée dans la page puis vidée.
exemple d'utilisation

dans un script gérant le login d'un utilisateur, on récupère (en étape 2) login/mot de passe.

Selon ce qui est fourni, on retourne en étape 1 en affichant un message d'erreur.
if ($etape==2){ if ((isset($_POST["user"]))&&($_POST["user"]!="")){ $user=$_POST["user"]; // vérifier pas d'espace (entre autre) if (!preg_match("/^[a-z][a-z0-9]+$/",$user)){ $debug.="nom utilisateur non conforme
"; } }else{ $debug.="nom utilisateur manquant
"; } if ((isset($_POST["motpass"]))&&($_POST["motpass"]!="")){ $motpass=$_POST["motpass"]; // vérifier pas d'espace (entre autre) if (!preg_match("/^[a-zA-Z0-9]+$/",$user)){ $debug.="mot de passe non conforme
"; } }else{ $debug.="mot de passe manquant
"; } if ($debug!=""){ $etape=1; $info=$debug; raise_debuglvl("debug",$debuglvl); }
}
if ($etape==2){
// comparaison BDD
}
if ($etape==1){ echo " Bloc navigation 
  $info "; // formulaire }
son style CSS

pour un bloc dépliable CSS situé en haut à gauche de la page :
#debug { position:absolute; top:0; left:0; width:32px; height:32px; z-index:42; line-height:0; font-size:0;
}
#debug img { height:auto; width:auto; max-height:32px; max-width:32px; visibility:visible;
}
#debug:hover { height:auto; width:auto; min-height:100px; min-width:200px; line-height:normal; font-size:1em; overflow-y:auto;
}
#debug:hover img { height:auto; width:auto;
}
#debug:hover img#deploi_debug { height:0; width:0; visibility:hidden;
}
/* =========================================== Messages de débogages =========================================== */
#debug.error{ background-color:#FF0000;
}
#debug.error:hover { background-color:#FF8C00;
} #debug.debug { background-color:#FF8C00; }
#debug.info { background-color:#ADD8E6;
}
#debug.debug:hover, #debug.info:hover { background-color:#ADD8E6;
}
.debug { color:#FF8C00; /*#FFB30A;*/ /*#FFA501;*/
}
.info { color:#40820D; }
.error { color:#FF0000; font-weight:bold;
}
redirection en https

Pas vraiment une fonction, mais un petit bout de code à mettre dans la section ....

Si la page est accédée en http non sécurisé, on redirige vers le mode sécurisé https, via une balise meta.
 // 'HTTPS' est défini à une valeur non-vide si le script a été appelé via le protocole HTTPS. if ((!isset($_SERVER['HTTPS']))||($_SERVER['HTTPS']=="")){ $url="https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; echo ""; }



Modification du style de pages publique avec Stylus
Vader[FR] — 2015-10-28T16:23:01Z

		L'article initial concernait Stylish, mais depuis que l'extension a été abandonnée par son développeur pour y ajouter des spywares, l'extension Stylus la remplace.

voir les avis (en anglais) ici
Présentation

Le plugin Stylish Stylus pour Firefox permet d'appliquer à tout site ou page internet/intranet un style CSS personnalisé.
Chaque style "personnalisé" concernera un domaine, une url ...
Il ne peut modifier la structure des pages, mais en corrigeant ou améliorant le style CSS du site, il modifiera son apparence et donc sa lisibilité.
Le style déclaré avec le plugin Stylish Stylus viendra donc surcharger le style de la page.
Ce qui permet aisément de rendre plus lisible certains sites.
Exemple avec le site Tom's Hardware avant :



1) Installation du plugin et de ses extensions

Dans le menu Outils - Extensions et thèmes (CTRL-MAJ-A), chercher et installer depuis le catalogue
2) Déclaration d'un site

En cliquant sur la petite icône de Stylish Stylus 
, "Gestion", puis "Créer un nouveau style" et :
 pour cette URL - et donc pour une unique page
 pour une url commençant par...
 pour une url correspondant à une expression régulière
 pour une url sur un domaine
Il ne restera plus qu'à déclarer des règles CSS.
Exemple :



3) Création du style

On pourra s'aider des outils de développement web (CTRL-MAJ-I ou F12), notamment de l'inspecteur, et du plugin Colorzilla.
Afin de surcharger correctement les différents héritages de style et d'être sûr que le style "personnel" a la priorité sur le style "officiel" pour un élément, il est préférable d'être le plus complet possible dans la déclaration des règles.
Malheureusement, les style déclarés dans la page par attribut html style="" sur un élément ponctuel, ainsi que les styles mis par javascript ne peuvent être surchargés.

Cela dit, les propriétés max-width/height et min-width/height peuvent permettre de surcharger l'attribut width/height.
Prenons le cas du forum Tom's Hardware, www.tomshardware.fr/forum


Comme on peut le voir, le style n'est défini que dans des feuilles CSS, que l'on pourra surcharger.

On pourra donc surcharger les tailles fixes d'objet pour les rendre adaptables et ainsi profiter de toute la largeur de l'écran.
En parcourant l'arborescence de la page avec les outils de développement web, et les règles CSS associées à chaque élément, on peut aisément arriver à déterminer des règles CSS :
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain("tomshardware.fr") { .page, .frmTopic { width:auto; max-width:auto; } .blocLatestArticlesInner .blocLatestArticlesContent .latestArticlesCarousel.js .carousel-wrap { width:1400px; } #subBody.bgFooterBody .tguContent.line { height:1800px; } #subBody.bgFooterBody #mainSection.page.frmTopic .tguContent.line { height:2200px; } pre.html.bb-code { background-color: lightblue; } }
les tailles fixes sont adaptées à un écran particulier, et sont malheureusement indispensables en raison de la structure particulière des pages.
Ce qui donne :


On peut remarquer que lorsqu'un style "personnalisé" est appliqué par Stylish Stylus à une page, la couleur de l'icône change et un petit chiffre s'affiche 
.
EDIT 10/06/2016 : ajout de la couleur de background "lightblue" au code préformaté, ce qui donne :


l'espace vide à droite est la colonne Activité récente / post rapide / Experts récents / Derniers dossiers / Proposez votre astuce, que l'on ne voit pas car le post est très bas dans la page.

(voir topic d'origine)
4) Gestion des styles

Si un style est déclaré pour une page, l'icône sera colorisée 
. En cliquant sur l'icône, on pourra voir le style associé à la page, et si besoin le désactiver.
Les styles peuvent ensuite être gérés en cliquant simplement sur "Gestion" dans le module Stylus




Style CSS Tom's Hardware pour Stylish


Style CSS Papilles et pupilles pour Stylish
structure de la page extrêmement complexe, rendant la conception d'un CSS "de correction" difficile.




Cloner un site SPIP
Vader[FR] — 2015-09-11T16:39:38Z
Pour copier un site SPIP d'un serveur à un autre, il suffit de suivre une procédure assez simple.
Les deux sites doivent avoir la même version de SPIP.
1) sauvegarder la base SPIP
Menu Maintenance, Sauvegarder la base.

Effectuer une sauvegarde en cochant "Sauvegarder toutes les tables".
Cette option vous permet de sauvegarder le contenu de la base dans un fichier qui sera stocké dans le répertoire tmp/dump/. 

N'oubliez pas également de récupérer l'intégralité du répertoire IMG/, qui contient les images et les documents utilisés dans les articles et les rubriques.
2) Copier les fichiers
Copier les fichiers du site, à minima tmp/dump et IMG , via SCP, Rsync, FTP... du serveur "nominal" au serveur "copie".
3) Configuration de la base de données
ne faire que lors de la première copie

Il faut créer sur le serveur "copie" l'utilisateur SQL avec les mêmes identifiants et droits que sur le serveur "nominal", afin de ne pas avoir à modifier le fichier de configuration de SPIP.
4) Installation de SPIP pour connexion à la base de données
ne faire que lors de la première copie
Installer le site SPIP en indiquant selon le cas sur le serveur "nominal" :
 les identifiants accéder à la base de données
 le nom de la base et des tables
 authentification avec LDAP ou non
5) Restaurer la base SPIP
Dans l'interface privée de SPIP du site copié, aller dans le menu Maintenance, Restaurer la base.
Effectuer une restauration en choisissant le fichier créé à l'étape 1, lequel a été copié à l'étape 2 avec tmp/dump.

De même, restaurer toutes les tables et valider aux différents messages de confirmation.
Cette option vous permet de restaurer une sauvegarde précédemment effectuée de la base. À cet effet, le fichier contenant la sauvegarde doit avoir été placé dans le répertoire tmp/dump/