Page test pour vérifier les choix CSS

http://www.orbi.infini.fr/spip.php?page=demo%2Fbootstrap&var_mode=calcul

Installation d’un thème existant sous Zen Garden

J’ai installé le plugin Zen Garden pour pouvoir choisir un thème.
Celui-ci doit se ranger sous /themes (que j’ai donc crée)

Un test des thèmes disponibles (une centaine) pour les squelettes respectant la norme Z est proposé en http://zpip.spip.org/

Problème : les thèmes proposés pour Sarka 3.X ne fonctionne pas avec Sarka 4.10
Si en revanche, on installe le plugin correspondant à Sarka 3.X, Zen Garden propose alors un large choix de thèmes !

J’ai néanmoins voulu récupérer le thème "SarkaSip-Arclite" : je l’ai décompressé sur mon PC, et voulu le transferer par FTP (sans succès : je ne retrouve que des fichiers vides). J’ai donc fait à la main les opérations avec Alternc. Mais au final, je ne vois pas ce thème sous Zen Garden !
J’ai recommencé en utilisant FileZilla pour transférer tous les themes présents dans sarkaspip_themes.zip après l’avoir dézipper. Malheureusement aucun effet dans Zen Garden !

A noter que les themes qui ne sont pas dans un état stable ne sont pas proposé par Zen Garden. Voir le fichier plugin.xml. C’est par exemple le cas du theme "amelia" pourtant en place dans /themes.
A noter que si on ajoute " &tous=1" à l’adresse, on voit l’affichage des thèmes installés par le plugin SPIPr-dist

J’ai installé une version modifiée du fichier plugin.xml pour le theme sarka-arclite sans succes. D’ou retour à la version d’origine.
A cette occasion, j’ai constaté que la mention de la version Sarka au sein du fichier plugin était anormale : un ")" au lieu d’un "]". Apparemment, aucun effet !
Mais également que la version indiquée pour SPIP était incorrecte : correction toujours sans effet pour "sarka-arclite"
Le non affichage des themes "sarka ..." tient à la ligne :
"".
Une absence de toute ligne "utilise" n’est pas acceptée.
Il y a a priori un pb avec le nom du plugin (un petit "r" en fin). La bonne ligne aurait donc pu être
" " ... mais toujours rien !

J’ai également chargé le plugin de thème Z "Andreas 09 Blue" à la main depuis AlternC. Toujours aucun effet dans Zen Garden. Mais cela a provoqué une erreur empêchant tout affichage public. J’ai donc du le désactiver.

J’ai aussi installé le thème "andreas-orange" avec FTP FileZilla. Pas mieux !
Les permissions (en écriture) sont en place. Comme sur tous les répertoires !
Ayant noté " Pourtant ce thème est bien compatible avec Spip 3.1

Dans les commentaires postés sur Zen Garden, on lit que SarkaSpip Reloaded nécessiterait :
<utilise id="dist"/> dans plugin.xml
<utilise nom="spipr" compatibilite="];[" /> dans paquet.xml
testé avec themes / sarkaspip_blueblur / sans résultat !

En fait en rajoutant dans les thèmes Sarka, la ligne utilise id="spipr" version="[0.1.0-dev ;]" />, on affiche bien le thème dans Sarka, mais c’est tout : si on le sélectionne, il prend le thème Sarka par défaut !

Conclusions
1) Les thèmes Sarka ont leur plugin.xml non compatible avec Zen Garden
2) Et si on les rend compatible, cela n’a aucun effet : c’est le thème par défaut de sarkaspip qui s’impose (est ce lié aux squelettes ou à Bootstrap ?)

Test de mise en place d’un theme pour Zen Garden"
Theme : TestAL
Parti du plugin.xml pour thème Sarka-Arclite —> N’apparait pas dans Zen Garden
Rajouté la ligne utilise id="spipr" version="[0.1.0-dev ;]" /> —> Apparait

Igor, le 16/05, a désactivé Sarka-Spip et installé SPIPr-dist.
Compatible avec Zen Garden, on peut faire un choix de design plutôt simple
On peut même le faire en ligne en activant ce choix dans "Squelettes / Thèmes" (et même rendre possible le choix par le lecteur)
La documentation de SPIPr-dist est en ligne sur spir.nursit.com

Paramètrage de l’apparence par SarkaSpip

En réactivant Sarka-Spip, on constate que Spipr et Sarka sont compatibles. Et on peut alors profiter du paramètrage de Sarka. Il existe toutefois des anomalies qui peuvent apparaître, comme le double affichage de la liste des articles présentes dans la rubrique courante. Ce qui impose d’intervenir dans les squelettes.
Au final Spipr a été désactivé.

NB : Au sein du menu latéral "menuside", j’ai voulu faire appel au plugin "menu animé", c’est à dire en fait au fichier css "menu_anime", mais le résultat n’est pas probant.

J’ai tenté d’adapter les paramètres de présentation de SarkaSpip.
Tests sans succès (donc retour en arrière) :
– GrayDark : #5d5d9b —> #0064cd
– GrayLight : #a6a6cb —> #0064cd
Attention : même quand on revient aux valeurs initiales, les modifs sont conservés dans un fichier /squelettes/css/variables.less . Il faut le supprimer pour revenir aux thèmes d’origine.

Personnalisation du CSS

J’ai longuement cherché à mettre en évidence dans le menu latéral la sous-rubrique sélectionnée. Et donc à trouver dans quel fichier mettre mes surcharges CSS.
Finalement, j’ai trouvé dans la doc, que le plus simple était de créer un fichier /squelettes/css/perso.css.
Reste que la solution "en dur" retenue ne s’adapte pas aux possibilités de Zen Garden. Il faudrait passer par un fichier .less afin de s’adapter au thème choisi.

Attention : J’y ai demandé le non affichage de la section "footer" (pour gagner des lignes blanches en bas de page)

L’image prise en compte dans le bandeau supérieur doit être rangée dans
/squelettes/img/bg-header.jpg.
Prévoir 1200 pixels de large.

Une page d’explication de base : http://dutailly.net/perso-dist-spip-decoration

Création d’un thème "Orbi"

Il est compatible Zen Garden.
En effet je suis parti d’une copie du thème Cerulean. J’ai baptisé la copie Orbi et fait les adaptions suivantes :
6 fichiers .less :

• bootswatch : Les choix typographyques
  Import de http://fonts.googleapis.com/css?family=Telex
• layouts : Contenu
  @import "bootstrap/css/layouts.less" ;
  #contentfloat:right ; —> Contenu à droite, les noisettes à gauche
  #asidefloat:left ;
  #extrafloat:left ;clear:left ;

• navbar : Contenu
  @import "bootstrap/css/navbar.less" ;
  .navbar.row margin-left : 0 ;
  .navbar .navbar-wrap float : none ;display : block ;margin-left : auto ;margin-right : auto ;
  .navbar #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground) ;
  .navbar-inverse
  #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground) ;
  .navbar-inner border : 0 ;.border-radius(0) ;

• responsive : Spécifités aux écrans de petite taille
  @media (max-width : 450px) et @media (max-width : 767px)
• theme : Données sur .header, body, .footer
  J’ai réecrit en partie le footer car trop de lignes blanches (et peut-être une erreur).
  Juste au dessus, on a
  <div class="extra secondary span3" id="extra"><!-- Rien -->                                </div>
  Cela crée aussi des lignes blanches à supprimer en bas du bloc Content

• variables : Définition de toutes les variables @xxxx
  On y trouve en particulier les largeurs des blocs selon la largeur de l’écran avec
  – par défaut pour 940pixels
  – le cas des écrans de >= 1200 pixels
  – les écrans de 768 à 979 pixels

NB : Ne pas oublier que /squelettes/css/perso.html prime en définitif sur tous ces choix