bannière aléatoire (et plus...)

bonjour ! premièrement merci beaucoup pour ce blank theme, il est super propre et génial, surtout pour des gens comme moi qui ne s'y connaissent vraiment pas en codage, c'est super bien commenté et tout, chapeau à toi ! du coup je cherche à personnaliser mon forum alors que je ne m'y connais vraiment très peu en html/css (rip), donc j'ai plusieurs questions à te poser.

1/ j'aimerais mettre une bannière aléatoire sur mon forum, donc j'ai mis le code javascript nécessaire pour que ça fonctionne. sauf que même en faisant ça, ça ne marche pas, donc je me doute que le problème vient du template ou d'un autre code javascript qui gêne celui des bannières aléatoires. comme je m'y connais pas du tout en html ou en javascript je veux éviter de toucher au template au risque de tout péter mdrrr, donc saurais-tu comment mettre en place une bannière aléatoire ?

2/ sur mon forum, j'ai placé le pseudo du compte en haut de l'avatar. j'aimerais bien que ce pseudo soit sur la même ligne que sur le conteneur informations du message (le titre de sujet, la date et les boutons d'éditions). j'ai essayé de bidouiller le css mais je n'ai pas réussi, est-ce que tu saurais comment faire ?

3/ j'aimerais mettre l'avatar du compte sur lequel on est connecté à côté de la réponse rapide. donc j'ai réussi à plus ou moins le faire, mais je n'arrive définitivement pas à centrer les deux objets (l'avatar et la réponse rapide) pour qu'ils se situent tous les deux au milieu de la page, car là j'ai la réponse rapide qui est centrée et l'avatar qui se trouve à côté, sur sa gauche. est-ce que tu saurais comment faire ?

je suis désolée pour toutes ces questions djsufhdg, merci d'avance pour ton temps et encore merci pour ce merveilleux thème

Hello hello! Merci à toi d'utiliser le thème ** tu n'oublieras pas de passer par ici pour nous montrer ce que t'as pu faire avec

Alors,

• Bannière aléatoire : c'est normal oui, je pense juste que mon template est trop modifié pour fonctionner.
J'ai donc repris le tutoriel de Forumactif (je ne sais pas si c'est celui que tu utilises) et je l'ai ajusté ainsi :

Code:

$(function() {
  var a = [
    "https://adresse1",
    "https://adresse2",
    "https://adresse3",
  ];
 
  $("#header img").attr("src", a[Math.floor(Math.random() * a.length)])
});

Ca devrait fonctionner! N'oublie pas de l'activer sur toutes les pages



• Déplacer le pseudo : vraiment rien de compliquer, il suffit juste de déplacer la balise du pseudo au bon endroit. Rends-toi dans le template viewtopic_body et repère la ligne (ctrl+f) :

Code:

<!-- Pseudo -->
<span class="post_pseudo">{postrow.displayed.POSTER_NAME}</span>

Et insère là quelques lignes plus haut, juste après span class="post_date"

Code:

<span class="post_date">

copier ici!

<!-- Lien d'ancre vers le message -->
<a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>

• Avatar sur réponse rapide : Ah oui effectivement le module de réponse est un peu capricieux!

Tu peux, dans le CSS, modifier 70% par 100% dans cette partie :

Code:

.quickreply div#textarea_content {
    width: 100%!important;
}

puis rajouter juste en dessous :

Code:

form#quick_reply {
    width: 500px;
}

en mettant la largeur souhaité pour l'encadrement de réponse rapide.

coucou, merci de ta réponse super rapide omg ça fonctionne parfaitement pour les 2 premiers pts, merci beaucoup je rencontre cependant un souci avec l'avatar pour la réponse rapide, en prenant le tuto de forumactif (forum.forumactif(.)com/t347904-ajouter-l-avatar-du-membre-a-cote-de-la-reponse-rapide) et en modifiant comme tu me l'as dit, l'encadré de la réponse rapide et l'avatar se superposent tous les deux à gauche, avec l'encadré de la réponse rapide sur l'avatar en question. je sais pas trop quoi faire pour résoudre le problème du coup ;; mais merci encore pour tes réponses

Ok me revoilà ! Le tuto m'a permis de mieux comprendre le problème et me voici avec la solution Garde les modifications que je t'ai fais faire juste avant!



• Étape 1

Rends-toi dans le template viewtopic_body et repère la section <-- REPONSE RAPIDE --> pour la remplacer entièrement par celle-ci :

Code:

<!----------------------------------------------->
<!-- REPONSE RAPIDE -------------->

<div class="container quickreply" id="quickreply_content">
    <!-- BEGIN switch_user_logged_in -->
    {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->
</div>


• Étape 2
J'ai modifié le JS du tutoriel par celui-ci : (edit, code corrigé au post suivant)

Code:

jQuery().ready(function() {
  $("#quick_reply").prepend("<div id='av_quickreply'>"+_userdata.avatar+"</div>");
});

• Étape 3
Rends-toi dans le CSS et ajoute-ci en supprimant celui du tutoriel :

Code:

/* Conteneur de l'avatar*/
#av_quickreply {
  position: relative;
}

/*Image de l'avatar*/
#av_quickreply img {
  height: XXX px;
  width: XXX px;
  object-fit: cover;
  object-position: center;
}

.quickreply {
  display: flex;
  justify-content: center;
}

Tout simplement! J'espère que ça fonctionnera

salut, merci pour ta réponse entre temps l'autre admin du forum avait bidouillé le css et avait réussi à le faire (en bidouillant beaucoup puisqu'elle est aussi naze que moi en html/css), en mettant un margin-left au form#quickreply et en bidouillant bcp la taille et la place de l'avatar etc, ce qui faisait que visuellement... ça fonctionnait MDR. du coup je viens d'essayer ce que tu me proposes et ça ne marche pas, parce que les objets ne se centrent pas malgré le justify-content: center ??? comparé à avant, il y a l'avatar du membre connecté en carré au-dessus de la réponse rapide et en quelque sorte, ils ne se superposent plus maintenant mais l'avatar n'est plus en entier, tandis que la réponse rapide est comme l'avatar, tout à gauche, juste en-dessous de lui. du coup j'ai réessayé, en enlevant l'avatar pour voir si c'est l'avatar qui posait problème et en fait non, c'est la réponse rapide qui ne se centre plus. en mettant align-items bizarrement ça marche, mais évidemment ça marche pas avec la réponse rapide, ils s'alignent tous les deux au milieu...... bon je sais pas trop ce qui ne va pas snif mais merci pour ton aide !!

Ah mince pardon!! J'ai juste mal adapté le JS je m'excuse

Pour que ça fonctionne :

Code:

jQuery().ready(function() {
  $("#quick_reply").prepend("<div id='av_quickreply'>"+_userdata.avatar+"</div>");
});

Et désolée de délai de réponse!
Puis une fois votre forum terminé, n'oubliez pas de venir me montrer ce que ça donne