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
    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 : 22Message(s) : 4939

    Les Guildes
    Guilde des Conteurs:
    8/10  (8/10)
    Guilde des Illusionnistes:
    4/10  (4/10)
    Guilde des Architectes:
    12/20  (12/20)
    A-Lice
    le Mar 21 Avr 2015 - 22:19
    Hello !
    Désolée pour le temps que j'ai mis à venir valider ce LS !
    Il n'y aucun soucis, il est suffisamment clair (du moins expliqué) je déplace donc (:
    En plus il est tout mignon tout rose tout fille xD
    FémininAge : 25Message(s) : 40

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Artchie
    le Mer 22 Avr 2015 - 17:36
    La personnalisation de la scrollbar :love:
    C'est tip top génial merci beaucoup !
    MasculinAge : 27Message(s) : 16
    MEGALAXY
    le Jeu 7 Mai 2015 - 15:09
    tres beau
    FémininAge : 29Message(s) : 67
    Nighthayah
    le Ven 8 Mai 2015 - 2:47
    Merci beaucoup
    MasculinAge : 18Message(s) : 134
    Neymar
    le Sam 9 Mai 2015 - 14:42
    Hawnlesquement Rivalesque, bravo o/
    MasculinAge : 23Message(s) : 259
    Likilou
    le Dim 24 Mai 2015 - 19:39
    merci


    FémininAge : 24Message(s) : 162
    petit lu
    le Mar 2 Juin 2015 - 21:34
    *Tombe dans les pommes*
    C'est magnifique
    merci du partage ♥
    FémininAge : 24Message(s) : 90
    pika-cerise
    le Mar 2 Juin 2015 - 21:46
    C'est sublime merci
    FémininAge : 24Message(s) : 96
    Aoi Kiseki
    le Mer 3 Juin 2015 - 15:35
    Merci
    FémininAge : 16Message(s) : 49
    Amélia
    le Mer 3 Juin 2015 - 18:10
    MErci !
    MasculinAge : 20Message(s) : 127
    Deamyx
    le Mer 3 Juin 2015 - 19:02
    Merci, très belle Pa *-*
    FémininAge : 25Message(s) : 214
    Lilynufare
    le Jeu 4 Juin 2015 - 19:02
    elle est sympa, merci
    Invité
    le Jeu 4 Juin 2015 - 19:25
    Elle claque, elle est superbe *o*
    FémininAge : 32Message(s) : 175
    Allison01
    le Mer 10 Juin 2015 - 13:16
    Superbe merci beaucoup Very Happy
    FémininAge : 19Message(s) : 34

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Furries
    le Jeu 11 Juin 2015 - 20:30
    Mercii !
    FémininAge : 16Message(s) : 33
    Prisver
    le Ven 12 Juin 2015 - 15:28
    Je prend, c'est génial. Merci. ~
    FémininAge : 23Message(s) : 79
    Honeey L.
    le Dim 14 Juin 2015 - 12:46
    Merci du partage ! Very Happy
    FémininAge : 24Message(s) : 46
    Brookinette
    le Lun 15 Juin 2015 - 15:59
    J'aime beaucoup Very Happy
    FémininAge : 33Message(s) : 67

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Imari
    le Mar 16 Juin 2015 - 16:13
    Merci bien :)


    FémininAge : 23Message(s) : 80
    Ju' de fruits
    le Mer 17 Juin 2015 - 12:25
    Merci !


    FémininAge : 34Message(s) : 77
    Emelyne
    le Mer 17 Juin 2015 - 16:09
    superbe ♥
    Merci !
    FémininAge : 18Message(s) : 89
    Acédie
    le Sam 20 Juin 2015 - 0:37
    merci !
    FémininAge : 26Message(s) : 39
    .pinkrocks
    le Lun 22 Juin 2015 - 23:31
    Superbe! :O
    Merci beaucoup pour le partage! <3
    FémininAge : 19Message(s) : 18
    Otulissa
    le Lun 29 Juin 2015 - 12:22
    Waouw ! Je pense que cette PA fera la touche finale pour mon nouveau fow, merci beaucoup pour le partage ^^
    Contenu sponsorisé
    Aujourd'hui à 14:06

      La date/heure actuelle est Mar 27 Sep 2016 - 14:06