Étant enfin de retour sur Ubuntu, je peux maintenant faire du support.
Je rappelle que je suis toujours absente du jeudi soir au dimanche soir jusqu'à la fin de l'été !
Merci de votre compréhension.
Now that I'm back on Ubuntu, I can do support again.
I also remind that I am still absent from Thursday evening to Sunday evening until the end of summer !
Thanks for your understanding.
Important links - Liens importants
Règles - Rules | Présentez-vous - Introduce yourself | Problème d'inscription ? - Registration problem ?
Ishimaru-Design > Tutoriaux, ressources et support (fr) > phpBB3 > Tutoriels & Astuces > [subsilver2] Modification de l'en-tête et du menu
Pages (2): [1] - 2
| Ishimaru Chiaki | #1 22/09/2009 - 23h17 |
|
Class : ID Admin |
On voit beaucoup de documentation relative au style Prosilver, le style activé par défaut dans le package de phpBB3. Mais on voit peu de documentation relative à subsilver2, ce qui fait que l'on voit fréquemment des utilisateurs tenter sans succès de suivre la documentation relative àux styles Prosilver pour modifier un style subsilver2, en raison des différences entre la structure HTML de subsilver2, qui utilise des tableaux, et celle de prosilver, qui est sans tableaux.
L'un des sujets récurrent à la modification d'un style basé sur subsilver2 est la modification de l'en-tête et du menu. Cette documentation parlera donc de ce sujet, et pendant tout le long de cette documentation, les modifications se feront sur le fichier styles/subsilver2/template/overall_header.html Les modifications ont été testées sur un phpBB 3.0.5 avec un style subsilver2 parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Ishimaru Chiaki | #2 23/09/2009 - 00h27 |
|
Class : ID Admin |
Centrer le logo
Une modification qui est souvent demandée, c'est de pouvoir centrer le logo pour avoir le texte sous le logo et pour pouvoir afficher une grande bannière. Pour faire cette modification, il faudra modifier la structure du tableau de l'en-tête, qui compte deux cellules côte à côte, pour les placer l'une en dessous de l'autre. Voici l'apparence de départ : Capture Ouvrez votre fichier styles/subsilver2/template/overall_header.html et cherchez ce morceau de code : <div id="logodesc">Juste après cette ligne : <td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>Ajoutez ceci : </tr>On regarde ce que ça donne : Capture Notre titre et description sont bien en dessous, mais le logo n'est pas centré. On va corriger ça ! Toujours dans overall_header.html, cherchez cette ligne : <td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>Ajoutez cet attribut à l'intérieur de la balise <td> : align="center"Ce qui vous donnera ceci : <td align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>On regarde le résultat : Capture Notre logo est maintenant centré ! Maintenant, si vous voulez enlever le titre et la description du site (quoique pas conseillé pour le référencement), vous n'avez qu'à mettre en commentaire cette partie de code : <tr>pour obtenir ceci : <!-- tr>ce qui vous donnera ce résultat : Capture Et pour corriger ce petit problème d'accessibilité, il vous faudra remplacer la variable {SITE_LOGO_IMG} afin de pouvoir utiliser l'attribut alt="" pour y insérer le nom du site. Pour cela, reprenez ce code : <td align="center"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>Remplacez {SITE_LOGO_IMG}par <img src="{T_IMAGESET_PATH}/logo.png" alt="{SITENAME}" height="XXX" width="XXX" />(changez "logo.png" par le nom et l'extension de votre logo, ainsi que les valeurs de height et width) De cette façon, ceux qui ne peuvent pas voir ou charger la bannière auront quand même le nom du site affiché ! Maintenant, il ne vous reste qu'à remplacer le logo dans le dossier /imageset/ puis à éditer le fichier imageset.cfg pour changer le nom du fichier et ses dimensions. Mais pour une bannière à largeur définie, je vous conseille de donner une largeur fixe à votre style.
Edited by Ishimaru Chiaki on 22/01/2011 at 14h55.
parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Ishimaru Chiaki | #3 23/09/2009 - 00h29 |
|
Class : ID Admin |
Centrer les liens du menu
Certains veulent mettre les liens ensemble et les centrer, afin de pouvoir utiliser de gros boutons pour le menu de navigation. Comme pour le header, le menu est composé d'un tableau contenant deux cellules, positionnées côte à côte. Mais cette fois, plutôt que de les repositionner, on va les fusionner. Pour la démonstration, je vais continuer avec le fichier que j'ai commencé à modifier, ce qui nous donne ce résultat avant modification du menu : Capture Dans votre fichier overall_header.html, cherchez ce bout de code : <div id="menubar">Pour la fusion des cellules, vous devez chercher et effacer ces deux lignes : </td>On regarde le résultat : Capture On remarque que nos liens sont maintenant ensemble, mais le menu n'est pas centré. Pour le centrer, on va faire la même chose qu'avec le logo, en ajoutant align="center" à l'intérieur de la balise <td> qui contient les liens. Vous cherchez cette ligne : <td class="genmed">Vous ajoutez l'attribut align="center" pour obtenir ceci : <td class="genmed" align="center">On regarde maintenant le résultat final : Capture Tout ce qu'il vous reste maintenant, c'est de personnaliser la bannière et le style de la barre de menu ! parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Ishimaru Chiaki | #4 23/09/2009 - 02h54 |
|
Class : ID Admin |
Utiliser des gros boutons dans le menu
Maintenant, toujours en partant de mon fichier overall_header.html modifié ainsi que de ce rendu, je vais vous montrer à avoir des gros boutons, plutôt que des textes avec un petit icône à côté de chaque lien. La méthode que je vais vous montrer vous permettra de faire en sorte que ces boutons soient multilingues et donc, d'avoir les boutons correspondant à la langue du visiteur, si votre forum est bilingue ou bien que vous voulez faire un style multilingue que vous comptez mettre en libre téléchargement. Alors que sur phpBB2, il fallait ajouter du code supplémentaire dans le fichier de configuration du template pour faire gérer le multi-langue dans la barre de navigation, c'est beaucoup plus simple sur phpBB3, grâce à une variable qui fonctionne partout dans les templates et qui est ceci : {T_IMAGESET_LANG_PATH}Cette variable correspond au dossier de langue de votre imageset. Donc, si vous avez déjà vos boutons, placez-les dans le dossier styles/subsilver2/imageset/fr/ pour le français et/ou styles/subsilver2/imageset/en/ pour l'anglais, et ainsi de suite si vous avez ajouté d'autres langues. Pour l'exemple, j'ai pris des boutons roses St-Valentin qui proviennent d'un de mes thèmes forumactif. Même si le rendu sera affreux, l'important c'est de montrer les possibilités. Maintenant, on est prêt à modifier overall_header.html pour installer les gros boutons de notre menu ! Reprenons le code du menu que vous avez précédemment centré : <div id="menubar">Maintenant, pour chaque lien, remplacez tous les {T_THEME_PATH}/imagespar {{T_IMAGESET_LANG_PATH}}N'oubliez pas de changer l'extension de vos images si vous utilisez des PNGs par exemple, comme c'est mon cas. Ce qui me donne ceci de mon côté : <div id="menubar">Maintenant, vérifiez que ce soit bien vos boutons, et non des étoiles qui s'affichent, comme dans mon exemple où vous voyez des carrés roses correspondant à mes boutons : Capture Si tous vos boutons s'affichent, on passe à leur agrandissement et à la mise de ces textes bruts en textes alternatifs en lieu et place des étoiles, la raison étant que pour des raisons d'accessibilité, si une image doit jouer un rôle essentiel dans la navigation, comme c'est le cas de nos boutons de navigation, l'attribut alt="" de ces images doit être correctement renseigné afin que ces textes s'affichent si les images ne s'affichent pas ou si un non-voyant ou un utilisateur de navigateur texte visite le forum. Ceci avait peu d'importance avant cette modification, puisque les textes bruts étaient présents et donc, on n'avait pas besoin d'un doublon, mais maintenant que l'on ne va avoir que des boutons, ce détail devient essentiel pour que votre thème reste accessible. On prend donc un exemple dans notre menu : <a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" width="12" height="13" alt="*" /> {L_FAQ}</a>On enlève width="12" height="13" et ensuite, on déplace {L_FAQ} en lieu et place de l'étoile * se trouvant à l'intérieur de l'attribut alt="", ce qui donne ceci : <a href="{U_FAQ}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_faq.png" alt="{L_FAQ}" /></a>Appliquez ensuite la même méthode à chacun des liens. Attention : Dans le cas du lien "X Nouveaux messages", vous devez copier tout ce qui se trouve entre /> et </a> du lien, ce qui signifie ce bout-là : {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->Maintenant, vous devriez avoir un code similaire à ceci : <div id="menubar">Allons voir le résultat : Capture Les boutons sont maintenant à la bonne grosseur, mais il y a des espaces entre eux, en plus qu'on a le même bouton pour "Connexion" et "Déconnexion". On va donc corriger ces détails. On enlève d'abord les espaces (code ), pour coller nos boutons. Mais ceci ne suffira pas, puisqu'il faudra enlever certains retours chariot, surtout autour du bouton FAQ où des il y avait des espaces persistants de chaque côté. Cela me donne donc ceci comme code : <div id="menubar">On regarde ce que ça donne graphiquement, en étant connecté : Capture Et la même chose, en étant déconnecté : Capture (note : dans la deuxième capture, le gros espace sans texte s'explique par le fait que le bouton "m'enregistrer" est un GIF animé, avec un texte clignotant.) Maintenant, il reste à régler le détail du bouton "Connecxion/Déconnexion", et aussi un truc pour avoir un bouton MP différent lorsqu'il y a de nouveaux messages privés. Je commence donc par le bouton "Connexion/Déconnexion" On prends le bout de code correspondant : <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /></a><!-- ENDIF -->Maintenant, on aura besoin d'utiliser la structure conditionnelle vérifiant si l'on est connecté : <!-- IF S_USER_LOGGED_IN -->La condition doit obligatoirement se terminer avec un <!-- ENDIF -->, mais on peut aussi utiliser <!-- ELSE --> en complément, pour afficher un élément alternatif lorsque la condition n'est pas remplie. On va justement l'utiliser pour notre bouton ! Ainsi, si l'utilisateur est connecté, le bouton "Déconnexion" s'affiche, sinon c'est le bouton "Connexion" qui s'affiche. Et une petite note pour ceux qui étaient habitués à phpBB2 : sachez que sur phpBB3, vous pouvez maintenant insérer ces commentaires de façon "inline" et donc, sans avoir à isoler ces commentaires sur des lignes séparées, chose qui n'était pas faisable avec phpBB2, sous peine de voir votre barre amputée ! On va maintenant appliquer ça à notre bouton Connexion/Déconnexion : <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><!-- IF S_USER_LOGGED_IN --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_logout.png" alt="{L_LOGIN_LOGOUT}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /><!-- ENDIF --></a><!-- ENDIF -->On regarde le résultat, après s'être reconnecté : Capture Maintenant, le bouton Déconnexion s'affiche ! Maintenant, on passe au bonus : Certains voudront utiliser un bouton différent selon si le membre a des nouveaux messages privés ou non. On prends donc la partie correspondante au bouton des messages privés : <!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.png" alt="{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF -->" /></a><!-- ENDIF -->Vous pouvez remarquer la switch <!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, c'est elle qu'on va utiliser pour notre bouton, en compagnie d'un <!-- ELSE --> pour afficher un bouton différent. On l'applique donc : <!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}"><!-- IF PRIVATE_MESSAGE_INFO_UNREAD --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message_new.gif" alt="{PRIVATE_MESSAGE_INFO}, {PRIVATE_MESSAGE_INFO_UNREAD}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_message.pngf" alt="{PRIVATE_MESSAGE_INFO}" /><!-- ENDIF --></a><!-- ENDIF -->Maintenant, pour visualiser le résultat, ça tombe bien, puisque sur mon forum de test utilisé pour les captures, l'un des comptes-test a un message privé non-lu, donc je n'ai qu'à me connecter sous ce compte pour voir le résultat : Capture Vous ne voyez plus le texte du bouton dans ma capture, puisqu'il s'agit d'un GIF avec un texte clignotant, ce qui correspond à mon bouton "Nouveaux messages privés" ! Maintenant, vous pouvez aussi modifier la disposition des boutons, comme par exemple mettre "Connexion/déconnexion" à la fin plutôt qu'au début ! Donc pour cet exemple, je déplace ce bloc : <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><!-- IF S_USER_LOGGED_IN --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_logout.png" alt="{L_LOGIN_LOGOUT}" /><!-- ELSE --><img src="{T_IMAGESET_LANG_PATH}/icon_mini_login.png" alt="{L_LOGIN_LOGOUT}" /><!-- ENDIF --></a><!-- ENDIF -->pour le placer juste avant : </td>Voici maintenant le code final : <div id="menubar">Et le résultat visuel final de notre barre : Capture Voilà, vous avez maintenant votre barre avec de gros boutons ! parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Philippe | #5 09/07/2010 - 22h41 |
|
Class : ID Newbie Offline Www |
Merci pour l'astuce.
Cela fonctionne avec phpBB 3.0.7-PL1 - subsilver2 Centrer le logo = ok Centrer la barre des menus = ok pour les boutons je n'ai pas essayer, n'ayant pas de gros boutons à mettre. Ph
Edited by Philippe on 09/07/2010 at 23h08.
Patauge allègrement dans le phpBB
|
| Ishimaru Chiaki | #6 10/07/2010 - 01h16 |
|
Class : ID Admin |
Pour les boutons, c'est une chose qui est souvent demandée, donc tant qu'à écrire des astuces qui concernent le header, autant les réunir à un même endroit. Tu n'es pas obligé de mettre des boutons, mais ceux qui veulent des boutons voudront généralement les centrer.
parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Philippe | #7 12/07/2010 - 11h07 |
|
Class : ID Newbie Offline Www |
Bonjour,
Je suis toujours dans le header et je cherche à comprendre la disposition des métas et de la place du titre de la page. <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}"><title>xxx</title> n'est pas en tête de la page Par contre sur votre forum si <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Quel est le bon ordre à respecter ?
Patauge allègrement dans le phpBB
|
| Ishimaru Chiaki | #8 12/07/2010 - 13h21 |
|
Class : ID Admin |
Ça me prendrait le lien de ton forum (et non ton site) pour que je puisse examiner, car il ne semble pas y avoir de lien pour accéder au forum depuis le site, la navigation n'étant pas très aisée avec en plus les images sont loin d'être optimisées en poids en plus des gifs qui alourdissent encore plus, ce qui fait ramer Firefox chez moi.
parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Philippe | #9 12/07/2010 - 13h43 |
|
Class : ID Newbie Offline Www |
L'adresse de mon forum http://reims.informatique.free.fr/
Merci d'être indulgente, je suis dans phpBB depuis une semaine Ph
Edited by Philippe on 12/07/2010 at 13h46.
Patauge allègrement dans le phpBB
|
| Ishimaru Chiaki | #10 12/07/2010 - 19h32 |
|
Class : ID Admin |
Tant que ton <title> est à l'intérieur de <head>, c'est ça l'important. Mise à part le fait que ton forum et le mien n'utilisent pas le même logiciel de forums (j'utilise un connectix boards), je n'utilise pas autant de balises méta.
La balise <title> permet d'afficher un titre dans la barre en haut du navigateur, dans l'onglet (pratique si tu as plusieurs onglets), et quand on bookmarke une page, c'est ce <title> qui identifie le bookmark par défaut. Mais il y a beaucoup de sites qui renseignent mal cette balise, ce qui fait que je dois souvent modifier les titres de mes bookmarks, car quand c'est juste écrit "Index", ça ne dit pas grand chose sur le site. Sinon, ta bannière n'a pas de texte alternatif, son alt="" est vide, alors que dans ce contexte où il n'y a pas de texte en dur, ce alt="" devient important, car si quelqu'un arrive sur ton forum et que les images sont bloquées, chose qui arrive régulièrement dans les entreprises ou les administations, il n'y a rien qui remplace. parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Philippe | #11 13/07/2010 - 03h14 |
|
Class : ID Newbie Offline Www |
Je viens de remplacer {SITE_LOGO_IMG} par site_logo.gif avec la balise alt="
<div id="logodesc"><div id="logodesc">Cela fait une infobulle avec ie8 Je pense que c'est bon. Ph
Patauge allègrement dans le phpBB
|
| Ishimaru Chiaki | #12 13/07/2010 - 19h58 |
|
Class : ID Admin |
Pour le chemin, il est mieux d'indiquer la variable T_IMAGESET_PATH au lieu d'écrire le chemin en dur. Pour le contenu du alt="", là aussi il est préférable d'utiliser une variable, soit SITENAME au lieu d'écrire le nom en dur.
Ainsi au lieu de : <div id="logodesc">ça donne : <div id="logodesc">Cela rend la maintenance plus aisée en cas de clonage ou de renommage du style. parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| cdeweb | #13 21/04/2011 - 09h57 |
|
Class : ID Newbie Offline |
Bonjour,
J'ai testé sur le forum dont j'ai la charge. Malheureusement, je n'arrive pas à centrer correctement le menu. Voici deux captures : - Connecté : Capture - Déconnecté : Capture - Et voici normalement à quoi devrait ressembler le menu en mode déconnexion : Capture Le problème avec le menu une fois déconnecter. Cela vient sans doute des images et du placement de celles-ci, dans le code... <div id="logodesc">J'espère que vous pourrez m'aider. Merci d'avance, cdeweb. |
| Ishimaru Chiaki | #14 08/05/2011 - 02h41 |
|
Class : ID Admin |
Bonjour et désolée de n'avoir pas vu ça plus tôt. Je passais peu, vu le peu d'activité et le manque de temps, en plus qu'avec les attaques de spam, ton post est passé inaperçu. Le forum est vraiment dû pour un refresh mettons…
Si tu veux, tu peux passer sur phpBB France où je suis graphiste, et où d'autres membres pourront t'aider si j'ai pas le temps de le faire. parse error: parse error, unexpected T_ANXIETE_SOCIALE in home/ishimaru/social.php on line 1My portfolio (only available in French for now) |
| Rico | #15 26/08/2011 - 08h21 |
|
Class : ID Newbie Offline Www |
Il m'a bien aidé ce tuto , Merci
reste plus qu'à trouver des jolis boutons ! comment faire pour mettre ça sur le portail en même temps ? 
Edited by Rico on 26/08/2011 at 08h23.
|
Pages (2): [1] - 2
Ishimaru-Design > Tutoriaux, ressources et support (fr) > phpBB3 > Tutoriels & Astuces > [subsilver2] Modification de l'en-tête et du menu
> Stats
1 user(s) connected during the last 10 minutes (0 member(s) and 1 guest(s)).
Connectix Boards (fr) | phpBB.com | phpBB-fr.com | phpBB.biz | phpBB3styles | phpBBHacks | Awesomestyles | phpBB-France | Le site du zéro | Servhome | Gimp-Attitude | Phobies-Zéro | Expomatique
Powered by Connectix Boards 0.8.4 © 2005-2011 (7 queries, 0.536 sec)