Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    PA avec news en images défilantes & scrollbar personnalisée

    Partagez
    FémininAge : 19Message(s) : 55

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Lunayine
    le Lun 16 Mar 2015 - 18:39
    Rappel du premier message :

    Bonjour à tous,

    Voici une PA en LS réalisée en réponse à la demande de Saphire


    Aperçu - Aperçu live - Utilisable pour n'importe quel version de forums, n'importe quel site


    Quelques petites précisions
    Liens au survol : perdent en opacité
    Images News : 391*118 px ( redimensionnement auto - pas besoin de changer l'adresse de l'image pour les miniatures )
    Images du Staff : 70*45 ( redimensionnement auto )
    Images Membre et RP du mois : 170*100 ( redimensionnement auto )
    Violet clair correspondant au fond du forum : #f4e7f5 (à mettre dans le PA si vous voulez cette couleur)
    Les deux cases au fond violet foncé sont en réalité d'un noir semi-opaque, la couleur est donc celle de votre fond en plus foncé.
    Le code CSS est donné en deux parties, ce qui vous donne le choix de personnaliser la scrollbar ou non.

    Un petit merci pour voir les codes, ça fait toujours plaisir =)


    On commence avec le code javascript qui va permettre d'afficher les images défilantes dans le bloc Nouveautés.
    Javascript ( Panneau d'administrateur > Modules > Gestion des pages HTML et codes Javascript > Codes Javascript > Créer un nouveau code > Affichage : Page d'accueil ) :

    Dans ce code, il n'y a à s'occuper que de deux parties.
    Explication Javascript 1. :

    Pour rajouter une image, il suffit de rajouter ce bloc de 4 lignes après le sixième bloc en changeant le 0 en 6 pour la 7ème image puis en 7 pour la huitième, etc.

    Explication Javascript 2. :

    Dans cette partie, il faut remplacer comme dans la première partie les écritures en majuscules. Il faut donc remplacer URL_IMAGE_0 aux deux endroits par l'adresse de la première image ( la même que vous avez mis en première dans la première partie du code ). Il n'y a que l'adresse de la première image à mettre ( pour que le code démarre ) donc rien à changer si vous rajoutez des images.
    Voilà, c'est tout pour le javascript compliqué o/

    CSS ( Panneau d'administrateur > Affichage > Images et Couleurs > Couleurs > Feuille de style ) :
    → Scrollbar personnalisée


    → PA :

    J'ai mis des indications au niveau des couleurs à modifier si vous souhaiter changer les couleurs de fonds et liens.

    Code HTML de la PA ( Panneau d'administrateur > Affichage > Page d'accueil > Généralités ) :

    À modifier dans la PA:
    URL_IMAGE_STAFF_X → (X est un chiffre entre 0 et 6) Remplacer par l'adresse de l'image du membre du Staff
    URL_IMAGE_X et URL_NEWS_X → Remplacer par la même chose que dans le javascript en respectant les numéros ( afin d'avoir un accès aux images des nouveautés sans devoir attendre le défilement )
    URL_IMAGE_RP et URL_IMAGE_MEMBRE → Remplacer par l'adresse de l'image du membre et du RP du mois
    Et bien sûr tous les # à remplacer par le lien voulu et vos textes à placer.

    Il arrive que l'interface de l'édition de la PA dans forumactif bug, par exemple si vous dépassez la limite de caractères autorisés. Pensez donc à sauvegarder quelque part le code de votre PA.


    Je rappelle que le copyright est obligatoire et que vous avez la possibilité de demander de l'aide pour personnaliser votre code dans cette partie. De plus, si vous rencontrez un problème avec le Javascript ou les autres codes, cette partie vous permettra de vous faire épauler.
    FémininAge : 24Message(s) : 67
    layna
    le Dim 31 Jan 2016 - 23:36
    jadore
    FémininAge : 21Message(s) : 30
    Eloo'
    le Sam 27 Fév 2016 - 15:25
    tout simplement sublime *-* merci du partage :)
    FémininAge : 13Message(s) : 91
    Mystigri
    le Dim 28 Fév 2016 - 11:52
    Elle est joli.


    FémininAge : 17Message(s) : 149
    Layla4
    le Dim 6 Mar 2016 - 16:08
    Merci !
    MasculinAge : 17Message(s) : 80
    Kinjiro
    le Dim 27 Mar 2016 - 14:56
    Merci, c'est ce que je cherchais !


    FémininAge : 38Message(s) : 129
    Dacina moe
    le Mer 30 Mar 2016 - 21:44
    Jadore merci :)
    FémininAge : 29Message(s) : 38
    Dodolovelove
    le Jeu 31 Mar 2016 - 13:18
    Hey ça a l'air top! Je vais essayer! **
    FémininAge : 30Message(s) : 367
    Kahlan
    le Ven 1 Avr 2016 - 16:36
    merci beaucoup pour ce partage
    FémininAge : 26Message(s) : 182
    Ciàran
    le Ven 1 Avr 2016 - 20:13
    merci :)
    FémininAge : 25Message(s) : 66
    Geci
    le Sam 16 Avr 2016 - 20:48
    Merci ! ^^ Je cherchais justement pour faire un animation des news comme ça.


    FémininAge : 24Message(s) : 50
    .cranberry
    le Lun 18 Avr 2016 - 14:37
    Magnifique ♥
    FémininAge : 27Message(s) : 294
    Tatia38
    le Lun 18 Avr 2016 - 21:48
    sublime merci
    FémininAge : 19Message(s) : 187
    Piratress
    le Sam 7 Mai 2016 - 9:26
    Merci! <3
    MasculinAge : 30Message(s) : 49
    defenrir
    le Mer 11 Mai 2016 - 16:29
    merci =)
    FémininAge : 27Message(s) : 21
    Dragonia
    le Lun 6 Juin 2016 - 22:19
    très sympa ^^
    FémininAge : 18Message(s) : 239
    Nono-Chan
    le Mar 7 Juin 2016 - 20:17
    Merci !
    FémininAge : 19Message(s) : 94
    Hyuna
    le Ven 17 Juin 2016 - 5:48
    Merci
    FémininAge : 20Message(s) : 9
    Skyggie
    le Mar 21 Juin 2016 - 20:04
    Super !
    merci du partage (:
    FémininAge : 22Message(s) : 77
    Lust Caution
    le Ven 24 Juin 2016 - 14:32
    Merci :3
    FémininAge : 22Message(s) : 160
    Marion Navi
    le Dim 4 Sep 2016 - 15:50
    merci
    FémininAge : 24Message(s) : 54
    Evil Queen 4ever
    le Mar 6 Sep 2016 - 1:24
    super




    FémininAge : 24Message(s) : 185
    .loumpia
    le Sam 10 Sep 2016 - 14:07
    :)
    FémininAge : 25Message(s) : 20
    alas
    le Ven 16 Sep 2016 - 18:32
    Merci du partage !
    MasculinAge : 20Message(s) : 47
    Samiro
    le Sam 17 Sep 2016 - 11:32
    Merci
    FémininAge : 25Message(s) : 10
    BlueAmethyst
    le Sam 29 Oct 2016 - 15:22
    Merci, vraiment géniale!
    Contenu sponsorisé
    Aujourd'hui à 10:38

      La date/heure actuelle est Sam 3 Déc 2016 - 10:38