Zephite: Votre assistant personnel pour créer vos propre themes pour yAronet! - Page 1

Godzil a souhaité poursuivre une discussion dérivée dans un nouveau sujet. La discussion initiale a eu lieu dans le sujet topics/150713-mises-a-jour-de-yaronet/96#post-2872 tandis que la discussion dérivée continue dans le sujet topics/188784-zephite-votre-assistant-personnel-pour-creer-vos-propre-themes-pour-yaronet où les messages en rapport ont été copiés.

edit post fork:

Ce topic est suite a l'annonce de Zeph sur le pack pour creer votre propre theme, qui fait 99% du boulot de Zephite, comme ce n'est pas forcement aisé pour tout le monde et/ou que ca peux etre chiant a editer/test j'ai décidé de faire un outil pour rendre ENCORE plus simple

---

Quelque potentiel themes (qui peuvent etre retouché, certains ne sont que des ebauches) :

Brunnite (@Godzil):
#7F0_#0F7_#FFA_#F0F_#0FF_#FF0_#F00_#000_#440_#00F_#F00_#FF0_#0F0

Ximoonite (@Godzil):
#000_#CCF_#AAF_#F60_#33F_#3FF_#F60_#000_#222_#FA3_#fc9_#ff6_#9cf

Kevinite (@Kevin Kofler):
black_white_white_white_white_white_#444_black_#888_black_#CCC_#EEE_white

Terminalite (@Godzil):
yellow_black_black_black_green_yellow_#444_green_#888_black_#ccc_#eee_white

Darkonite (@Godzil):
V1: #444_#111_#000_#000_#222_#333_#888_#777_#999_#666_#000_#000_#000V2: #444_#111_#000_#000_#222_#333_#777_#888_#999_#666_#300_#330_#030
N'hésitez pas a partager vos créations!

---

Ce n'est pas (encore) super fancy, mais ca marche:

http://box.godzil.net/~godzil/zephite/

Rien n'est sauvé du coté serveur, donc si vous rentrez n'importe quoi ca n'impacte que vous.

Par exemple j'ai rapidement fait un theme "terminalite":

/// Background styles
@highlight:	yellow;
@input:	        black;
@overlay:   	black;
@primary:   	black;
@secondary:	green;
@tertiary:	yellow;

// Foreground styles
@accent:	#444;
@paragraph:	green;
@reference:	#888;
@title: 	black;

// Status styles
@status-fail:	#ccc;
@status-info:	#eee;
@status-ok:	white;

(probablement besoin d'etre un poil modifié)

Rajouté une fonction a la con, la possibilité d'appliquer un theme a partir d'une chaine simple genre:

yellow_black_black_black_green_yellow_#444_green_#888_black_#ccc_#eee_white

Les valeurs sont en clair, donc il est evident si quelqu'un essaye de vous faire coller un truc pas net (et ca n'est pas appliqué via du GET donc marche pas a travers un lien)

Je rendrais la page un peu moins moche plus tard, c'est fait sur un coin de table la.

Si vous avez des idees de choses a faire/changer n'hesitez pas

^2, je n'avais pas osé faire la remarque mais l'import en une ligne est effectivement une bonne idée, merci

Tiens c'est cool cet outil ! Avec autant de solutions pour faciliter la création vous n'avez plus aucune excuse, ils sont où les nouveaux thèmes ?

j'aime beaucoup la skin standard

Zeph: ton code actuel n’en supporte pas les couleurs avec canal alpha, je ne en trompe pas?

Je n'ai pas du tout testé, je fais seulement des interpolations entre les couleurs de base donc a priori si, ça devrait fonctionner ?

il faut que je reteste.

Ok si ca marche, c'est parce que quand j'avais testé je n'avais pas utilisé les bon "champs" (enfin surtout je ne connaisais pas quel champs est lequel)

Pour savoir où sont rangées les choses, même si c'est un peu le bordel :

- layout/html/theme/*/color.inc.less définit les couleurs de bases pour un thème ; normalement c'est le seul fichier où on trouve des constantes de couleur
- layout/html/color.inc.less définit un jeu plus complet de couleurs à partir de celles de base ; c'est ce fichier qui est inclus dans à peu près tous les autres
- layout/html/page.less contient les définitions utilisées sur toutes les pages comme l'en-tête, le menu, le pied-de-page, les cadres, etc.

Les autres fichiers sont en général spécifiques à une page, donc moins susceptibles de contenir des informations utiles.

LOL Top ! Je vais voir si j'arrive à faire quelque chose dans les jours à venir, mais c'est compliqué en ce moment >.<

N'utilisez pas cette page pour utiliser le Zephite:

http://box.godzil.net/~godzil/zephite/test.php

C'est la version avec lequel je met a jours les choses, donc ca peux casser a tout moment.

Je vais tester un peu d'asynchrone pour etre plus rapide sur le chargement, mais deja avoir les deux cote a cote change pas mal la donne je trouve

Yay super !!! Vaiment du bon boulot

Wow merci !
Ça donne envie de tester

Classe

Mis a jour la version normal avec la derniere version de test


Changement:
- Les controles et la page de test sont sur la meme page!
- Les liens rafraichissent la zone de preview plutot que recharger la page complete
- L'interface est toujorus aussi austere
- Boo a mis son chapeau de chantier (grace a du merveilleux javascript)
- Les liens dans la page de preview ne font "rien" (aka il ne pointent plus vers about:blank affichant.. une page vide (Merci encore Mr Javascript)

TODO:
- Rendre l'interface de choix un peu plus, humm joyeuse?
- Mettre a jour les valeurs sans recharger toute la page (? est-ce vraiment utile?)
- Rendre le single line theme plus simple a copier coller
- Utiliser des color pick plutot que des champ texte?
- Ajouter un bouton pour revenir au theme par default
- il faut que je regarde il y a peut etre moyen de forder le script de zeph a se recharger sans recharger toute la page (et donc lire les nouvelles valeurs)

Si vous avez d'autres idees.


Un essai a la con, mais qui rends pas si mal au final je trouve:

Darkonite: #444_#111_#000_#000_#222_#333_#888_#777_#999_#666_#000_#000_#000

Très pratique l'outil

En revanche Darkonite c'est heu... sombre, non ?

À mon avis c'est volontaire
(moi j'aime bien, faut voir en plein soleil si ça reste un peu lisible par contre ^^)

En même temps vu le nom tu t’attendais à un thème clair?


\o/ j'ai trouvé un "bug" amusant.
Comme tes captures sont d'un utilisateur non loggé et qu'il semblerais que tu masque certaines fonctionalité juste en faisant passer des liens comme n'en etant pas, et comme mon traitement automatique des liens, est.. automatique et sans discernement pour empecher de cliquer et se retrouver avec un page blanche, sur la page topic, cliquer sur un pseudo a un effet amusant ou il affiche lle meme type de popin que les minimessages, mais il y affiche la page en cours

Me suis un peu amusé:

Bon et j'arrête la sur ce topic, (enfin tant qu'il n'y a pas de nouvelles info) je crée un nouveau pour Zephite

(tiens c'est marrant, la duplication garde l'information comme quoi un post à été édité)

Si vous trouvez qu'il y a trop de couleurs sur yN: black_white_white_white_white_white_#444_black_#888_black_#ccc_#eee_white

Sinon, si tu changes dans topic.html:
<div id="post-60" class="panel post recall state0"
en:
<div id="post-60" class="panel panel-hl post recall state0"
on peut aussi tester le highlight.

Petit changement dans Darkonite, le texte est un peu plus contrasté ainsi: #444_#111_#000_#000_#222_#333_#777_#888_#999_#666_#300_#330_#030

Kevin si tu veux lui donner un nom, je change ce que j'ai mis en ./2

Petite ébauche pour la nuit:

Nucléarite: #EFA30B_#BDBE66_#FBFF3A_#000_#EFA30B_#FFE100_#665500_#000_#332200_#FFF_#ccc_#eee_white

Ah oui un peu mieux pour Darkonite, je suis toujours pas un grand fan des thèmes noirs mais il est plus lisible comme ça

(en revanche je pense que je fatiguerais en 3 minutes si j'utilisais Nucléarite, faut ajouter des couleurs un peu plus pâles au moins pour les fonds )

a ce point le thème custom sérialisé pourrait être une option dans le profil non?

Elle est sympa, Darkonite !

Squalyl: non parceque le theme serialisé n'a aucune protection, je l'ai fait tel que parce que c'est plus simple a copier coller, mais si Zeph veux faire une tel fonction, il faut la blinder pour eviter de coller des trucs douteux.

Zeph: Pour Nucléarite c'est normal, comme dit c'est un premier jet, il y a encore un peu de boulot, mais le fait que ca soit flash est normal, apres tout c'est les couleurs d'un champignon "magique" )
Ceci dit petit truc, c'est dommage que la couleur du cadre principal sur la page principale (ici le jaune clair) soit la meme que le premier post, et que les autres soient de la couleiur des cadres ici en jaune/gris je cherchais a avoir l'inverse, mais si j'inverse au niveau des topic, ca rends pas des masses bien sur la page principale :/

Dark-Light rapide : #111_#000_#000_#000_#000_#000_#0F0_#FA0_#FB1_#FF0_#ECC_#CCE_#CDC

Ouch, on dirait une skin de C0wb0y x_x

./25 & ./27 : heu non, le problème c'est surtout que les pages HTML utilisées pour Zephite incluent directement les fichiers .less + du code JS pour produire les CSS dynamiquement (à chaque affichage). C'est pratique pour du développement, mais dans la version de production les CSS sont pré-générés côté serveur. Même si ça serait techniquement possible d'utiliser une version qui inclue des fichiers .less en production, je préfère éviter ça :/