Comment intégrer un widget dernier message sur la page d'accueil

[snunez]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://mariahcareyinfos.forumactif.com/forum

Description du problème

Bonjour,

Excusez moi,  j'aimerais que vous m'expliquer comment on peut mettre (modifié au quel cas) un widget qui défile pour les derniers messages sur le panneau du forum de la page d'accueil s'il vous plaît

[Feuilla']

Bonjour,
en prenant un code permettant d'afficher le widget, vous arriverez au résultat voulu.
https://forum.forumactif.com/t282880-code-html-derniers-sujets-ne-fonctionne-pas-sur-page-d-accueil
https://forum.forumactif.com/t285115-deplacer-le-script-derniers-sujets
https://forum.forumactif.com/t377690-afficher-les-derniers-sujets-du-forum-sur-la-page-d-accueil
Tous ces sujets contiennent des codes pour les derniers sujets.
Bonne journée !

[snunez]

Merci pour la réponse 

Alors j'ai essayée et bien lu les trois, il y a juste celui là qui m'intrigue et dont je ne sais pas où se trouve la colonne # et quest-ce qu'il faut rajouter à son code? J'ai essayée son code et ca n'à vraiment rien donné:
https://forum.forumactif.com/t285115-deplacer-le-script-derniers-sujets#2520201
Sinon, aucuns ne donne l'effet voulu 

Et si on veut garder les autres widgets du portail et les mettres avec?

Édit : j'ai réussi à en placé un, mais comment le personalisés (format plus petit , fond blanc, placé à gauche...) ?



Serait t'il possible d'ajouter d'autres widgets du genre actualités , le suivi facebook et tout ça ?

Cordialement!

[snunez]

Petit up^

J'aimerais quelque chose de semblable à ça mais qui s'accommode avec les couleur de mon forum (avec un fond blanc) s'il vous plaît 

J'aimerais savoir comment intégrer le widget "nouveau message" dedans s'il vous plaît 
Après , comme je suis novice , j'arrive pas à insérer non plus mes images dans les bulles...

[snunez]

Up 

Orientez moi s'il vous plaît 

[Invité]

Bonjour snunez.
Vous avez déjà fait un début de codage .ou tout est à faire?

[snunez]

Par rapport à la P.A et malgré tous les test que j'ai fais,  je laisse vierge jusqu'à que j'en trouve un de bon

Parmit un des liens de feuilla, j'ai réussi à en intégrer un mais trop vert et pas assez cohérent avec mon thème ce qui me mène à me trouver un code pour ma P.A pour ainsi me posé un joli panneau qui aille vraiment à l'ensemble de mon forum mais la tâche est dure parce qu'en même temps il faut que je pose aussi les images dans des micro bulles, que je met avec le fond blanc,  que mon widget se mette sur le côté gauche et plus petit etc... et je ne trouve pas non plus de tuto, j'ose pas faire de commande ici , j'ai un peu peur malgré que j'aime bien ce que vous faites 

J'ai essayée sur un forum spécial design, chaque fois que je fais leurs codes rien ne marche c'est a dire, oui, jai leur image qui s'affiche correctement mais des que je veux mettre mes images et codes c'est une catastrophe! Alors oui, j'aimerais intégrer bien  sûr ce widget "nouveau message" directement dans le panneau d'accueil  mais effectivement pour que le rendu soit esthétique, j'aimerais le faire dans l'ensemble similaire avec le petit panneau que j'ai postée précédemment qui regrouperait mon staff, mes partenaires (j'en ai peu), le contexte, l'actualité etc...

C'est à dire ? @R-max ? Non là j'ai pas du tout trouvée de code alors bon... si tu veux bien m'expliquer comment on fait s'il te plaît 

Merci en tous cas, je sais que ça m'à l'air confus tout ça 

[Rin_.]

Bonsoir o/
Par bulle, vous voulez dire arrondir les images? Dans ce cas, il suffit de prendre n'importe quelle url d'image que vous avez hébergé et lui mettre un petit code qui va arrondir ses bords :

Code:

<img style="border-radius: 100px; width: 150px; height: 150px;" src="URL DE VOTRE IMAGE" />

Assurez-vous juste bien que votre image soit dans un format "cube" (où la longueur = la largeur). Ici j'ai mis width et height avec la même valeur pour que ça vous redimensionne l'image automatiquement

Pour le widget je n'en ai AUCUNE idée, donc je ne vais pas vous balancer des codes faux :S

En espérant avoir aidé!
Amicalement.

EDIT : Pouvez-vous me montrer le code que vous venez de faire pour je vous montre comment le personnaliser?

[snunez]

Pas de souci Rin et merci pour la petite astuce, j'en ferai très bonne usage et je commence à percevoir  
Pour le code, le membre a posté deux liens (1 pour le css et un pour la P.A) , je met le lien de son post directement 

https://forum.forumactif.com/t377690-afficher-les-derniers-sujets-du-forum-sur-la-page-d-accueil#3187586

Pas de cadre, juste en fond blanc et carré même pourquoi pas que ça fasse pas un énorme bloc quoi , posé dans le côté gauche 

Bon, et bien déjà ça vous me dites^^

[Rin_.]

Aloooors, j'ai vite fait modifié la couleur du fond, et rajouté une petite bordure grise pour que vous arriviez à le voir. J'ai aussi mis des petites indications pour que vous puissiez comprendre ~

Code:

<style>/*Sujet récent*/
     
        #recent_topics {
          background-color: #FFFFFF; /*ça c'est la couleur de votre fond*/
          font-family: 'Playfair Display SC', serif; /* la police d'écriture utilisée*/
        color: #44474C; /*la couleur du texte*/
        font-size: 14px; /*la taille du texte*/
        height: 200px; /*la hauteur du widget*/
    width: 200px; /*la largeur du widget*/
        padding: 10px; /* c'est l'espace entre la bordure et votre texte*/
        border: 5px solid #F4F0F3; /* la bordure, son épaisseur, son type et sa couleur*/
        overflow-y: auto; /* pour scroller (= "ascenceur")*/
        overflow-x: hidden;
        }

Pour l'aligner sur la gauche, encadrez le <div id="recent_topics"></div> avec un div align left.
En gros, vous n'avez plus qu'à mettre tout ça dans votre page d'accueil :

Code:

<div align="left">
   <div id="recent_topics">
   </div>
</div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script>

<style> /*Les balises styles permettent d'insérer du CSS à n'importe quel endroit, mais vous pouvez aussi enlever tout ce qu'il y a entre ces balises et tout copier dans votre fiche CSS à la place !*/
/*Sujet récent*/
     
        #recent_topics {
          background-color: #FFFFFF; /*ça c'est la couleur de votre fond*/
          font-family: 'Playfair Display SC', serif; /* la police d'écriture utilisée*/
        color: #44474C; /*la couleur du texte*/
        font-size: 14px; /*la taille du texte*/
        height: 200px; /*la hauteur du widget*/
    width: 200px; /*la largeur du widget*/
        padding: 10px; /* c'est l'espace entre la bordure et votre texte*/
        border: 5px solid #F4F0F3; /* la bordure, son épaisseur, son type et sa couleur*/
        overflow-y: auto; /* pour scroller (= "ascenceur")*/
        overflow-x: hidden;
        }</style>

Dîtes-moi si ça fonctionne bien pour vous~

EDIT : Pour trouver des couleurs qui correspondent avec votre thème, je vous recommande https://color.adobe.com/fr/create/color-wheel/

[snunez]

Le css m'écrit ça 
Ré edit: j'ai juste retirée ce que vous avait mit en rouge comme tuto explications  et c'est revenu normal 
Sinon, pourquoi ça ne défile pas beaucoup? 
Bon, à mon avis ça doit être normal, ça le fait toujours j'ai remarquée. Bon, et bien déjà ça de  fait manque plus à ce que je passe une petite commande pour une P.A et faire le reste, ravie d'avoir pu travailler avec vous! 
Ps: ça fait super joli ! 

[Rin_.]

Alors si il y a ce type de message qui s'affiche c'est surement parce que vous avez du coder les balises <style> ou les balises html du début! Comme je le disais vous pouvez copier coller le code que je vous ai donné entièrement dans votre page d'accueil OU copier la première partie (donc le div align et le javascript) et supprimez les balises style (et leur contenu) que vous devez ensuite copier dans votre fiche CSS (en enlevant les <style> )

J'espère que c'est compréhensible xD
Ravie de savoir que ça vous plaît :3

EDIT : Uhmmm... laissez-moi regarder~
Que voulez-vous dire par défiler?

[snunez]

Quoi? Il faut que je retire des codes dans le css parmit ceux que vous m'avez donnée? 

J'ai un peu du mal à comprendre... j'ai juste retirée les mots en rouges, ceux qui expliquent je pense que ça doit être ça ce dont vous parlez   ce qui commencent par */...

Ouais parce que le défilement s'arrête qu'a 4 topics je voulais savoir si on pouvais plus ^^

[Rin_.]

Désolée si ce n'est pas clair ;__;
La façon la plus simple est de tout coller dans la page d'accueil

Mais vous pouvez ici faire ceci :
Page d'accueil :

Code:

<div align="left">
  <div id="recent_topics">
  </div>
</div><script type="text/javascript">jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});</script>

CSS :

Code:


#recent_topics {
          background-color: #FFFFFF;
          font-family: 'Playfair Display SC', serif;
        color: #44474C;
        font-size: 14px;
        height: 200px;
    width: 200px;
        padding: 10px;
        border: 5px solid #F4F0F3;
        overflow-y: auto;
        overflow-x: hidden;
        }

Pour le défilement, j'imagine que tout doit se jouer dans le javascript, et malheureusement je suis une vraie bouse en jv ;-;
Désolée

Ou alors, peut-être que ça en affiche beaucoup plus mais qu'il à une limite a ce qu'il appelle récent (au niveau de la date, si plus vieux que 3 jours alors il ne les affiche pas) Essayez de poster un nouveau message pour voir si ça l'actualise

[snunez]

Rhoo! Mais c'est moi la bouse,  tu te débrouille  mieux que moi et oui, c'est ce que je me dis pour le défilement, et je remarque que sur la P.A le defilement est moindres mais bon il est toujours là, cest comme cà apparemment. Bon et bien, au moins une chose de faite je verrai la suite de ma P.A en commande,  je ne sais où mais je verrai enfin bref! Merci en tous cas, pour c'est très claires et précises explications ! On y arrive enfin!  :thanks:   
Vous pouvez archivé en espérant que ça aide d'autres personnes qui en auront besoin^^

Excusez moi, j'ai du m'absenter un peu mais c'est bon, j'ai enfin pu mettre votre code!