*RESOLU* [PHPBB3] Un nouveau bandeau

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Aller en bas

*RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Lun 14 Aoû 2017 - 23:55
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Rappel du premier message :

Bonsoir,

Je fais apparaitre sur le portail de mon forum au centre le widget prédéfini "News" qui présente les photos postées dans le forum "Les Best" (le second forum de ma page d'accueil).

Serait-il possible d'avoir en haut de la page d'accueil, un script (Peut-être placé dans les généralités) pour avoir un bandeau avec les miniatures des photos présentées dans le module News du portail?

le bandeau pourrait se présenter ainsi:

Spoiler:


Merci pour votre aide.


Dernière édition par photoclic le Ven 18 Aoû 2017 - 23:52, édité 1 fois

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 10:46
photoclic
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Bonjour Philippe,

J'ai installé ton nouveau JS et modifié le template Portail/portal_body
J'obtiens bien tout le contenu de la colonne du milieu.
En ne gardant que les photos et l'auteur en dessous ce serait gagné.

J'ai laissé aussi le template Portail/mod_news modifié et le CSS proposé ici: https://www.milouze14.com/t30873-phpbb3-un-nouveau-bandeau#587293.
Avec ce template modifié, les photos dans le module news du portail sont présentées en double.

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 15:00
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
Oula que de questions ^^

Il existe plusieurs syntaxes pour les sélecteurs jQuery, l'une d'elle permet de définir le contexte dans lequel la recherche aura lieu:

$(SELECTEUR , CONTEXTE)
ainsi lorsque tu lis:
$('.mod_news',d)
je recherche tout élément dans d ayant pour classe mod_news.

L'ajout des arguments i,e :
i est l'index de l'élément en cours d'itération, e est l'élément lui même, c'est à dire une balise avec pour classe mod_news, tu dois plus être habitué à utiliser this mais je trouve plus commode de procéder avec e, c'est plus court à écrire et j'ai toujours accès à son index si besoin.

(eTitle, ePhoto[0].src, eLink[0].href)
Le titre, la source de la photo et le lien sont écrits dans la console.


J'espère avoir répondu dans les grandes lignes à tes questions ^^

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 16:28
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
@Milouze14
Script adapté sur le forum de Serge, je vous laisse regarder ensemble le CSS et compagnie ;)

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 17:06
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Un grand merci à Arnaud pour son aide et ses explications.

Philippe, ci-dessous le JS d'Arnaud:
Code:
$(function(){
    $('#main-content').before('<div class="M14Load_portal_title"><div>Les dernières photos en Best</div></div><br/><div class="M14Load_portal"></div>');
    $.get('/portal',function(d){
        var frag=document.createDocumentFragment();
        $('.mod_news',d).each(function(i,e){
            /*e=une news*/
            eTitle=$('.h3',e).text();
            ePhoto=$('.content img',e).filter(function(){return this.width>200&&this.height>200;});
            eLink=$('.content+p a[href^="/"]',e);
            eAuthor=$('.M14_portal_title>strong',e);
            if(eTitle&&ePhoto.length&&eLink.length&&eAuthor.length){
                div=document.createElement("div");
                titre=document.createElement("h3");
                titre.innerHTML=eTitle;
                photo=document.createElement("img");
                photo.src=ePhoto[0].src;
                lien=document.createElement("a");
                lien.href=eLink[0].href;
                lien.appendChild(photo)&&div.appendChild(titre)&&div.appendChild(lien)&&div.appendChild(eAuthor[0])&&frag.appendChild(div);
            }
        });
        $('.M14Load_portal').html(frag);
    });
});


J'ai commencé un début de CSS,mais je ne ne sais pas aller plus loin pour avoir les photos espacées et en ligne et les textes centrés comme sur le bandeau du portail:
Code:
   .M14Load_portal_title div{
    position: absolute;
    width: 15%;
    margin-top: -5px;
    line-height: 20px;
    height: 20px;
    background: #626262;
    color:white;
    left: 45%;
    text-align:center;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    }

   .M14Load_portal{
    width: 100%;
    height: 300px;
    background: #626262;
    border: 1px solid #ccc;
    color: #fff;
    padding-top:10px;
    overflow-y:auto;
    }
  
    .M14Load_portal div a img {
 max-height: 200px;
 max-width: 180px;
  margin:0px 0px 8px 18px;
}

Par ailleurs, je ne sais ce qu'il faut garder/retirer sur les 2 templates du portail modifiés, sachant que sur le portail les photos apparaissent en double.

Je viens de me rendre compte aussi que le bandeau est au dessus des 2 photos dont le code est dans les généralités. Faudrait peut-être que je déplace ce code ailleurs pour avoir ces photos au dessus du bandeau.

Merci Philippe pour ton aide précieuse pour finaliser tout cela.

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 19:20
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello les amis,
merci Arnaud pour ces explications,
Serge je vais faire les modifications sur ton fofo exceptionnellement car je n'ai pas du tout le même reflet sur mon fofo de tests



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 19:31
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
Je t'en prie et @ bientôt mon zami :)

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 20:08
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Serge,

voilà mon ami, on ne pourra faire guère mieux clin oeil .

La c.s.s a été commentée afin que tu puisses te repérer hinhin



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Ven 18 Aoû 2017 - 23:39
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Génial les amis! Un grand merci à vous.
Ayant les idées (trop surement) mais pas le pétrole, ce truc n'aurais jamais vu le jour sans vous.

J'ai réussi à adapter le CSS que tu m'as préparé et commenté pour avoir ce bandeau comme je l'avais en tête.

J'ai réussi aussi à faire passer le bandeau sous mes photos en tête de page d'accueil en modifiant le début du JS d'Arnaud avec ce code
Code:
$('#main-content ul.linklist:first').before(

J'ai réussi enfin à trouver pourquoi il y avait des photos en double dans le module news du portail.
L'anomalie se trouvait dans le template modifié  Portail /Mod_news ou j'ai retiré cette partie:
Code:
<div class="content"> <div class="M14_Portal_linkNone">{post_row.TEXT}</div><br /><br />
                      <a class="M14_Portal_link"href="{post_row.U_VIEW_COMMENTS}"style="display:none;"title="{post_row.TITLE}">{post_row.TEXT}</a>

pour ne laisser que ça:
Code:
<div class="content">{post_row.TEXT}<br /><br />

Je passe donc ce sujet enrichissant en résolu  super

Re: *RESOLU* [PHPBB3] Un nouveau bandeau

Sujet résolu le Sam 19 Aoû 2017 - 5:47
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Serge,

de rien mon ami hinhin .

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum