Community « Le forum « Besoin d'aide «

Comment styler Yacs ? (j'ai un début de réponse )

Bonjour, installé hier et adopté rapidement. Je voudrais maintenant personnaliser en douceur mon yacs . Changement d'icones par ci, d'images par là, je vois comment faire. Mais pour styler les submit des formulaires (recherche, authentification,...) je ne sais pas ou trouver la "source html".

Edit: j'ai trouvé dans la feuille de style elle même la référence aux boutons ( input[type="submit"] { /* change button appearance */). J'ai mis en commentaire le style d'origine et remplacé par "background: url(monimage.gif) no-repeat " mais comment je peux faire pour éliminer les caractères (>>) et (Authenticate- d'ailleurs la référence à la chaine en fr ne se fait pas ) car j'ai testé et les caractères apparaissent par dessus l'image?

Merci

Page bottom

Lucrecius from La Rochelle / Charente-Maritime / France 373 posts	on Feb. 9 2006 hummmmm, Bonjour et bienvenue dans la galaxie yacs ! "hummmmm"c'est le début de mes réponses... à tiroir . Comme souvent en informatique, il y a bcp de manières pour arriver à un résultat "équivalent". Pour ce qui concerne yacs, les modifications seront différentes (plus ou moins légères / structurelles) selon ce que vous souhaitez modifier. Voici une suggestion : La première chose à faire est de dériver un des styles proposés (Panneau de controle>(Modules)>Styles). Le choix se porte par exemple sur le style "joi" Trouver un nouveau nom... par exemple joi_eniope_1 De là, il est possible de modifier directement le fichier joi.css... qui a été recopié dans la nouvelle structure "yacs/skins/joi_eniope_1/". L'interface n'est pas très commode. Il est possible (je préfère pour ma part) d'attaquer directement le fichier css avec son éditeur préféré. ...on peut (et "on" va) plus loin en modifiant les fichiers (images) utilisés par ce skin. Il sont accessibles dans l'arborescence du skin en question. A ce stade, pas besoin de faire la moindre ligne de code. Si vous le souhaitez on pourra aller plus loin dans un prochain échange. Bon courage, et Au plaisir !
Eniope 21 posts	inspired from lucrecius on Feb. 10 2006 Bonjour, J'apprécie l'accueil sympathique. Effectivement j'applique la méthode que vous décrivez.Je pars du thème "digital" pour le dériver. Mais ce que j'aimerai faire, c'est mettre des images pour les boutons et pour arriver à cela, je ne pense pas pouvoir faire autrement que supprimer les libellés contenus dans les values. Sinon j'ai créé une section livre électronique. Le thème Digital étant sur 3 colonnes je me demande si il y a une astuce pour matérialiser une table des matières dans la colonne de droite sur toutes les pages de la section de ce livre. Peut on décider de plusieurs pages ou l'on aimerait voir s'afficher une même boite extra ? merci.
Fernand from Paris 1313 posts	inspired from eniope on Feb. 10 2006 Eniope : Bonjour et bienvenue, Bien entendu vous pouvez décider de plusieurs pages sur lesquelles s'appliquent une même boîte extra. Cela se gère au niveau de la section, en appliquant un style, celui que vous aurez choisi, dérivé, ou créé, à la section en question, la section "livre" par exemple. Toutes les sections filles de cette section obéiront à ce style, et toutes les pages contenues dans cette section. Résumons: vous pouvez créer un style différent par section. Les styles sont décrétés au niveau de: ma_section/modifier/options avancées/options. Là vous placez le nom du style nouvellement créé. Aménager son style, ou le créer, est une histoire qui se joue entre la feuille de style, le fichier template.php référent, et bien sur le répertoire images, connexe. Pour reprendre à l'envers vos questions, je ne vois pas ce qui vous empêcherait de 'bidouiller' votre feuille de style et de faire des essais (concernant mettre des images pour les boutons)... Si vous rencontrez des problèmes d'affichage alors que la feuille de style que vous avez créée a une syntaxe correcte, c'est que vous n'avez pas effectué les renvois nécessaires dans le fichier template.php correspondant. YACS autorise une grande indépendance. C'est un logiciel avec lequel il faut expérimenter, et qui vous le rendra au centuple. N'hésitez pas à partager le résultat de vos expériences en retour. Dans l'esprit de cette communauté, (yet another community system). Elles vont aider à établir une documentation efficace, basée sur le réel, dans laquelle l'aménagement des styles prendra une place importante.
Eniope 21 posts	on Feb. 10 2006 Fernand :"C'est un logiciel avec lequel il faut expérimenter, et qui vous le rendra au centuple" C'est bien ce que je ressens. Alors voila ce que jai fait aprés vous avoir lu: -Panneau de contrôle==>choisir un autre style ==>dériver ce style==>étape 1=choix du style de départ==>étape 2=Nom du nouveau style / Je l'affecte à la section livre==>étape 3 copier et transcoder les fichiers Ensuite, " ma_section/modifier/options avancées/options. Là vous placez le nom du style nouvellement créé " Ok, mais quel nom ? celui du dossier?, de la feuille de style?, avec with_ devant?, un chemin?(ex:skins/mon_style/untel.css), j'ai testé tout ça et ça ne s'applique pas à ma section. Je suis aussi allé faire un tour dans le fichier template.php du style actif. J'ai pu effectivement changer le nom de l'onglet "accueil" en "maison" par exemple. J'ai aussi changé le 's\authentifier' du code ligne 287: // a command to authenticate if(!Surfer::is_logged()) { $local['label_en'] = 'login'; $local['label_fr'] = 's\authentifier'; echo ' - '.Skin::build_link('users/login.php', get_local('label'), 'basic').' '; }sans que ça ne modifie quoi que ce soit sur ma page. Ce "petit bout de portail" (comme l'appelle lilou dans un autre post) est trés prometteur et il me tarde de savoir le personnaliser. A bientôt Edited by fernand on Feb. 10 2006
Fernand from Paris 1313 posts	inspired from eniope on Feb. 10 2006 Eniope : Je ne comprends pas votre message. Est-ce une question, une moquerie ? ...
Eniope 21 posts	on Feb. 10 2006 Fernand : Non aucune ironie J'ai été trés long à écrire ce message, je ne sais pas si vous avez lu la version achevée ! Mais non aucune ironie, des questions animées par un réel intérêt pour YACS.Dites moi ce qui à pu vous faire penser ça? a bientôt
Fernand from Paris 1313 posts	on Feb. 10 2006 Eniope :Désolé pour le malentendu. En fait, je n'avais reçu qu'une partie tronquée de votre réponse et ça n'avait pas de sens pour moi. D'autre part, un problème d'affichage est apparu sur ce fil... Si votre envoi précédent apparaît désormais complet, je ne puis en lire la partie droite - ce qui est très pénalisant.
Fernand from Paris 1313 posts	inspired from fernand on Feb. 10 2006 Eniope: Bien, j'ai réussi à reconstituer votre post. Je récapitule : vous avez créé votre style et lui avez donné un nom "style_livre" en suivant les trois étapes. Ensuite Votre question "quel nom ?". C'est celui de votre nouveau style : je l'appelle "style_livre". Ne vous occupez pas du fichier template.php pour le moment. C'était à titre indicatif pour plus tard. Dac ?! Auparavant, vous aviez créé votre section "livre". Vous allez maintenant dans cette section. Vous faites modifier. Puis vous allez dans options avancées. là, vous allez trouver des champs à remplir. Il y a surnom, éditeurs, options. D'accord ? Vous choisissez le champ option et vous ne vous préoccupez pas de tous les machins qui sont marqués en-dessous, mais vous écrivez seulement style_livre, sans rien d'autre... Pas de guillements, pas de parenthèses. Vous enregistrez votre modification, et c'est parti ! Votre section dépend désormais du style: "style_livre". Vous auriez aussi bien pu ne pas "bricoler" votre style dérivé avant. L'essentiel ayant été d'affecter "style_livre" à la section "livre". Vous avez ainsi tout votre temps pour aller dans le répertoire skins/style_livre et arranger ce style à votre guise en commençant par la feuille de styles et le fichier images. Il s'appliquera à la section "livre." Vérifiez que ça marche en changeant par exemple quelques couleurs dans la feuille de style. ça maarche ? Alors, c'est gagné !
Eniope 21 posts	inspired from fernand on Feb. 11 2006 Bien reçu ! je prends le temps de regarder tout ça et je reposte lundi. Bon we
Bernard from nearby-an-airport Associate, 7054 posts	on Feb. 11 2006 Le script qui permet de créer ou de modifier un article est articles/edit.php et c'est là qu'est généré le bouton submit. S'il s'agit d'utiliser des images en lieu et place d'élément HTML comme un bouton dans un formulaire, je suis prêt à apprendre, à condition que l'esthétique ne nuise pas à l'accessibilité du web. Si une solution existe pour afficher des images aux uns, et afficher un libellé textuel aux autres, merci de me l'indiquer, et je généraliserai le procédé à tout YACS.
Bernard from nearby-an-airport Associate, 7054 posts	inspired from eniope on Feb. 11 2006 Eniope: La table des matières pour une section peut être créée dans une boîte extra. Pour cela : 1. afficher la page d'index de la section qui contiendra les pages du livre électronique 2. créer une sous-section, et modifier les options de cette sous-section pour que les pages récentes s'affichent en tant que boîtes extra dans la section 3. afficher la page d'index de la sous-section, et créer un article pour la table des matières Normalement, cela devrait suffire à votre bonheur ?
Eniope 21 posts	on Feb. 12 2006 Bernard : Bonjour, Oui cela a fait mon bonheur. Pour la table des matières, je vais maintenant chercher pour èlargir la colonne de droite. Pour le bouton, finalement ce qui est le plus simple et conforme c'est: background-image: url(images/bg_button.png); appliqué à "input[type="submit"] { /* change button appearance */" dans la css du thème. Par contre appliquer un thème différent à une section particulière je n'y arrive pas. J'ai suivi à la lettre ce que Fernand m'a dit mais aucun changement pour la section concernée. J'ai regardé le freemind sur yacs et un lien m'a emmené vers epiKuros Consorti-Hom Effectivement sur ce Yacs la section "svt" à un thème différent et quand je regarde la source je vois bien l'appel à une css différente. Par contre, sur le yacs que je teste,l'appel au thème dans le champ option de la section concernée ne se répercute pas dans le code source de la section et j'ai toujours l'appel au thème initial. Voila, si vous voulez tester, c'est ici http://travaux.kehitys.fr/yacs/index.php et j'ai créé un utilisateur admin/admin.
Bernard from nearby-an-airport Associate, 7054 posts	inspired from eniope on Feb. 12 2006 Eniope: Pour appliquer un style foo_bar à une section, il faut taper le mot-clé skin_foo_bar dans le champ des options. Une autre possiblité est d'enrichir un style par des variantes appliquables aux différentes sections. C'est ce que j'ai fait pour le site www.zaniroli.com par exemple. Pour arriver au même résultat, il faut dupliquer le fichier template.php, modifier la réplique comme il convient (par exemple, en invoquant une feuille de style différente), et la lier à la section par le biais des options. Dans votre cas : 1. copie de template.php en template_livre.php 2. modification de la section et ajout du mot-clé variant_livre dans le champ des options 3. modifications itératives de template_livre.php jusqu'à obtention du résultat recherché. En résumé, utiliser le champ des options pour modifier le rendu effectué par YACS : avec le mot clé skin_nom_du_style pour appliquer le style nom_du_style (dans le répertoire skins/nom_du_style) avec le mot-clé variant_nom_de_variante pour charger template_nom_de_variante.php en lieu et place de template.php, dans le répertoire du style en vigueur pour le site En hopant que ça helpe
Bernard from nearby-an-airport Associate, 7054 posts	inspired from eniope on Feb. 12 2006 " Pour la table des matières, je vais maintenant chercher pour èlargir la colonne de droite. " Il faut chercher dans le css le style #extra_panel et changer la valeur de width. YACS génére des identifiants pour la balise body en fonction de la page visitée, et ceci peut être utilisé pour modifier la largeur du panneau extra. Ceci se voit dans la feuille digital.css d'origine, où le panneau extra est plus large sur la page d'accueil grâce au style suivant : body#home #extra_panel { /* wider at the home page, because of large news / width: 280px; } Par défaut les index des sections ont l'identifiant 'sections', et vous pourriez donc ajouter : body#sections #extra_panel { / wider at all section index pages / width: 280px; } Encore plus fort ! Si vous appliquez une variante à une section, comme suggéré ailleurs dans ce fil de discussion, cette variante deviendra l'identifiant utilisé sur l'index de la section en question. Si vous rajoutez l'option `variant_ma_variante` à une section, la balise body de sa page d'index aura l'identifiant ma_variante, ce qui permet de personnaliser le panneau extra pour cette section seulement, comme suit : body#ma_variante #extra_panel { / wider at this section only, because of large toc */ width: 280px; } Bon, ben je crois que là j'ai fait le tour des possibles, à vous de jouer 8)
Eniope 21 posts	on Feb. 13 2006 Bernard : vous hopâtes futé, ça m'a beaucoup helpé ! Pour le thème, il me manquait juste "skin" dans le mot clé et là: impeccable. Pour les finesses d'identification, comment dire, sans recul, comme ça, tout à trac, c'est enthousiasmant. Je m'y retrouve et j'ai le sentiment que Yacs n'impose pas de limites. Bon voila maintenant yapluqua.

15 comments