AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez
    Lunayine
    FémininAge : 19Messages : 55

    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.
    A-Lice
    FémininAge : 22Messages : 4939

    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

    Artchie
    FémininAge : 25Messages : 40

    le Mer 22 Avr 2015 - 17:36

    La personnalisation de la scrollbar :love:
    C'est tip top génial merci beaucoup !
    MEGALAXY
    MasculinAge : 27Messages : 16

    le Jeu 7 Mai 2015 - 15:09

    tres beau
    Nighthayah
    FémininAge : 29Messages : 67

    le Ven 8 Mai 2015 - 2:47

    Merci beaucoup
    Neymar
    MasculinAge : 18Messages : 135

    le Sam 9 Mai 2015 - 14:42

    Hawnlesquement Rivalesque, bravo o/
    Likilou
    MasculinAge : 23Messages : 262

    le Dim 24 Mai 2015 - 19:39

    merci



    petit lu
    FémininAge : 24Messages : 162

    le Mar 2 Juin 2015 - 21:34

    *Tombe dans les pommes*
    C'est magnifique
    merci du partage ♥
    pika-cerise
    FémininAge : 25Messages : 90

    le Mar 2 Juin 2015 - 21:46

    C'est sublime merci
    Aoi Kiseki
    FémininAge : 24Messages : 96

    le Mer 3 Juin 2015 - 15:35

    Merci
    Amélia
    FémininAge : 17Messages : 49

    le Mer 3 Juin 2015 - 18:10

    MErci !
    Deamyx
    MasculinAge : 20Messages : 134

    le Mer 3 Juin 2015 - 19:02

    Merci, très belle Pa *-*
    Lilynufare
    FémininAge : 25Messages : 230

    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*
    Allison01
    FémininAge : 32Messages : 175

    le Mer 10 Juin 2015 - 13:16

    Superbe merci beaucoup Very Happy
    Furries
    FémininAge : 20Messages : 34

    le Jeu 11 Juin 2015 - 20:30

    Mercii !
    Prisver
    FémininAge : 16Messages : 33

    le Ven 12 Juin 2015 - 15:28

    Je prend, c'est génial. Merci. ~
    Honeey L.
    FémininAge : 24Messages : 79

    le Dim 14 Juin 2015 - 12:46

    Merci du partage ! Very Happy
    Brookinette
    FémininAge : 24Messages : 46

    le Lun 15 Juin 2015 - 15:59

    J'aime beaucoup Very Happy
    Imari
    FémininAge : 33Messages : 67

    le Mar 16 Juin 2015 - 16:13

    Merci bien :)



    Ju' de fruits
    FémininAge : 23Messages : 82

    le Mer 17 Juin 2015 - 12:25

    Merci !



    Emelyne
    FémininAge : 35Messages : 77

    le Mer 17 Juin 2015 - 16:09

    superbe ♥
    Merci !
    Acédie
    FémininAge : 18Messages : 89

    le Sam 20 Juin 2015 - 0:37

    merci !
    .pinkrocks
    FémininAge : 26Messages : 41

    le Lun 22 Juin 2015 - 23:31

    Superbe! :O
    Merci beaucoup pour le partage! <3
    Otulissa
    FémininAge : 19Messages : 18

    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 à 9:50


      La date/heure actuelle est Sam 10 Déc 2016 - 9:50