Boutons "Haut / Bas"

[Crickett]

Bonjour,

Je rencontre un problème avec les boutons "Haut / Bas" (flèches) que je mets habituellement pour qu'elles apparaissent sur le côté droit de mon forum.

https://abbysympathie.forumactif.com

Je suis à la lettre bien entendu les instructions de votre tuto qui s'intitule "Ajouter des boutons "Haut / Bas" mais à chaque fois que je change de décor ces flèches ne se remettent pas sur ce dernier décor, ce qui me semble curieux étant donné que les CSS ont bien été enregistrés.

1) Pour créer le script : Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

- Tout se passe parfaitement

*****

2) Quant à l'ajout du CSS (placement des boutons) : anneau d'administration  Affichage  Couleurs - Feuille de style CSS

- Je rencontre actuellement un problème que je n'avais pas auparavant. En fait la page dans laquelle je souhaite insérer le code est remplie de codes de toutes sortes jusqu'au nombre de 202 comme vous pourrez le voir sur la copie d'écran que je vous joins, ce qui fait que je ne peux copier dans tout ça, le code qu'il me faut insérer !



Dans un premier temps j'avais essayé malgré tout d'insérer ces codes, mais les ayant mis dans le haut de cette page, j'avais commis une belle erreur que j'avais pu rapidement réparer, grâce aux bons conseils d'une personne qui avait eu la gentillesse de me venir en aide... Encore mille mercis à elle.

Puis par la suite, j'ai pu voir que les flèches s'étaient mises "en double" sur le côté gauche de mon forum, alors que je les souhaite à droite de celui-ci... Copie ci-dessous :




****

Pourriez vous, s'il vous plait, me dire :

1) Pourquoi tous ces codes dans la page CSS ? Et comment faire pour supprimer le tout afin de pouvoir retrouver une page sur laquelle figurent uniquement les codes de mes CSS ?

2) Pourquoi une fois ces flèches enregistrées, partent-elle à chaque fois que je change mon décor ?


En vous remerciant à l'avance pour l'aide que vous voudrez bien m'apporter et vous souhaitant un bon dimanche.
Cordialement.

[Oka.mi]

Bonjour,

Tout d'abord, il faut comprendre que lorsque vous installez un thème depuis Hitskin, vous installez également la feuille de style CSS du thème en question. C'est ce qui explique la présence de lignes de code dans votre feuille alors que vous pensez n'avoir rien ajouté vous-même. Vous pouvez supprimer les lignes de code en question, au risque de perdre une partie du design de votre thème actuel. Toutefois, de ce que j'ai vu de la feuille de style CSS en question, la plupart des éléments définis dans les lignes de code ne sont pas spécifiés sur votre forum, aussi je pense que vous pouvez tout effacer sans craindre de troubler l'apparence de votre forum.

Ensuite, il faut noter qu'à chaque fois que vous installez un thème depuis Hitskin, la feuille de style du thème remplace l'ancienne feuille de style. Cela signifie que même si vous avez déjà ajouté le code CSS pour les flèches Haut / Bas, il faut le remettre à chaque fois que vous changez de thème. Une fois cela fait, les flèches réapparaîtront en position fixe à droite de votre forum.

De plus, il ne faut pas vous inquiéter de trouver 202 lignes de code dans votre feuille CSS, celle-ci peut contenir jusqu'à 65535 caractères. Vous avez donc largement de quoi ajouter le code des flèches Haut / Bas.

Enfin, vos flèches apparaissent en double parce que vous avez mis le script deux fois. Dans vos modules JavaScript, supprimez l'un des deux JavaScripts que vous avez ajouté en trop et pensez à placer l'autre sur "Toutes les pages" comme spécifié dans le tutoriel (ce n'est pas le cas actuellement).

[Crickett]

Vous pouvez supprimer les lignes de code en question, au risque de perdre une partie du design de votre thème actuel. Toutefois, de ce que j'ai vu de la feuille de style CSS en question, la plupart des éléments définis dans les lignes de code ne sont pas spécifiés sur votre forum, aussi je pense que vous pouvez tout effacer sans craindre de troubler l'apparence de votre forum.

Bonjour Oka.mi et merci pour votre réponse.

J'ai donc suivi vos conseils : 1) en supprimant le script que j'avais mis deux fois. 2) en cochant sur "toutes les pages"

A présent, comment faire pour que ces flèches, apparaissent non pas sur le côté gauche, mais à droite s'il vous plait ?

****

Par ailleurs, concernant les CSS, vous écrivez :

"Vous pouvez supprimer les lignes de code en question, au risque de perdre une partie du design de votre thème actuel. Toutefois, de ce que j'ai vu de la feuille de style CSS en question, la plupart des éléments définis dans les lignes de code ne sont pas spécifiés sur votre forum, aussi je pense que vous pouvez tout effacer sans craindre de troubler l'apparence de votre forum."

Ne tenant pas bien entendu de risquer de perdre une partie du design du thème de mon forum, je préférerais peut-être opter pour la seconde solution c'est-à-dire "tout effacer" mais j'avoue avoir peur de le faire car s'il arrivait qu'après ça tout soit déréglé, comment ferais-je alors ???

Encore merci à vous.

[Oka.mi]

A présent, comment faire pour que ces flèches, apparaissent non pas sur le côté gauche, mais à droite s'il vous plait ?

J'ai indiqué la démarche à suivre dans ma précédente réponse :

Cela signifie que même si vous avez déjà ajouté le code CSS pour les flèches Haut / Bas, il faut le remettre à chaque fois que vous changez de thème. Une fois cela fait, les flèches réapparaîtront en position fixe à droite de votre forum.

Ne tenant pas bien entendu de risquer de perdre une partie du design du thème de mon forum, je préférerais peut-être opter pour la seconde solution c'est-à-dire "tout effacer" mais j'avoue avoir peur de le faire car s'il arrivait qu'après ça tout soit déréglé, comment ferais-je alors ???

Vous pouvez tout effacer sans crainte et coller le code de vos flèches à la place. J'ai encore votre feuille CSS sur mon forum test donc en cas de pépin je peux vous indiquer quoi remettre, mais comme je l'ai dit, au moins 95% de votre CSS ne sert actuellement à rien car la plupart des éléments définis n'existent pas sur votre forum.

[Crickett]

Ne tenant pas bien entendu de risquer de perdre une partie du design du thème de mon forum, je préférerais peut-être opter pour la seconde solution c'est-à-dire "tout effacer" mais j'avoue avoir peur de le faire car s'il arrivait qu'après ça tout soit déréglé, comment ferais-je alors ???

Vous pouvez tout effacer sans crainte et coller le code de vos flèches à la place. J'ai encore votre feuille CSS sur mon forum test donc en cas de pépin je peux vous indiquer quoi remettre, mais comme je l'ai dit, au moins 95% de votre CSS ne sert actuellement à rien car la plupart des éléments définis n'existent pas sur votre forum.

J'ai donc tout effacé et impeccable, ça marche !

Donc si j'ai bien compris, à chaque fois que je changerai de décor, ce que je compte faire dans les jours prochains, il me faudra remettre en place ces flèches de cette manière, et si jamais un tas de codes réapparaissaient de nouveau sur mon nouveau décor, je pourrais donc également tout effacer comme je viens de le faire... Ais-je bien compris s'il vous plait ?

[Oka.mi]

Donc si j'ai bien compris, à chaque fois que je changerai de décor, ce que je compte faire dans les jours prochains, il me faudra remettre en place ces flèches de cette manière

Oui, c'est bien cela. Chaque installation de thème via Hitskin installe une nouvelle feuille CSS qui remplace l'ancienne, donc il faut remettre à chaque fois le code des flèches Haut / Bas.

et si jamais un tas de codes réapparaissaient de nouveau sur mon nouveau décor, je pourrais donc également tout effacer comme je viens de le faire... Ais-je bien compris s'il vous plait ?

En fait, je vous ai juste dit que pour ce thème Hitskin en particulier, vous pouvez vous permettre de supprimer la feuille de style css. Ce ne sera pas forcément le cas de tous les thèmes, il faudra voir au cas par cas. Ce que vous pourrez faire, c'est copier-coller le code au préalable pour le sauvegarder dans un coin, et ainsi supprimer la feuille css en toute sérénité.

En cas de changements indésirés :

• soit vous remettez tout le code sans distinction parce que vous ne connaissez rien au CSS et que ça ne vous intéresse pas : on retourne à une situation où vous avez potentiellement des éléments qui ne servent pas dans votre feuille CSS, mais au moins ça s'affiche comme vous voulez.
  
• soit vous apprenez à identifier les différents éléments dans une feuille CSS et vous ne remettez que ce dont vous avez besoin.

Pour cette deuxième option, même si c'est fait à l'aveuglette au début, cela peut vous permettre de progresser et de gagner en indépendance du côté des modifications liées à votre forum. Je vous propose donc une explication rapide dans ce but.

Pour rappel, le css c'est un langage qui définit comment les éléments d'une page web s'affichent : ici il a été nécessaire de remettre le code css de vos flèches Haut/Bas pour les faire s'afficher en bas à droite de manière fixe. Si on regarde dans le tutoriel, on vous demande d'abord de créer un JavaScript. Le code JavaScript donné installe un élément nommé "boutonhautbas" (<div class="boutonhautbas">), qui contient des liens pour aller en haut et en bas de la page en cours : "top" et "bottom". En regardant du côté du CSS à ajouter, vous constaterez qu'on inscrit d'abord le nom de l'élément auquel on s'apprête à spécifier les propriétés, et que les propriétés (bottom, right, position... ou comment l'élément doit s'afficher) sont comprises entre accolades { ... }.

En partant de là, si vous avez bien compris ce que j'ai expliqué, et si on regarde cette fois un extrait de votre ancienne feuille de style CSS :

Code:

.forumline {
      border: 2px dotted #fff
   }

#centrer {
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      width: 800px
   }

Vous devrez normalement être en mesure de me dire combien d'éléments sont spécifiés dans cet extrait, et quels sont les noms de ces éléments.

Spoiler:

Voilà, cela peut paraître évident mais en maîtrisant cela, vous pourrez vous permettre de faire des tests en retirant/replaçant des éléments d'une feuille css.

[Crickett]

.

Re-bonjour,

Concernant votre phrase... "Ce que vous pourrez faire, c'est copier-coller le code au préalable pour le sauvegarder dans un coin, et ainsi supprimer la feuille css en toute sérénité."

Bien noté, c'est ce que je ferai dans cas où un tas de signes seraient affichés sur ma page, comme cela s'était produit précédemment...
Merci pour ce conseil.

J'aimerais pourtant vous dire, que des tas de fois précédemment j'avais déjà mis des flèches sur le côté droit sur mon forum, et jamais je n'avais rencontré ce problème avec une page CSS remplie d'un tas de signes. A croire que je n'avais pas choisi ce décor...

****

Quant à votre seconde solution : "vous apprenez à identifier les différents éléments dans une feuille CSS et vous ne remettez que ce dont vous avez besoin."

Un peu trop compliqué pour moi me semble t-il. Autant je peux être comparée à "Speedy Gonzalès" pour ma vitesse de frappe sur un clavier, mais côté technique, alors ça c'est tout autre chose je vous l'avoue. Je vais pourtant essayer de me donner la peine d'essayer de comprendre au mieux toutes vos gentilles explications, lesquelles vous vous êtes gentiment donné la peine de me transmettre...


****

Par ailleurs, dans votre dernier paragraphe auquel est jointe une copie d'écran de mon "ancienne feuille de style",vous écrivez :

"Vous devrez normalement être en mesure de me dire combien d'éléments sont spécifiés dans cet extrait, et quels sont les noms de ces éléments.


et la réponse que vous avez mise en "spoiler", je peux bien lire  "forumline" et "center"... Comment avez vous pu retrouver parmi les "202" qui apparaissaient sur ma page CSS, ces deux mots ?



Sur la page actuelle de mon forum, (copie ci-dessous) que puis-je repérer ? Sincèrement je ne vois pas... ?

[Oka.mi]

Comment avez vous pu retrouver parmi les "202" qui apparaissaient sur ma page CSS, ces deux mots ?

J'ai simplement lu la feuille et récupéré un extrait simple qui permettait d'illustrer mes propos, mais j'ai un peu plus l'habitude de ce genre d'exercices que vous. C'est pourquoi j'ai essayé de vous expliquer comment distinguer les différents éléments ; il n'est pas forcément nécessaire de les comprendre dans un premier temps, mais juste savoir que ça se constitue d'un
.nomdelement {
propriété: valeur de la propriété;
}

.nomdelement2 {
propriété: valeur de la propriété;
}

... etc,

ça peut être un bon outil de base pour que la feuille de css vous paraisse moins incompréhensible.
Ainsi, en connaissant ce qui délimite chaque élément, vous devrez avoir de quoi faire vos tests "à l'aveuglette" de manière efficace, puisque vous saurez quel élément vous aurez retiré à chaque fois.

Enfin... ça c'est juste pour que vous puissiez le faire vous-même. Si vous ne vous en sortez pas, vous pouvez bien entendu toujours créer un sujet pour cela.

Sur la page actuelle de mon forum, (copie ci-dessous) que puis-je repérer ? Sincèrement je ne vois pas... ?

Nous pouvons voir dans votre feuille de style CSS actuelle que vous avez juste spécifié le style d'un élément : ".boutonhautbas". D'ailleurs, juste après, il y a une ouverture d'accolade { on annonce donc le début des propriétés qu'on veut attribuer à l'élément, ensuite on dit que :
bottom: 40px; il est positionné par rapport au bord bas de la fenêtre de 40 pixels.
right: 10px; il est positionné par rapport au bord droit de la fenêtre de 10 pixels.
position: fixed; il a une position fixe c'est-à-dire qu'il vous suit quand vous déroulez la page.
z-index: 100; il a une niveau d'empilement de 100 (comme sur un axe x, y, et z), c'est utile quand il y a d'autres éléments qui ont un z-index plus ou moins élevé, pour indiquer lequel superpose l'autre.

Et nous terminons par l'accolade fermante } qui annonce la fin des propriétés pour cet élément ".boutonhautbas".

[Crickett]

Bonsoir Oka.mi  

Je vais terminer ce message en cochant "résolu" tout en vous remerciant mille fois pour toute l'aide que vous m'avez apportée, celle-ci accompagnée de vos aimables et complètes explications.

Une bonne soirée à vous.

Bien cordialement.

[Oka.mi]

Avec plaisir

Bonne soirée.