StatusNet

Changer le thème de StatusNet

Guillaume

Guillaume

— 5 min read

Malgré quelques déboires avec mon instance StatusNet qui me fait des misères (mais je pense à un problème inhérent à ma configuration serveur vu qu’une nouvelle instance n’a rien changé à certains problèmes et, je crois, va me pousser à changer de crèmerie), j’apprécie cette plate-forme et les gens qu’on y trouve.

Pourtant, comme soutenu dans les commentaires de ce billet présentant un « bouton de partage » dédié à identi.ca :

L’idée n’est certes pas mal et ça fait plaisir de voir se développer des outils annexes à StatusNet (dont identi.ca n’est que la vitrine), mais c’est pour moi un camouflet. Je m’explique : StatusNet est un réseau dont l’essence est la décentralisation. Dans cette idée, ceux qui se plaignent d’identi.ca n’ont pour moi voulu que reproduire leurs habitudes sur Twitter mais dans une structure plus « libre » quoique toujours centralisée ; en gros, ils n’ont rien compris à StatusNet.

Par ce fonctionnement dédié à identi.ca, un tel bouton (que je salue : c’est vraiment bien d’y avoir pensé et passé du temps) perd énormément de son intérêt si de facto il se limite à identi.ca et. Il lui faudrait être « modulaire » et se baigner dans les joies de OStatus de sorte que chacun puisse sélectionner individuellement son pod de prédilection à l’instar des boutons de partage sur Diaspora*.


Pour moi, StatusNet c’est l’assurance de se sentir chez soi, indépendant d’un service centralisateur et responsable de ses propres contenus. Si ça bugue comme dans mon cas (mais je chipote beaucoup donc ça augmente les chances de tout foutre en l’air), c’est l’occasion d’apprendre et d’aller à la rencontre des autres fédérés, faire des rencontres et des échanges techniques.

Je regarderai au code de Vincent malgré mes faibles connaissances techniques (c’est pour ça que je salue sincèrement la création de l’objet, je pense que c’est vraiment une bonne chose en soi), quoique le « comptage » des partages me semble être un problème en soi de la décentralisation et difficilement corrigeable.

Dans sa réponse à mon commentaire, il a posté ceci qui je crois est une très bonne idée, à l’instar de podupti.me pour Diaspora* :

J’ai pas le temps ni les ressources pour maintenir un noeud, et jusque là aucune page ne répertorie tous les noeuds triés par santé/nombre d’utilisateurs/fiabilité (httpS ? uptime ? bande passante ?)
Je rajouterais même le temps de réponse, la localisation pour de la juridiction à laquelle sont soumises les données sont soumises, l’IPV6, … Dans cet ordre d’idée, il existe déjà quelques listes : ici, ici ou là, mais il faudrait un outil de référencement j’en suis conscient, sauf qu’il faudrait gérer aussi les instances (comme la mienne) ne tournant que pour une seule personne.

Bon, et ce thème alors ?

J’y viens. D’abord voici quelques thèmes développés par la communauté : L’utilisation est la même à chaque fois : mettez le dossier du thème dans votre dossier avec tous vos thèmes, puis éditez config.php de la sorte : 
$config['site']['theme'] = 'nom-du-dossier-du-theme-choisi';
Simple, non ? Mais alors, me direz-vous, c’est tout ? Que nenni, il me reste encore deux points à aborder : la création d’un child theme, et les changements de polices.

Le child theme

Disons « thème enfant » à savoir un thème dépendant d’un autre, plus complet, sur lequel il apportera une série de modifications. D’ailleurs, les thèmes sur StatusNet fonctionnent selon se principe même par défaut : tous les thèmes appellent le thème neo et le thème base, et y apportent un complément et des modifications. Rien ne nous empêche, donc, d’appeler à notre tour l’un de ces thèmes pour y faire quelques modifications sans non plus devoir éditer la source à chaque mise à jour de celle-ci.

C’est ce que j’ai fait pour ma propre instance, à savoir installer le thème neo-kafei, créer un thème neo-child, le lier neo-kafei selon cette procédure et y faire mes modifications. Voici ma procédure, en SSH, je la détaillerai ensuite :

$ cd path/to/statusnet/theme/
$ wget http://status.kafei.ca/neo-kafei.zip
$ unzip neo-kafei.zip
$ mkdir neo-child
$ echo "include=neo-kafei" > neo-child/theme.ini
$ mkdir neo-child/css/
$ touch neo-child/css/display.css

Voici la description :

  • se placer dans le dossier de thèmes pour StatusNet ;
  • télécharger l’archive du thème désiré, ici neo-kafei ;
  • extraire ladite archive
  • créer le dossier neo-child/ ;
  • créer le fichier theme.ini dans le dossier neo-child et le lier à neo-kafei ;
  • créer le dossier css/ pour y placer nos modifications
  • créer le fichier display.css pour pouvoir les inscrire (note, ce peut êtremp-screen.css qui est dévolu à l’affichage mobile) ;

Modifications

Pour mes besoins, je n’ai fait que modifier la couleur de fond, pour une plus claire, voici comment ça se présente dans mon fichier display.css. 
/** theme: neo-blue
 *
 * @package   StatusNet
 * @author    Samantha Doherty <sammy@status.net>
 * @copyright 2011 StatusNet, Inc.
 * @license   http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported
 * @link      http://status.net/
 * @modded    This file was modded and renamed to neo-kafei by Kafei Interactif Inc.
 * @remodded  This file was remodded and renamed to neo-child by PostBlue.
 */
@media screen, projection, tv {

body {

    background: #dcdcdc;

}

C’est aussi simple que ça. Une bonne introduction à ma seconde modification : changer la police de l’instance histoire de remplacer Lato.

Changer de police

Cette fois ci les modifications sont plus conséquentes, quoique relativement simples à mon avis une fois que l’on procède dans l’ordre.

Dans neo-child/ j’ai créé le dossier fonts/ où je place différents dossiers, chacun contenant une police différente (histoire de pouvoir passer simplement de l’une à l’autre). Pour mon exemple, j’utilise Cantarell.

Afin de peupler le dossier fonts/cantarell/ créé pour l’heure, j’ai profité de l’outil de création @font-face de Font Squirrel, sélectionnant le français comme Subset. J’ai exporté tout le bazar (sauf demo.html) et réédité display.css :

/** theme: neo-blue
 *
 * @package   StatusNet
 * @author    Samantha Doherty <sammy@status.net>
 * @copyright 2011 StatusNet, Inc.
 * @license   http://creativecommons.org/licenses/by/3.0/ Creative Commons Attribution 3.0 Unported
 * @link      http://status.net/
 * @modded    This file was modded and renamed to neo-kafei by Kafei Interactif Inc.
 * @remodded  This file was remodded and renamed to neo-postblue by PostBlue.
 */
@font-face {
    font-family: 'Cantarell';
    src: url('../fonts/cantarell/Cantarell-Regular-webfont.eot');
    src: url('../fonts/cantarell/Cantarell-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/cantarell/Cantarell-Regular-webfont.woff') format('woff'),
         url('../fonts/cantarell/Cantarell-Regular-webfont.ttf') format('truetype'),
         url('../fonts/cantarell/Cantarell-Regular-webfont.svg#CantarellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Cantarell';
    src: url('../fonts/cantarell/Cantarell-Oblique-webfont.woff') format('woff'),
         url('../fonts/cantarell/Cantarell-Oblique-webfont.ttf') format('truetype'),
         url('../fonts/cantarell/Cantarell-Oblique-webfont.svg#CantarellOblique') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Cantarell';
    src: url('../fonts/cantarell/Cantarell-Bold-webfont.woff') format('woff'),
         url('../fonts/cantarell/Cantarell-Bold-webfont.ttf') format('truetype'),
         url('../fonts/cantarell/Cantarell-Bold-webfont.svg#CantarellBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Cantarell';
    src: url('../fonts/cantarell/Cantarell-BoldOblique-webfont.woff') format('woff'),
         url('../fonts/cantarell/Cantarell-BoldOblique-webfont.ttf') format('truetype'),
         url('../fonts/cantarell/Cantarell-BoldOblique-webfont.svg#CantarellBoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;

}

@media screen, projection, tv {

body {
    background: #dcdcdc;
    font-family: 'Cantarell', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input, textarea, select, option {
    font-family: 'Cantarell', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

C’est tout pour l’affichage standard. Libre à vous de vous amuser avec l’affichage mobile de la même façon, et de bien sélectionner neo-child dans votre config.php.

Read more