La date/heure actuelle est Dim 28 Avr 2024 - 5:34

7 résultats trouvés pour recent_topics

Derniers sujets affichés sur la page d'accueil

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://behind-the-sin.forumactif.com/

Description du problème

Bonjour !

Je sais que la question a déjà été posée (plein de fois) mais tous les messages que j'ai réussis à trouver à ce sujet datent de quasiment 10 ans donc je suppose que c'est pour ça que ça ne fonctionne pas.

En fait j'ai une case "derniers sujets" sur ma page d'accueil où je voulais afficher le contenu du widget "Sujets récents" et je n'arrive pas à trouver la méthode pour. Je sais que ça implique du javascript mais le seul code que je sais utiliser c'est pour afficher les derniers sujets d'un sous-forum précis, du coup ce n'est pas vraiment ce dont j'ai besoin =/

Est-ce que quelqu'un saurait comment l'intégrer dans la case ? Elle a un id #recent_topics, si ça aide, et la zone du css qui la concerne, c'est ça (elle se trouve dans la div .PAright) :

Code:
.PAright {
  width:260px;
  text-align:center;  padding:5px;
  display:inline-block;
}

.PAright {right:5px;float:right;}

.PAright div {
  border:2px solid var(--ava);
  padding:5px;margin:auto;
  min-height:200px;
  color:var(--ava);
  text-align:left;
  font-size:12px;
}


Petite question subsidiaire mais est-ce que c'est possible d'exclure certains sous-forums du widget ? Par exemple le sous-forum où j'affiche les news, ce genre de chose. Bon c'est un peu secondaire, si c'est pas possible je changerai le nom de la zone x)

Merci d'avance ♥
par IzumiRK
le Dim 4 Juin 2023 - 23:39
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Derniers sujets affichés sur la page d'accueil
Réponses: 10
Vues: 389

Script/Widget sur Page d'Accueil : Derniers Sujets

Re,

alors remplaces tout le contenu de ta page html par celui-ci:
Code:
<head>

    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <style>
       body {
 margin:0px;
 padding:0px;
 }
        /*Taille et couleur de la PA*/
        #pa-wrap {
          width: 1022px;
            height: 400px;
            font-family: 'Leto', sans-serif;
            margin-top :8px;
        }
        /*Bloc etiquettes*/
        ul.etiquettes{
  
   margin:0;
 padding:0;
       list-style:none;
           text-align:center;
 }
 ul.etiquettes li {
   display:inline-block;
 position:relative;
 bottom:24px;
 left:0px;
 list-style-type:none;
                 text-align:center;
 margin:0 6px 0 0;
 padding:6px;
 box-sizing:border-box;
 font-family:calibri;
   font-size:13px;
 letter-spacing:1px;
 color:#fff;
 text-transform:uppercase;
         }
         ul.etiquettes li > div{
                  padding:2px 8px;
                  border:#fff solid 1px;
         }
        /*Intérieur PA*/
        #pa {
            width: 100%;
            height: 93%;
            background: #fff;
            position: relative;
            bottom: -26px;
        }
      
        /*Style des liens*/
        #pa a {
            text-decoration: none;
            color: #9d9bb9;
            transition: all 0.3s;
        }
        #pa a:hover {
            color: #ccc;
        }
      
        /*Style des titre*/        
        #pa-wrap h1 {
            text-transform: uppercase;
            font-size: 22px;
            font-family: 'calibri', sans-serif;
            color: #ff9018;
            margin:0px;
            letter-spacing:0px;
            text-shadow: 1px 1px white;
            font-style:italic;
        }
        #pa-wrap h2 {
            text-align:center;
            font-size: 14px;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: #ff9018;
            font-family: 'Leto";
            white-space: nowrap;
            vertical-align: middle;
        }
        #pa-wrap h3 {
            text-transform: uppercase;
            color: #ccc;
            font-size: 12px;
            letter-spacing: 1.5px;
        }
        #pa-wrap h4 {
            text-align: center;
            font-size: 8px;
            color: #82818e;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Leto', sans-serif;
        }
      
        /*Bloc etiquettes*/
        #pa-contexte {
            width: 452px;
            height: 80px;
            position: absolute;
            left:15px;
          top:20px;
        }
        #pa-contexte div,
        #pa-news {
            width: 100%;
            height: 110px;
            background: #fff;
            border: 1px solid #f0dcc2;
            box-sizing: border-box;
            padding: 6px;
            overflow: auto;
            text-align: justify;
            font-size: 12px;
            color:#1f537d;
            line-height: 150%;
        }
      
        /*Bloc Staff*/  
        #votrestaff{
          width:60px;
          position: absolute;
          left:275px;
          top:140px;
       }
        #pa-staff {
            width: 270px;
            position: absolute;
            left: 425px;
            top: 202px;
            text-align: center;
            display: flex;
        }
        #pa-staff .pa-staff-block {
            transform: rotate(45deg);
            position: absolute;
            top:-60px;
            left:-75px;
            height: 50px;
            width: 50px;
            padding:2px;
            overflow: hidden;
    background: #93c0e6;
            
        }
        #pa-staff .pa-staff-block2 {
            
            position: absolute;
            transform: rotate(45deg);
            top:-60px;
            left:2px;
            height:50px;
            width:50px;
            padding:2px;
            overflow: hidden;
    background: #93c0e6;
            
        }
        #pa-staff .pa-staff-block3 {
            
            position: absolute;
            transform: rotate(45deg);
            top:-60px;
            left:79px;
            height:50px;
            width:50px;            
            padding:2px;
            overflow: hidden;
    background: #93c0e6;
            
        }
        #pa-staff .pa-staff-block4 {            
            position: absolute;
            transform: rotate(45deg);
            top:-60px;
            left:156px;
            height:50px;
            width:50px;
            overflow: hidden;
            padding:2px;
            overflow: hidden;
    background: #93c0e6;
            
        }
        #pa-staff .pa-staff-block5 {
            
            position: absolute;
            transform: rotate(45deg);
            top:-60px;
            left:233px;
            height:50px;
            width: 50px;
            padding:2px;
            overflow: hidden;
    background: #93c0e6;
            
        }
        #pa-staff .pa-staff-content {
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgba(255, 255, 255, 0.8);
            top: 0;
            left: 0;
            font-size: 10px;
            box-sizing: border-box;
            padding-top: 20px;
            transform: translate(0, 100%);
            transition: all 0.3s;
        }
        #pa-staff .pa-staff-content2 {
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgba(255, 255, 255, 0.8);
            top: 0;
            left: 0;
            font-size: 8px;
            box-sizing: border-box;
            padding-top: 2px;
            transform: translate(0, 100%);
            transition: all 0.3s;
        }
        #pa-staff .pa-staff-block:hover .pa-staff-content {
            transform: translate(0, 0);
        }
        #pa-staff .pa-staff-block2:hover .pa-staff-content {
            transform: translate(0, 0);
        }
        #pa-staff .pa-staff-block3:hover .pa-staff-content2 {
            transform: translate(0, 0);
        }
        #pa-staff .pa-staff-block4:hover .pa-staff-content2 {
            transform: translate(0, 0);
        }
        #pa-staff .pa-staff-block5:hover .pa-staff-content2 {
            transform: translate(0, 0);
        }
        #pa-staff .pa-staff-block6:hover .pa-staff-content2 {
            transform: translate(0, 0);
        }
        /*Bloc Slide */
        #slide {
                left:268px;
       top:208px;
       position:absolute;
         width:480px;
         height:150px;
         border:1px solid #d3dfed;
       }
        /*Bloc Sujets*/
       #recent_topics {
                position:absolute;
                 white-space: nowrap;
                 overflow: hidden;
                text-overflow: ellipsis;
         background: #fff;
         width:248px;
       height:235px;
                overflow-y:auto;
       top:-10px;
       right:-4px;
       padding:2px;
                color:#000;
         border: 1px solid #9acae5;
       font-family: 'Leto', sans-serif;
         text-align: left;
 }
      /*on donne une taille de police identique a tout le contenu*/
      #recent_topics , #recent_topics a[href^="/t"], #recent_topics a[href^="/u"]
      {
      font-size:12px;
       }
      /*on donne une couleur au texte hors lien*/
      #recent_topics
      {
      color: #1f537d;
      }
      /*on donne une couleur aux liens*/
      #recent_topics  a[href^="/t"]
      {
      color: #ff9018;
      }
       /*on donne une couleur aux Pseudos*/
      #recent_topics  a[href^="/u"],#recent_topics  a[href^="/u"] span
      {
      color:#1f537d !important;
      }
      #activite{
            text-align:center;
            font-size: 14px;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: #9acae5;
            font-family: 'Leto";
            white-space: nowrap;
            vertical-align: middle;
          width:254px;
          position: absolute;
          right:-4px;
          top:-30px;
            height:20px;
            vertical-align: middle;
       }
       a.dm_titre, a.dm_pseudo {
         color: #151515;
         text-transform: uppercase;
         font-size: 11px;
         font-weight: 600;
 }

 span.dm_par {
         font-size: 10px;
         font-style: italic;
         margin: 0 1em;
 }

 .dm_time {
         text-transform: uppercase;
         font-size: 9px;
         font-weight: 500;
         color: #6f6f6f;
         line-height: .8;
         margin: 0 0 1em 0;
 }
      
        /*Bloc des news*/  
      
       #nouveautes{
          width:250px;
          position: absolute;
          left:15px;
          top:130px;
            height:25px;
       }
        #pa-news {
            width: 250px;
            position: absolute;
            left: 15px;
            top: 160px;
            height: 200px;
        }
        #pa-news div {
            margin-bottom: 10px;
        }
        #pa-news div b {
            color: #acacb4;
        }
      
        /*Bloc des partenaires*/
      
        #pa-part {
            width: 270px;
            position: absolute;
            left: 474px;
            top: 13px;
            text-align: left;
        }
        #pa-part div {
            display: flex;
            width: 95%;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #pa-part div a {
            padding:0px;
        }
        #partenaires_ecrit {
            width: 100%;
            height: 65px;
            background: #fff;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 8px;
            overflow: auto;
            text-align: justify;
            font-size: 10px;
            line-height: 150%;
        }
      
        /*Bloc des prédéfinis*/
        #pa-pred {
            width: 250px;
            position: absolute;
            right: 20px;
            top: 50px;
        }
        #pa-predef .pa-predef-bloc {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #pa-predef a.lien-pred {
            letter-spacing: 1px;
            font-size: 10px;
            text-transform: uppercase;
        }
        #pa-predef .pa-pred {
            height: 70px;
            display: inline-block;
            position: relative;
            overflow: hidden;
            margin-bottom: 5px;
            max-width: 80px;
        }
        #pa-predef .pa-pred-content {
            position: absolute;
            height: 100%;
            width: 100%;
            background: rgba(255, 255, 255, 0.8);
            top: 0;
            font-size: 11px;
            box-sizing: border-box;
            padding-top: 23px;
            transform: translate(0, 100%);
            transition: all 0.3s;
            text-align: center;
        }
        #pa-predef .pa-pred:hover .pa-pred-content {
            transform: translate(0, 0);
        }
      
        #predef {
         position:absolute;
       right:20px;
       top:265px;
        }
       .lien-pred{
       position:absolute;
       right:23px;
       top:300px;
       }
      
      
        /*Bloc des top-sites*/    
        #pa-top {
            text-align:right;
            width: 253px;
            position: absolute;
            top: 233px;
        }
        #pa-top #pa-top-content {
            width: 100%;
            height: 80px;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: space-between;
        }
      
        /*Crédit*/
        #pa-credit {
            position: absolute;
            bottom: 8px;
            left: 20px;
            font-size: 9px;
            color: #d6d6d6;
            letter-spacing: 1px;
        }
    </style>
</head>

<body>
    <div id="pa-wrap">
        <div id="pa">
            <div id="pa-contexte">
                <div>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac leo tempor, tristique orci et, venenatis nibh. Phasellus congue nunc enim, vel efficitur nisi dignissim vitae. Vivamus efficitur, ligula sed efficitur pharetra, lorem diam pellentesque risus, volutpat congue leo ipsum vitae odio. Nunc mattis diam sodales erat consectetur, a tempor ante pellentesque.
                </div>
            </div>
            <div>
              <h1 id="votrestaff">Votre<br/>Staff</h1>
            </div>
            <div id="pa-staff">
                    <div class="pa-staff-block">  
                    <img src="https://i.servimg.com/u/f62/19/84/20/09/screen11.png" style="width:50px; height:50px;" alt="" />
                    <div class="pa-staff-content">
                        <h4>Tarumi Meruem</h4>Design | <a href="http://reiryoku-no-shigen.forumactif.com/privmsg?mode=post&u=2">MP</a>
                    </div>
                    </div>
                  
                    <div class="pa-staff-block2">
                    <img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
                    <div class="pa-staff-content">
                        <h4>Barzaqh</h4>Contexte | <a href="#">MP</a>
                    </div>
                    </div>
                    <div class="pa-staff-block3">
                    <img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
                    <div class="pa-staff-content2">
                        <h4>Balthier von Rosen</h4>Technique | <a href="#">MP</a>
                    </div>
                    </div>
                    <div class="pa-staff-block4">
                    <img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
                    <div class="pa-staff-content2">
                        <h4>...</h4>Technique | <a href="#">MP</a>
                    </div>
                    </div>
                    <div class="pa-staff-block5">
                    <img src="http://placehold.it/80x60" style="width:50px; height:50px;" alt="" />
                    <div class="pa-staff-content2">
                        <h4>...</h4>Technique | <a href="#">MP</a>
                    </div>
                    </div>
            </div>
          <div>
            <h2 id="nouveautes">Nouveautés</h2>
          </div>
            <div id="pa-news">
                <div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
                <div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
                <div><b>08/03</b> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </div>
            </div>
            <div id="pa-part">
                <h1 id="partenaires">Partenaires</h1>
                <div>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                  <h3>Si vous êtes QLF, vous ne pouvez passer à côté d'eux!</h3>
                </div>                
            </div>
            <div id="pa-pred">
              <div id="activite">Activité récente</div>
              <div id="recent_topics">  
                
                
                
                <script>
    $(function(){
$.get('/portal',function(data){$('#recent_topics').html($(data).find('#M14_ID_Recents .marquee').html());
});
});
  </script></div>
            <div id="pa-top">
                <h1>Top-sites</h1>
                <div id="pa-top-content">
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                    <a href="#"><img src="http://placehold.it/50x50" alt="" />
                    </a>
                </div>
            </div>
        </div>
        <ul class="etiquettes">
     <a href="...">
       <li style="background:#1f537d;">
         <div>Nouveautés</div>
       </li>
   </a>
   <a href="...">
      <li style="background:#1f537d;">
         <div>Règlement</div>
     </li>
   </a>
   <a href="...">
      <li style="background:#1f537d;">
       <div>Contexte</div>
      </li>
   </a>
   <a href="...">
     <li style="background:#1f537d;">
         <div>Guide de l'aspirant</div>
      </li>
   </a>
    <a href="...">
      <li style="background:#1f537d;">
      <div>Votre Staff</div>
     </li>
   </a>
    <a href="...">
      <li style="background:#1f537d;">
      <div>Partenaires</div>
     </li>
   </a>
                 <a href="...">
      <li style="background:#1f537d;">
      <div>Crédits</div>
     </li>
   </a>
                 <a href="...">
      <li style="background:#1f537d;">
      <div>Discord</div>
     </li>
   </a>            
   </ul>
         <div id="slide">
           <div id="slide-content">
           </div>
         </div>
      </div>

</body>






Les modifications effectuées:
L'appel de la bibliothèque jQuery
Code:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>





Ce que j'ai apporté pour l'apparence du contenu:
Code:

/*on donne une taille de police identique a tout le contenu*/
      #recent_topics , #recent_topics a[href^="/t"], #recent_topics a[href^="/u"]
      {
      font-size:12px;
       }
      /*on donne une couleur au texte hors lien*/
      #recent_topics
      {
      color: #1f537d;
      }
      /*on donne une couleur aux liens*/
      #recent_topics  a[href^="/t"]
      {
      color: #ff9018;
      }
       /*on donne une couleur aux Pseudos*/
      #recent_topics  a[href^="/u"],#recent_topics  a[href^="/u"] span
      {
      color:#1f537d !important;
      }


Ce que j'ai ajouté à l'id {#}recent_topics{/#}
Code:

 white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-y:auto;



Puis le script qui va rechercher sur le portail l'id que l on a ajouté dans le template:
Code:

<script>
    $(function(){
$.get('/portal',function(data){$('#recent_topics').html($(data).find('#M14_ID_Recents .marquee').html());
});
});
  </script>



Et voilou Wink  .

a++
par Invité
le Lun 11 Mar 2019 - 16:55
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Script/Widget sur Page d'Accueil : Derniers Sujets
Réponses: 11
Vues: 887

Script/Widget sur Page d'Accueil : Derniers Sujets

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : C'est un problème que je rencontre depuis des semaines déjà.
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour/Bonsoir,

Après avoir lu un bon paquet de sujets/tutoriels et l'annonce faite par le staff de Forumactif concernant ce widget (postée en 2015 si je ne m'abuse), je n'arrive toujours pas à placer les derniers sujets ayant eu une réponse dans une div sur ma page d'accueil.

Le javascript utilisé :
Code:
jQuery.get('/portal',function(data){jQuery('#recent_topics').html(jQuery(data).find('.forumline td.row1').html());});


L'appel dans le html fait :
Code:
<div id="recent_topics"></div>


Le CSS lié à l'id #recent_topics :
Code:
#recent_topics {
       position:absolute;
       background: #fff;
       width:248px;
       height:235px;
       top:-10px;
       right:-4px;
       padding:2px;
       border: 1px solid #9acae5;
       font-family: 'Leto', sans-serif;
       text-align: left;
 }


Précisions :
- j'ai activé le portail mais il n'est pas affiché;
- j'ai supprimé tous les widgets et les afficher ou non ne change rien au problème (quand ils sont affichés, une colonne se créer à côté de ma page d'accueil avec le widget fonctionnel);
- j'ai essayé en plaçant le script directement dans le html mais rien n'y fait;
- ma page d'accueil est une frame (avec une page html inclue à l'intérieur donc) appelée et non un codage placé directement sur la page d'accueil;
- c'est mon seul script faisant appel à ce widget;

Merci à vous !
par Amidamaru
le Lun 11 Mar 2019 - 2:36
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Script/Widget sur Page d'Accueil : Derniers Sujets
Réponses: 11
Vues: 887

Slider accordion tout cassé :'(

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Avant le 04 Juin 2018
Lien du forum : http://meltinpot-nostale.forumactif.com/

Description du problème

Bonjour !

Je gère le forum de ma guilde sur un mmo-rpg. J'avais fais tout propre le slider,
tout fonctionnait niquel. J'ai fais une pause d'un petit mois,
et à mon retour je trouve le slider tout cassé Sad
(Je précise que dans les logs du P.A, personne n'a touché à rien)

CSS:


Les autres codes sont ceux du tuto dispo je ne sais plus ou Smile

Screen du soucis:
par Océbé-Meltin*pot
le Lun 4 Juin 2018 - 16:02
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Slider accordion tout cassé :'(
Réponses: 2
Vues: 1607

Envoyer des liens automatiques sur la PA



Peux tu redonner le code de ton message d'accueil (en totalité)

et le CSS correspondant au widget "Sujets Récents" -> #recent_topics
par lmc38510
le Jeu 4 Mai 2017 - 12:48
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Envoyer des liens automatiques sur la PA
Réponses: 49
Vues: 1550

Problème défilement texte page d'accueil

Bonjour Neffa,

On va laisser tomber la création de page html et faire plus simple c'est a dire laisser tomber le javascript pour le défilement et prendre une balise marquee.

Code html.:

Votre css.:

Ca devrait fonctionner maintenant.
par tupac
le Lun 20 Fév 2017 - 18:50
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Problème défilement texte page d'accueil
Réponses: 12
Vues: 1727

Afficher les derniers sujets du forum sur la page d'accueil

Ah ... Je viens de comprendre le fonctionnement du script Smile

Pour la mise en forme, remplacez .SR1 par #recent_topics
par kiwi14637
le Lun 27 Avr 2015 - 18:23
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Afficher les derniers sujets du forum sur la page d'accueil
Réponses: 11
Vues: 5128

Revenir en haut

Sauter vers: