[Réglé] Ultra light

[Nothal]

Bonjour.

• Nom du Style developpé : Ultra light
• Auteur du style : xTHALx (nothal sur ce forum)
• Thème graphique du style : Prosilver
• URL de démonstration du Style actuel : http://xthalx.p.ht/phpBB3/index.php

Compte test - Identifiant : Test, MDP : test

Le zip : Ultra Light

Templates légèrement modifiés :

- forumlist_body
- index_body
- overall_header
- overall_footer
- viewforum_body
- faq body
- viewtopic_body

+ css évidemment.

Outils : Photoshop(graphisme), éditions et vérifications des fichiers avec PSPad, Filezilla et Firebug.

Le style est pour ainsi dire fini, cependant je rencontre des problèmes d'affichage avec IE10 et Safari.

- Gros décalage de bien 10px avec le bloc #haut et #page-body.
- Écart entre les boutons du menu de navigation avec Safari.

Je suis habitué à faire des thèmes pour ForumActif et je ne suis pas encore très à l'aise avec phpBB3.
J'aimerai pouvoir vérifier chaque partie, mais quand on ne sait pas à quoi elles correspondent !

- .pollbar - Je vois bien pollbar 1 et 2, mais comment voir les autres ?
- thumbnail - On peut le voir ou sur le forum ?
- comment afficher l'icône flux rss ?

Le copyright est sur une seule ligne. Ais-je le droit ?

J'ai téléchargé plusieurs styles afin de voir leurs contenus. Très étonnées de voir que le dossier templates ne contient que les templates modifiés .
En parcourant le forum de documentation, la raison serait "l'héritage" de prosilver.
Je dois faire de même ?

On est en 2013, les préfixes sont-ils encore nécessaire d'après vous ?

Pardon, ça fait beaucoup de questions.

[tomberaid]

Hello
Pour le décalage sur IE10, dans ton fichier overall_header.html tu as:

Code : Tout sélectionner

  <div id="haut"></div>
  <a name="start_here"></a>

essayes

Code : Tout sélectionner

  <div id="haut"><a name="start_here"></a>
</div>

ou encore en déplaçant la ligne

Code : Tout sélectionner

  <a name="start_here"></a>

juste avant

Code : Tout sélectionner

      <!-- navbar boutons -->
      <div id="menu">

Pour l'héritage, de mon avis je dirais oui, cela simplifie les mises à jour.

Pour les préfixes, on est peut-être en 2013 mais beaucoup d'internautes n'ont pas la dernière version du navigateur et même encore certains sont sous IE6 mais là c'est un autre débat.

Cordialement

NB: pour les autres questions j'ai pas eu trop le temps de fouiller, désolé.

Édit:
Pour le décalage IE10, une autre méthode qui marche bien, rajoute dans tes css:

Code : Tout sélectionner

a[name="start_here"] {
	display:none;
}

[cabot]

Salut salut,

Joli boulot !

Gros décalage de bien 10px avec le bloc #haut et #page-body.

Place le lien d'évitement <a name="start_here"></a> dans la div <div id="haut"></div>.

Écart entre les boutons du menu de navigation avec Safari.

Mets un margin latéral négatif de -2px sur les liens du menu (et supprime le font-size: 0; du menu qui devient inutile).

.pollbar - Je vois bien pollbar 1 et 2, mais comment voir les autres ?

Fouille ce topic qui devrait t'aiguiller.

thumbnail - On peut le voir ou sur le forum ?

Il s'agit des miniatures générées dans les messages.

comment afficher l'icône flux rss ?

En supprimant les commentaires de part et d'autres du lien, sur cette ligne dans forumlist_body.html :

Code : Tout sélectionner

<!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED --><!-- <a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}"><img src="{T_THEME_PATH}/images/feed.gif" alt="{L_FEED} - {forumrow.FORUM_NAME}" /></a> --><!-- ENDIF -->

Le copyright est sur une seule ligne. Ais-je le droit ?

Pas de souci !

J'ai téléchargé plusieurs styles afin de voir leurs contenus. Très étonnées de voir que le dossier templates ne contient que les templates modifiés .
En parcourant le forum de documentation, la raison serait "l'héritage" de prosilver.
Je dois faire de même ?

Oui, c'est une recommandation à suivre pour faciliter les futures mises à jours.

On est en 2013, les préfixes sont-ils encore nécessaire d'après vous ?

C'est à ton appréciation, si tu veux t'en passer, je n'y vois aucun inconvénient à partir du moment où on reste dans le cadre d'une "dégradation gracieuse" du design.

[Nothal]

Merci pour vos réponses.

J'ai mis

a name="start_here"

dans #haut, et en effet le problème est réglé !

Malgré le 0 -2px, l'écart du menu reste quand même visible avec Safari.
J'ai même supprimé les span contenant le texte des boutons dans le html, mais rien n'y fait.
Alors tant pis, il y aura des écarts avec Safari, c'est pas dramatique.

Ok pour pollbar, j'ai compris comment ça fonctionne. Plus il y a de votes et plus on monte dans pollbar, j'ai tout intérêt de modifier les couleurs.

Pour l'icône flux, je pense pas que ce soit à moi de décider pour les autres.

Les transitions sont minime, mais comme Safari semble en avoir encore besoin, mieux les mettre pour tous, quoi que le simple hover ne choque pas.

On ne peut pas faire de multi-quote ? Je vois rien pour et pourtant le css à bien les codes en rapport.

Et bien je vais pouvoir préparer le zip.
Le dossier des psd est à mettre obligatoirement en zip ?
Ça se passe comment après ?

[cabot]

Vide le cache safari, je ne vois plus le décalage de mon côté.

On ne peut pas faire de multi-quote ?

Si, tu peux même paramétrer la "profondeur" de citations autorisée dans les messages. A moins que tu ne parles de citer plusieurs personnes dans un même message, ce qui est possible aussi, en sélectionnant la partie à citer dans la vue sous le champ de réponse et cliquant sur le bouton citer du message.

Le psd n'est absolument pas obligatoire, je te suggère de mettre tout de même celui des boutons "répondre" et autres.

J'aurai certainement d'autres remarques concernant les clés de langues ou autres critères de validation, mais tu peux déjà poster le zip du style pour que je le décortique.

[tomberaid]

Malgré le 0 -2px, l'écart du menu reste quand même visible avec Safari.

Hello
Plutot que d'écrire ton code

Code : Tout sélectionner

<a></a>
<a></a>
<a></a>
<a></a>

essaye

Code : Tout sélectionner

<a></a><a></a><a></a><a></a>

sans espace ni retour à la ligne entre chaque balise <a>

Cordialement

[cabot]

Tout à fait, mais cette solution présente le défaut de lisibilité du code, et par conséquent des problèmes à cerner les liens dans le HTML pour les utilisateurs néophytes.
C'est pourquoi j'ai proposé la solution du margin négatif qui reste transparent et valide. D'autant que le problème sur safari est réglé suite à cette modif.

[Jester]

Très très sympa ton style. J'espère qu'il sera bientôt fin prêt. Il va avoir du succès

[Nothal]

Bonjour.

Merci pour les compliments. C'est mon premier pour phpBB, donc juste une adaptation d'un thème prévu pour Forumactif.
Mais je suis très contente d'y être parvenu, ça me donne pleins idées pour un prochain, là je peux vraiment faire ce que je veux.
Quoi que je ne connais pas les conditions et les limites imposées.

En effet, plus d'écart avec Safari. Pourtant j'ai vidée 2 fois le cache hier soir.
Du coup je conserve le margin négatif qui ne pose aucun problème sur les autres navigateurs.

Oui je parlais de multi-citation, comme avec le bouton multi-citation qu'on a sur Forumactif.

Bon et bien le zip : Ultra light

[cabot]

Peux-tu mettre le zip directement sur ton serveur ? Le site sur lequel tu l'héberges demande à installer des choses que je n'aime pas sur mon ordi.

[Nothal]

Ha bon ? Faut dire que Mega n'est plus du tout ce qu'il était(Megaupload), c"est assez décevant.

Alors le zip : Ultra Light

[cabot]

Thx

J'ai survolé rapidement les fichiers, de ce que j'ai vu, ça parait très positif.
Je te donnerai demain ou après-demain quelques petites corrections à faire.

[Nothal]

Ok, j'attends les corrections.

[cabot]

Hello,

faq_body.html
Ajoute un attribut title avec la clé de langue {L_BACK_TO_TOP} sur le lien ancré #faqlinks, car tu en as supprimé l’intitulé.

index_body.html
Tu as placé les titres dans des div, pourquoi ne pas mettre le background directement sur ces h3 plutôt que d'ajouter des balises ? Tu peux déclarer ces titres en relative pour les positionner.
Cela n'a rien d'obligatoire, c'est juste une petite remarque pour alléger le code. Tu en fais ce que tu veux.

overall_footer.html
Sur le lien ancré #top, change la valeur de l'attribut title qui est noté en dur, par la clé de langue {L_BACK_TO_TOP}.

overall_header.html
Place le lien de restauration des permissions directement dans la <div id="haut">, sans liste. En plus d'alléger le code en supprimant cette liste, tu peux aller plus loin en supprimant la div vide en clear: both; qui devient inutile car il n'y a plus de flottants. Et ça évitera ce petit décalage toujours présent sous IE7.
Supprime l'accent du mot Début dans le commentaire du menu, ou supprime carrément ce mot. Ça renvoie une erreur à la validation W3C.

viewforum_body.html et viewtopic_body.html
Même remarque pour les titres que dans le fichier index_body.

Tu peux supprimer les deux fichiers JS du dossier template, car ils sont appelés via la variable {T_SUPER_TEMPLATE_PATH} dans le overall_header.html, qui correspond au chemin vers le dossier template de prosilver.
Vérifie l'indentation de ton code, il y a certaines parties qui sont un peu "illisibles". C'est pas grave, mais j'aime bien quand c'est propre.
Je n'ai pas eu le temps de vérifier les CSS, mais tu peux déjà prendre en compte ces remarques et faire un repack de l'archive.

Si tu as des questions sur cette première partie, n'hésite pas à les poser.

[Kewee]

vivement que le style arrive dans la bdd, il est très classe, fantaisiste mais sobre à la fois.... je sens qu'on va en faire plein plein de support pour aider à modifier