Hey,

Pense à relancer pour que Nyo ne t'oublie pas et nous indiquer que tu es toujours là :)

Oups, j'avais up tous mes sujets sauf celui-ci. Merci du reminder :)

Et je pense avoir fini! Si y'a le moindre soucis ou un truc qui vous gêne, n'hésitez pas à me le faire savoir!
Je redonne le lien au cas où! Click

Pour les Top Sites et le twitter, je ne savais pas quelle image vous vouliez donc j'ai mit un peu n'importe quoi xD Selon la taille des images il y aura une petite barre de défilement ou non, mais là ce sera à bous de voir

Pour sortir du cadre la PA, je vais encore voir ce que je peux faire. Je pense qu'il faudrait limite utiliser du Javascript, parce qu'en regardant les templates, je suis pas sûr de pouvoir le faire en passant seulement par eux, mais je dois encore y réfléchir ^^

Désolée du temps d'attente cependant, je pensais que j'aurai fini bien plus tôt, mais j'avais une autre demande d'Intégration à faire dans un délai très court, et du coup elle est passée en priorité ^^

Coucou !


Toute mon équipe trouve ça magnifique et nous te remercions.


Nous avons quelques petits commentaires :
- Serait-il possible de changer la police des titres de catégories, avec quelque chose de moins arrondi ?
- La couleur des éléments du menu rapide nous semble un peu sombre.
- Nous pensons également augmenter la taille du texte à l'intérieur des "spécificités". Si la place manque nous le réduirons nous-même.
- Pour l'image dans "focus sur", pourrait-on lui donner un fond "doré" ou plus sombre ?



Ce sont des petits détails, que nous essaierons de régler nous-même si cela t'ennuie :)


Merci beaucoup !

Coucou! ^^ Ravie que ça vous plaise!

Alors pour répondre à vos questions:
- Du coup j'ai mit Courier, comme pour les petits titres. Cependant, si vous voulez encore autre chose, il faudra utiliser Google Fonts ou me donner la police vous-même (si c'est une police sur tous les ordinateurs). Je n'ai utilisé que les polices qui étaient déjà sur le forum pour l'instant. ^^
- J'ai un peu éclairci, est-ce que c'est mieux? ^^
- J'avais réduit surtout pour éviter une barre, donc maintenant j'ai remit à la taille d'origine. C'est comme vous souhaitez au final
- Vous auriez un code couleur pour ça? Notez aussi que j'ai fait en sorte que vous puissiez facilement changer le nom de couleur selon le groupe (suffit de mettre le nom du groupe en classe), donc optimalement, la couleur de fond garde tous les groupes lisibles. EDIT: La même couleur que le texte, ce que je viens de mettre, semble pas mal pour 4a, mais je vous laisse juger!


Ca m'ennuie pas du tout, les touches de finitions sont normales

Super super !

Pour la police du titre des catégories, nous pensions à quelque chose d'assez "strict" comme Libre Baskerville.

Pour le reste, ça nous va très bien !

Voilà qui est mit! Il faudra juste ajouter la police dans le overall_header si jamais, mais si tout est bon, je vous donne les codes! ^^

Tout est bon oui, on aura peut-être besoin de ton aide pour les petites adaptations lorsqu'on implémentera le code, mais à part ça c'est merveilleux !


Merci petit chat !

Bon, normalement tout est commenté, en tout cas dans le CSS, amis au moindre problème je suis là, ainsi que les autres codeurs dans la section des problèmes. ^^

Le petit changement dans index_body:
(Vous changez les deux lignes actuelles, par celles qui suivent. Notez que je ne rajoute qu'une id )

Code:

<!-- BEGIN message_admin_index -->
<table class="forumline" id="pa" width="100%" border="0" cellspacing="1" cellpadding="0">

HTML:


CSS:

J'ai vu l'installation du forum, et je viens de remarquer que j'ai oublié de vous dire un truc très important! x)

Dans le CSS, à "Optimiser votre CSS" il faut absolument cocher Non. Sinon les keyframes et certaines animations ne marcheront pas ^^

D'accord Nyo, je suis en train de l'implémenter. Je te tiens aux nouvelles :)

Coucou ! Alors voici le rapport d'intégration !

Déjà, merci beaucoup d'avoir accepté de faire notre commande et d'avoir réussi avec brio à retranscrire notre idée ! C'est vraiment très généreux, et c'est exactement ce genre de choses qu'on avait envisagé. La bannière défilante nous permet de mettre en avant de manière visuelle des nouveautés du forum.

1- Petit soucis sur le menu 
Alors, nous avons relevé un seul problème d'implémentation, sur Safari (grr), le menu rapide ne s'affiche pas correctement : il y a un décalage d'un micromilimètre entre le texte et son effet dynamique de surbrillance. Qui plus est, lorsqu'on survole "Races jouables" la barre de surbrillance s'affiche au dessus de Règlement.

Copie d'écran



2- Réduction de la taille de la bannière 
Nous avons décidé de réduire la taille de la bannière pour l'aligner sur la taille des cadres : 800px. Nous avons remplacé à 3 reprises dans le code la valeur 900px par 800px. Je crois que nous avons fais juste ? 
Si nous souhaitions par hasard augmenter la taille des cadres, il faudrait remplacer :

Code:

/* On emt la largeur des cadres */[size=14][/size]
#pa .cadre.grandNovus { width: 500px; }[size=14][/size]
#pa .cadre.petitNovus { width: 300px; }[size=14][/size]
#pa .cadre.basNovus { width: 800px; }

 Par

Code:

/* On emt la largeur des cadres */[size=14][/size]
#pa .cadre.grandNovus { width: 600px; }[size=14][/size]
#pa .cadre.petitNovus { width: 400px; }[size=14][/size]
#pa .cadre.basNovus { width: 1000px; }

Et c'est tout ? (En faisant attention de veiller que le cadre du bas est égal à la somme des deux autres.

 

3- Précision sur la vitesse de défilement des slides, et l'ajout le retrait de slide
Serait-il possible d'avoir une mini-explication sur la vitesse de défilement des slides (on a remplacé deux fois 32sec par 16 sec et je crois que ça fonctionne), et surtout l'ajout ou le retrait de slides ?

Je crois comprendre que l'animation correspond à 100% du temps, et nous devons segmenter chaque slide en pourcentage égal de temps ?

4- Ajout de liens dans la slidebar
Dans la partie du CSS dédiée aux descriptions des slides, serait-il possible d'ajouter une petite animation pour les liens (au survol) ? Pour faire comprendre que la description est parfois clicable ?




Voici notre rapport ! J'espère que le résultat te plait autant qu'à nous ! Tu seras vénérée sur notre Chatbox !



EDIT - Egalement, comment éviter le chevauchement des lettres dans les titres ? Notamment "Spécificités" par exemple ?

Alors pour le premier ça me le fait aussi sur Firefox.

Du coup, une des solutions est pour le padding de #pa .liens_rapides a:before, remplacer les valeurs actuelles par 8px 0 5px.
donc avoir:

Code:

padding: 8px 0 5px;

Pour le deux, pourquoi tu as des size dans ton CSS O___O Je pense que c'est une erreur ici dans ce message, mais si c'est dans ton CSS il faut absolument les supprimer xD
Mais sinon, c'est tout à fait ça, tu as bien compris. ^^

Pour la 3, alors... Effectivement, une animation va de 0 à 100%. Attention, tu remarqueras qu'il y a toujours deux keyframes et deux mises en places de l'animation: une fois webkit, pour safari et une fois normal pour les autres. Si tu mets 16 au lieu de 32, l'animation sera plus rapide car elle ne prendra que 16 secondes pour aller à tous les slides. Là, pour savoir combien de secondes il faut mettre, il n'y a qu'une solution: tester.

Au niveau de l'ajout des slides dans le HTML, un Slide correspond à ceci:

Code:

<div class="un_slide">
                                    <img src="http://img03.deviantart.net/2e84/i/2012/207/a/c/vidocq_by_rozyk007-d58ridh.jpg" />                         
        <div class="caption">
                                        Caption                       
        </div>
                                                             
      </div>

Après le dernier slide, il y a toujours encore deux div fermantes. Donc à chaque fois que tu colles une nouvelle slide, vérifie qu'il y a 4 div fermantes: comme ça tu es certain d'avoir mit au bon endroit.

au niveau du CSS, c'est donc ici:

Code:

/* Animation de la PA. Chaque slide a 20% de temps et l intervalle est de 5%. À réduire ou augmenter selon le nombre de slides. Ici il y a 4 slides. */
@-webkit-keyframes slider {
  0%, 20%, 100% {
    left: 0;
  }
  25%, 45% {
    left: -100%;
  }
  50%, 70% {
    left: -200%;
  }
  75%, 95% {
    left: -300%;
  }
}

@keyframes slider {
  0%, 20%, 100% {
    left: 0;
  }
  25%, 45% {
    left: -100%;
  }
  50%, 70% {
    left: -200%;
  }
  75%, 95% {
    left: -300%;
  }
}

Bien évidemment, si on veut ajouter des slides, le temps en % se réduit. Bien sûr le seul truc à faire pour trouver le % est de tester, mais ce que tu peux faire déjà, c'est diviser 100 par ton nombre de slides, et ensuite de bidouiller pour voir combien de temps tu veux donne rpour que le temps de slide et le temps de pause soit égal partout, tout en ayant 100 qui soit TOUJOURS à 0

Exemple avec 5: 0 - 15, 20 - 35, 40 - 55, 60 - 75, 80 - 95, 100 est donc à 0 (Donc: temps de 15% et attente de 5%)
Donc dans le CSS tu aurais ceci:

Code:

/* Animation de la PA. Chaque slide a 20% de temps et l intervalle est de 5%. À réduire ou augmenter selon le nombre de slides. Ici il y a 4 slides. */
@-webkit-keyframes slider {
  0%, 15%, 100% {
    left: 0;
  }
  20%, 35% {
    left: -100%;
  }
  40%, 55% {
    left: -200%;
  }
  60%, 75% {
    left: -300%;
  }
  80%, 95% {
    left: -400%;
  }
}

@keyframes slider {
    0%, 15%, 100% {
    left: 0;
  }
  20%, 35% {
    left: -100%;
  }
  40%, 55% {
    left: -200%;
  }
  60%, 75% {
    left: -300%;
  }
  80%, 95% {
    left: -400%;
  }
}

Ce que tu peux faire, mais je ne garantis pas que ça marche pour tout nombre de slides, c'est que tu divises 100 par ton nombre, donc ici 100/5= 20, tu retirer les temps d'attente, donc 5%, et tu as ton temps d'animation pour chaque slide.
Après tu peux calculer combien font 15% de 16 secondes si tu veux faire 4a de façon stricte ou, bah, juste tester ce que ça te donner et augmenter le nombre de secondes ou le réduire selon ce que tu veux ^^

Pour le 4, il suffit d'ajouter dans ton CSS ceci:

Code:

#pa #slideshow .slider .un_slide .caption a {
  /* Ici la mise en forme normale du lien */
}

#pa #slideshow .slider .un_slide .caption a:hover {
  /* Ici effet sur le lien au passage de la souris */
}

Pour l'edit, ça ne le fait pas chez moi donc je ne peux pas vraiment t'aider, sachant qu'il y a un letter-spacing qui, normalement, fait que les lettres sont justement totalement éloignées! ><

J'espère que 4a a répondu à tes questions, sinon n'hésite pas à demander encore ^^

Merci ! On a réparé les petits problèmes et tout fonctionne maintenant à merveilles. Je vais garder tes notes sous la main pour lorsque nous aurons besoin de modifier le nombre de slides.

Il y a un dernier petit détail qui sera vraiment la cerise sur le gâteau, mais je ne sais pas si c'est réalisable "facilement". 

En fait, le premier retour de nos membres est très très (très) positif. Le seul hic, selon eux, est qu'on ne se rend pas compte qu'il s'agit d'un slide, à première vue. Ils ont donc proposé de rajouter des petites flèches, à gauche et à droite de la caption, qui permettraient d'activer le défilement, en plus du défilement automatique. 

Nous avons donc réalisé des flèches :





et au passage de la souris :








Si cela risque de prendre du temps, n'hésites pas à me le dire et je posterais une nouvelle demande d'aide sur Never Utopia !! Je ne veux pas mobiliser toutes tes formidables ressources :) Et je ne veux pas non plus faire une "commande sans fin" ! 


Merci encore pour tout ce que tu as fait pour nous en tous cas. Quelles références devons-nous donner dans nos crédits ?

Coucou! ^^
Alors ravie que tout soit bien x)

Donc ce que tu demandes en fait est... compliqué. Je peux:
- soit retirer l'animation et mettre que les flèches
- faire en sorte que les flèches arrêtent l'animation et permettre de redémarrer celle-ci avec un autre bouton

Mais ça va me demander de toute façon de changer pas mal le code du slideshow, et là effectivement, ça va me demander du temps x)

Par contre, si le problème est juste "Je ne savais pas que c'était un slideshow" on peut faire simple et:
- Rajouter un titre "Slideshow" ou un truc similaire pour que ce soit tout à fait évident
- Accélérer l’animation pour que le passage de fasse plus rapidement et que du coup, on voie les slides bouger =P (vu que le passage de la souris fait pause à l’animation)

D'accord. On va se contenter d'augmenter la vitesse de défilement et ça ira très vite.


Bon, histoire d'apporter une petite mauvaise nouvelle, j'ai un utilisateur qui m'a envoyé la copie d'écran suivante :



Il me dit être sous Firefox 42.0 avec une résolution de 1980x1080.

Je la même résolution et le même navigateur et je n'ai pas du tout ça O__O
Sachant que pour la partie du bas c'est en pourcentage (33% et 3*33 = 99%, donc normalement ça ne devrait pas faire ça, vu qu'on est à moins de 100%) et pour le staff également (4*20% = 80% plus les marges 8*2% = 16% ce qui donne 96% donc encore moins)... du coup franchement je ne vois pas d'où peut venir le soucis.

Coucou Nyo,

Alors en fait c'est simplement que mon joueur avait augmenté la police de son navigateur ! Le résultat final est donc maintenant visible et nous trouvons ça formidable.

Qu'en penses-tu de ton côté ?



Je suppose que ce sujet sera archivé, me sera t'il toujours possible de le consulter si j'ai besoin de relire nos posts pour régler les slides ?

Oui il sera dans les archives, mais elles sont ouvertes au membre donc tu pourras toujours venir relire! ^^ Par contre, pour des problèmes additionnels ou des changements, il faudra poster un nouveau sujet, forcément ^^

Du coup, moi ça me semble parfait, et j'archive! =P