AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-20%
Le deal à ne pas rater :
Drone Dji DJI Mini 4K (EU)
239 € 299 €
Voir le deal

    [résolu][PA] Demande code page d'accueil bloc avatars

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mer 8 Juin 2016 - 10:33

    Code page d'accueil



    Bonjour à tous, j'ai pour projet d'ouvrir un nouveau site qui sera partenaire de mon forum actuel (avoir son propre partenaire si ce n'est pas une bonne idée ça ^^) et pour pouvoir réaliser tout ça je recherche à mettre en place un accueil bien spécifique. Je gère actuellement un forum d'entraide 100% gratuit et l'idée serait avec mon nouveau site de pouvoir placer les avatars de mes membres sur la page d'accueil tout en pouvant la mettre à jour régulièrement.

    Schéma(s) et Eléments
    Schéma : https://nsa38.casimages.com/img/2016/06/06/160606041544954033.jpg

    Tailles des éléments : https://yt3.ggpht.com/-Yxt8ox3T-E8/AAAAAAAAAAI/AAAAAAAAAAA/j0dVj2LkhiU/s100-c-k-no-rj-c0xffffff/photo.jpg

    Effets voulus : Si possible avoir un petit grossissement de l'image histoire de mettre un effet ce serait vraiment classe.

    Version de votre forum : phpBB3


    Autres éléments:

    Le but serait d'avoir un peu cette configuration: https://www.youtube.com/user/EntraideLesSaigneurs/channels?shelf_id=21&view=49

    C'est ma chaîne communautaire pour info.


    Ressources
    https://i.servimg.com/u/f86/17/84/80/30/homme_10.png

    https://i.servimg.com/u/f86/17/84/80/30/oeil_i10.png

    https://i.servimg.com/u/f86/17/84/80/30/vidyo_10.png





    Voilà, j'ai déjà vu pas mal de site avec une page d'accueil comme ça et je trouve tout ca vraiment beau et super dynamique.

    Je n'ai pas de connaissances dans ce domaine bien je j'arrive après coup à modifier le code je suis incapable dans un premier temps de l'encoder c'est pourquoi je préfère demander à un Pro.

    Cette page d'accueil je l'espère pourra plaire à pas mal de monde ici j'en suis certains.

    Je reste à disposition si besoin et je suis également prêt à faire de la Pub pour celui ou celle qui voudra bien m'aider Wink

    Pour info j'ai déjà fais une demande de PA il y a un petit moment et j'ai été énormément satisfait du résultat d'ailleurs vous remarquerez que votre lien de site est visible sur le code: http://www.entraide-youtubers.com/

    En espérant être en règle ^^

    Bonne journée à tous.


    Dernière édition par Solid6Snake le Mer 20 Juil 2016 - 21:19, édité 3 fois
    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Ven 10 Juin 2016 - 8:02

    Up Wink
    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Lun 13 Juin 2016 - 7:38

    Je me permet un nouveau petit up désolé mais c'est un projet que je souhaite mettre en valeur :kdo:
    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mer 15 Juin 2016 - 8:11

    Up !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 20 Juin 2016 - 21:50

    Salut!

    Donc si je comprends bien, tu as un forum de forumactif et tu souhaite créer un autre site web qui aura une page d'accueil assez spécifique. J'ai quelques questions...

    1 : Ce nouveau forum sera-t-il un forum de forumactif ou sera-t-il sous une autre plateforme?
    2 : C'est possible d'avoir un lien de la demande que tu avais fait pour ton forum? Cela pourrait nous inspirer pour celle-ci.
    3 : Si le site en question a été créé, serait-ce possible d'en avoir le lien?



    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Ven 24 Juin 2016 - 20:51

    Merci de venir passer faire un petit tour par ici ^^



    1 - Je ne pense pas utiliser un forumactif de base après coup je voulais au début mais étant donné que ce ne sera pas un forum ce sera simplement un site secondaire au forum c'est mieux de faire un simple site.


    2 - Voilà ma première demande:

    https://www.never-utopia.com/t57911-page-d-accueil-slideshow-defilante-de-solid6snake#878125

    Voilà le résultat aujourd'hui sur mon propre forumactif:

    http://www.entraide-youtubers.com/


    3 - Voilà le lien du site en construction:

    http://entraide-youtubers.e-monsite.com/
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 5 Juil 2016 - 5:36

    Hellow !

    La demande est toujours d'actualité? Merci de donner des nouvelles d'ici max 10 jours si tu ne veux pas que le sujet soit archivé.



    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mar 5 Juil 2016 - 8:02

    Bonjour, oui oui je suis toujours disponible je passe régulièrement j'ai d'ailleurs répondu à votre question ^^

    C'est réalisable pour vous ce genre de chose?
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 5 Juil 2016 - 8:34

    Essaie juste de upper disons au moins une fois par semaine pour qu'on ne pense pas que le sujet est abandonné Wink

    Sinon... C'est possible d'après moi, mais pas facile.



    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mar 5 Juil 2016 - 19:40

    Ok je prend note je passerais régulièrement mettre un petit Up Wink
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 5 Juil 2016 - 20:34

    Hello !

    Je viens également pour poser une question, je pense qu'il y a peut-être un truc qui m'échappe :hum:

    Il s'agit d'un code que tu pourras mettre sur la page d'accueil de ton site, où tu rajouterais toi même les chaines des membres en écrivant pour chacun :
    - le nom de la chaine
    - le lien de la chaine
    - une image
    - le nombre d'abonnés
    - le nombre de vues
    - le nombre de vidéos

    C'est bien ça ? :)

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mer 6 Juil 2016 - 8:58

    C'est exactement ça Nihil Scar Winspeare.

    Je préfère faire la modification des logos et liens cliquables vers les chaînes, abonnés et vues manuellement ça forcera les membres à venir régulièrement sur le site demander la modification des statistiques comme ça.

    Je ne compte pas mettre 8000 chaînes pour info mais seulement les chaînes YouTube partenaires de mon forumactif Wink

    Bon ça monte vite pour l'instant ils sont déjà une bonne cinquantaine quand même à nous apporter de la visibilité.

    Merci d'avance.
    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Lun 11 Juil 2016 - 18:26

    Un petit Up comme demandé afin de montrer que je suis toujours là :cow:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 11 Juil 2016 - 19:43

    Hello o/

    Il y a plusieurs liens pour une seule chaine ou pas ? Tu peux nous faire un exemple pour une chaine s'il te plait ?

    C'est-à-dire :

    Pour chaque élément :
    Nom de la chaine => lien ou pas lien ? Si oui vers où ?
    Image =>  lien ou pas lien ? Si oui vers où ?
    Nb abo =>  lien ou pas lien ? Si oui vers où ?
    Nb vues =>  lien ou pas lien ? Si oui vers où ?
    Nb vidéos =>  lien ou pas lien ? Si oui vers où ?

    Sans mettre les liens, en suivant juste ton schéma, c'est quelque chose dans ce style là que tu veux : http://codepen.io/nigul/full/yJPBaA/ visuellement ?

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mar 12 Juil 2016 - 12:42

    Salut Nihil Scar Winspeare, alors il n'y aura qu'un seul lien par chaîne oui.

    J'ai créé une page sur le site regarde comment ça rend pour exemple:

    http://entraide-youtubers.e-monsite.com/pages/categorie-des-chaines/chaines-emissions.html

    En gros visuellement c'est ce que je recherche, un avatar cliquable en redirection direct vers la chaîne du membre de mon forum.


    Nom de la chaîne => Pas de lien non, simplement le nom de la chaîne
    Image =>  Lien oui, ce sera ule Logo en redirection direct vers la chaîne
    Nb abo =>  Pas de lien non, je ferais la modification sur demande du membre
    Nb vues =>  Pas de lien non, je ferais la modification sur demande du membre
    Nb abo =>  Pas de lien non, je ferais la modification sur demande du membre
    Nb vues =>  Pas de lien non, je ferais la modification sur demande du membre
    Nb vidéos =>  Pas de lien non, je ferais la modification sur demande du membre


    http://codepen.io/nigul/full/yJPBaA/

    C'est exactement ce que je recherche pour mon accueil de site oui  cheers

    En faite je ne veux pas mettre de liens dans les nombres de vues, abonnés et vidéos parce que le plus important est le nom de la chaîne et le logo cliquable qui va rediriger vers la chaîne YouTube.

    Etant donné que je vais classer les vidéastes manuellement dans les catégories respectives je veux faire simple et celui qui voudra découvrir une chaîne de tutoriels n'aura qu'à aller directement dans la catégorie Tutoriels et ainsi de suite.

    Regardez j'ai déjà placé mes catégories sur la droite:

    http://entraide-youtubers.e-monsite.com/pages/categorie-des-chaines/chaines-tutoriels-informatique.html

    Pour terminer ce que je recherche c'est exactement votre lien Wink
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 12 Juil 2016 - 21:57

    Okay ^^

    Est ce que tu sais comment ajouter du HTML et du CSS sur e-monsite ou pas ? :) (pour mettre les codes)

    Si oui, voici le code :
    Le HTML :
    Code:
    <div class="channels">

      <div class="box-channel">
        <div class="channel-name">Nom de la chaine</div>
        <a class="channel-image" href="http://www.never-utopia.com/" target="_blank">
          <img src="http://placehold.it/180x180" alt="Nom de la chaine">
        </a>
        <div class="channel-infos">
          <div class="nb-abo">555</div>
          <div class="nb-vues">555</div>
          <div class="nb-videos">555</div>
        </div>
      </div><!-- fermeture .box-channel -->

    </div>

    Tu l'auras peut-être remarqué, pour rajouter une chaine, il faut donc copier / coller cette partie là :
    Code:
     <div class="box-channel">
        <div class="channel-name">Nom de la chaine</div>
        <a class="channel-image" href="http://www.never-utopia.com/" target="_blank" title="Visiter la chaine">
          <img src="http://placehold.it/180x180" alt="Nom de la chaine" />
        </a>
        <div class="channel-infos">
          <div class="nb-abo">555</div>
          <div class="nb-vues">555</div>
          <div class="nb-videos">555</div>
        </div>
      </div><!-- fermeture .box-channel -->

    Le CSS à rajouter est celui ci :
    Code:
    /* Bloc avec toutes les chaines */
    .channels {
      max-width: 1180px;
      padding: 10px 0;
    }

    /* Un bloc pour une chaine */
    .box-channel {
      text-transform: uppercase; /* texte en MAJ */
      width: 180px;
      margin: 10px 20px;
      display: inline-block;
      vertical-align: bottom;
    }

    /* Permet d'annuler le style des liens si on en met */
    .box-channel a,
    .box-channel a:hover
    .box-channel a:visited {
      color: inherit;
      text-decoration: none;
    }

    /* Nom de la chaine */
    .channel-name {
      margin-bottom: 10px;
      font-size: 16px;
      text-align: center;
    }

    /* Bloc où il y aura l'image de la chaine */
    .channel-image {
      display: block;
      height: 180px;
      overflow: hidden;
    }

    /* On force l'image à prendre toute la largeur */
    .channel-image img {
      width: 100%;
    }

    .channel-infos {
      margin-top: 5px;
    }

    /* Chaque ligne d'infos */
    .channel-infos > div {
      margin-left: 5px;
      padding: 5px;
      background-repeat: no-repeat;
      padding-left: 25px;
      font-size: 14px;
    }

    /* Style pour abo */
    .nb-abo {
      background-image: url("http://i86.servimg.com/u/f86/17/84/80/30/homme_10.png");
      background-position: 4px center;
    }

    /* Style pour vues */
    .nb-vues {
      background-image: url("http://i86.servimg.com/u/f86/17/84/80/30/oeil_i10.png");
      background-position: left center;
    }

    /* Style pour vidéos */
    .nb-videos {
      background-image: url("http://i86.servimg.com/u/f86/17/84/80/30/vidyo_10.png");
      background-position: 3px center;
    }

    Le HTML sera toujours le même, mais il est possible qu'on change le CSS ensuite pour adapter à ce que tu souhaites une fois qu'il sera en place

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Mar 12 Juil 2016 - 22:56

    Oh mon Dieu c'est magnifique :coeur:

    Voilà j'ai placé le code sur l'accueil et le CSS c'est bon tout fonctionne parfaitement.

    http://entraide-youtubers.e-monsite.com/

    Je vais m'amuser à modifier le CSS afin de le cadrer parfaitement avec la taille de ma page d'accueil.


    Je deviens gourmand mais serait-il possible d'ajouter ce genre de chose?

    • Ajouter un léger effet grossissant le logo.

    • Rendre le bord cadre des logos de chaîne un peu plus arrondi?

    • Modifier la police du titre au choix?

    • Ajouter un effet de modification de couleur (bleu) sur le non de la chaîne?

    • Ajouter un effet de modification de couleur (rouge) au passage du curseur sur les trois petits icônes nombre d'abonnés, vues et nombre?

    Histoire de rendre le tout un peu plus homogène et moins rigide.

    J'en demande beaucoup je sais mais comme le code marche parfaitement je suis sur que cela pourrait servir à d'autres utilisateurs de Never-utopia et ça risque fortement d'être demandé.



    Merci pour le code en tout cas c'est exactement ce que je voulais :miam:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 14 Juil 2016 - 9:46

    J'ai une petite question pour "• Ajouter un léger effet grossissant le logo". "• Ajouter un effet de modification de couleur (bleu) sur le non de la chaîne?".
    C'est au survol ou bien tout le temps ?

    Solid6Snake a écrit:• Ajouter un effet de modification de couleur (rouge) au passage du curseur sur les trois petits icônes nombre d'abonnés, vues et nombre?
    Tu parles de colorer le texte ou les icones ? Si ce sont les icones, il faudra faire les images en rouge en plus ^^

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Jeu 14 Juil 2016 - 12:45

    Alors déjà merci de suivre l'évolution de ma demande et de prendre le temps de m'aider ^^


    → Pour l'effet grossissant le logo simplement au survol oui, comme un petit zoom discret par exemple.

    → Pour l'effet de modification de la couleur sur le titre de la chaîne c'est aussi au survol oui, si possible progressif et non d'un coup tout sec.

    → Pour la modification couleur c'est uniquement sur les icônes oui et pas de problème pour les icônes de couleurs différentes c'est bon pour ça.

    Ressources
    https://i.servimg.com/u/f35/17/84/80/30/homme_10.png

    https://i.servimg.com/u/f35/17/84/80/30/oeil_i10.png

    https://i.servimg.com/u/f35/17/84/80/30/vidyo_10.png



    Si tout ceci est possible ce serait géant  cheers


    Dernière édition par Solid6Snake le Ven 15 Juil 2016 - 21:35, édité 1 fois
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 15 Juil 2016 - 21:30

    Attention à ton message, je crois qu'il y a un soucis avec la fermeture des div et cela casse un peu le forum ^^

    La partie qui pose soucis est celle-ci :
    Code:
    <span class="officiel_titre2">Ressources</span>
    <span class="officiel_contenu">http://i35.servimg.com/u/f35/17/84/80/30/homme_10.png</span>

    <span class="officiel_contenu">http://i35.servimg.com/u/f35/17/84/80/30/oeil_i10.png</span>

    <span class="officiel_contenu">http://i35.servimg.com/u/f35/17/84/80/30/vidyo_10.png</span>
    </div>

    Il faut juste enlever la fermeture de la div à la fin ^^. En effet, tu n'as pas ouvert de div dans ce message, donc on n'en ferme pas :p
    En fait, tu pourrais juste mettre les liens tout seuls si tu veux, pas besoin de t'embêter avec la mise en page la prochaine fois ^^

    Allez, maintenant c'est parti !

    Je te donne le CSS modifications par modifications pour que tu puisses te souvenir de "quoi fait quoi" ^^

    1 - Le logo

    On remplace cette partie là :
    Code:
    .channel-image {
      display: block;
      height: 120px;
      overflow: hidden;
    }

    .channel-image img {
      width: 70%;
    }

    Par ceci :
    Code:
    /* Bloc qui contient l'illustration de la chaine */
    .channel-image {
      display: block;
      height: 120px;
      overflow: hidden;
      width: 70%;
      border-radius: 10px; /* coins arrondis */
      transform: translateZ(0); /* evite les bugs du survol + border radius */
    }

    /* Image de la chaine */
    .channel-image img {
      width: 100%;
      transition: all 300ms;
    }

    /* Image au survol */
    .channel-image:hover img {
      transform: scale(1.2); /* grossissement */
    }

    2 - Le titre

    On remplace ceci :
    Code:
    .channel-name {
      margin-bottom: 10px;
      font-size: 13px;
      text-align: left;
    }

    Par ceci :
    Code:
    /* Nom de la chaine */
    .channel-name {
      margin-bottom: 10px;
      font-size: 13px;
      font-family: "Times New Roman"; /* police */
      transition: all 300ms;
    }

    /* Nom de la chaine au survol */
    .channel-name:hover {
      color: blue;
    }

    3 - Les infos

    On remplace
    Code:
    .channel-infos > div {
      margin-left: 5px;
      padding: 5px;
      background-repeat: no-repeat;
      padding-left: 25px;
      font-size: 12px;
    }

    Par :
    Code:
    .channel-infos > div {
      margin-left: 5px;
      padding: 5px;
      background-repeat: no-repeat;
      padding-left: 25px;
      font-size: 12px;
      transition: all 300ms;
    }

    Et ensuite, à la fin du CSS on rajoute :
    Code:

    /* au survol des icones  */
    .nb-abo:hover {
      background-image: url(http://i35.servimg.com/u/f35/17/84/80/30/homme_10.png);
    }

    .nb-vues:hover {
      background-image: url(http://i35.servimg.com/u/f35/17/84/80/30/oeil_i10.png);
    }

    .nb-videos:hover {
      background-image: url(http://i35.servimg.com/u/f35/17/84/80/30/vidyo_10.png);
    }

    A chaque fois, pour changer la vitesse de transition il faut jouer avec le "300ms" ^^

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Ven 15 Juil 2016 - 21:59

    Super merci je viens d'effectuer les modifications:

    http://entraide-youtubers.e-monsite.com/

    C'est sublime Very Happy

    Je vais aménager le code pour trouver ce qui me conviendra le plus, par contre je constate que je n'ai que le coin supérieur gauche qui est arrondi c'est normal?

    Dernière petite chose, j'ai presque honte de redemander une autre soluce..

    Est-il possible d'ajouter un code qui me permettrait de faire une petite info bulle en passant sur le logo histoire de faire une légère description de la chaîne de mes membres?

    Exemple: En passant sur la toute première chaîne en haut à gauche voir le message dans une bulle "PM 3D Animation est spécialisée dans la conception, la création de projets en 3D"

    C'est possible de rajouter ça dans mes modules?

    Après promis j'arrête ^^

    Encore merci pour votre dispo je suis ouvert à toutes propositions pour vous faire de la Pub en échange!
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 15 Juil 2016 - 22:06

    Pour les images, j'ai donné un code à remplacé, il faut donc enlever cet ancien code et mettre à la place celui que je propose en dessous ^^
    Sinon, cela ne fonctionnera pas :p

    Pour la description, c'est possible, par contre tu vas devoir éditer le HTML de toutes les chaines que tu as modifiées :hum:
    Ce que je te conseillerais c'est plutôt de jouer avec l'attribut title du lien.

    C'est à dire :
    Code:
    <a class="channel-image" href="https://www.youtube.com/c/pm3danimation/featured" target="_blank">
          <img src="https://yt3.ggpht.com/-wD9gY4YLlxU/AAAAAAAAAAI/AAAAAAAAAAA/lKTJKMVQLqw/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="Nom de la chaine">
    </a>

    Devient :
    Code:
    <a class="channel-image" href="https://www.youtube.com/c/pm3danimation/featured" target="_blank" title="PM 3D Animation est spécialisée dans la conception, la création de projets en 3D">
          <img src="https://yt3.ggpht.com/-wD9gY4YLlxU/AAAAAAAAAAI/AAAAAAAAAAA/lKTJKMVQLqw/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="Nom de la chaine">
    </a>

    Et quand on survole quelques secondes, il y a une l'infobulle qui apparait (l'affichage diffère en fonction du navigateur) :
    [résolu][PA] Demande code page d'accueil bloc avatars 1468613168-capture-d-ecran-2016-07-15-a-22-04-28

    Après, si tu préfères une infobulle, on peut ^^

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Ven 15 Juil 2016 - 22:29

    C'est mieux qu'une info bulle pour le coup, merci.

    Par contre j'ai bien modifié le code pour les images par le nouveau code à remplacer mais rien ne change, enfin si j'ai deux coins arrondi mais pas les 4.

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 15 Juil 2016 - 22:43

    Dans ton CSS je vois toujours ceci qu'il faut enlever :

    Code:
    .channel-image img {
      width: 70%;
    }

    Il y a une modification de plus ici :
    Code:
    .channel-image {
      display: block;
      height: 120px;
      overflow: hidden;
      width: 100%;
      border-radius: 10px;
      transform: translateZ(0);
    }

    Ce n'est pas 100%; mais 70%;
    Code:
    width: 100%;
    devient
    Code:
    width: 70%;

    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Sam 16 Juil 2016 - 11:01

    Ah oui effectivement je viens de me rendre compte de ma bêtise.

    J'ai fais les modifications c'est bon.

    Je pense en avoir terminé avec ma demande sauf si vous avez autre chose à me proposer.

    Encore merci pour votre disponibilité :love:
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 21:46