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.


  • Poster un nouveau sujet
  • Répondre au sujet

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

Partagez
avatar
Lunayine
FémininAge : 20Messages : 55

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.
avatar
layna
FémininAge : 25Messages : 68

le Dim 31 Jan 2016 - 23:36

jadore
avatar
Eloo'
FémininAge : 22Messages : 31

le Sam 27 Fév 2016 - 15:25

tout simplement sublime *-* merci du partage :)
avatar
Mystigri
FémininAge : 14Messages : 97

le Dim 28 Fév 2016 - 11:52

Elle est joli.



avatar
Layla4
FémininAge : 18Messages : 149

le Dim 6 Mar 2016 - 16:08

Merci !
avatar
Kinjiro
MasculinAge : 18Messages : 80

le Dim 27 Mar 2016 - 14:56

Merci, c'est ce que je cherchais !



avatar
Dacina moe
FémininAge : 39Messages : 161

le Mer 30 Mar 2016 - 21:44

Jadore merci :)
avatar
Dodolovelove
FémininAge : 30Messages : 38

le Jeu 31 Mar 2016 - 13:18

Hey ça a l'air top! Je vais essayer! **
avatar
Kahlan
FémininAge : 31Messages : 371

le Ven 1 Avr 2016 - 16:36

merci beaucoup pour ce partage
avatar
Ciàran
FémininAge : 27Messages : 185

le Ven 1 Avr 2016 - 20:13

merci :)
avatar
Geci
FémininAge : 26Messages : 66

le Sam 16 Avr 2016 - 20:48

Merci ! ^^ Je cherchais justement pour faire un animation des news comme ça.



avatar
.cranberry
FémininAge : 25Messages : 50

le Lun 18 Avr 2016 - 14:37

Magnifique ♥
avatar
Tatia38
FémininAge : 28Messages : 305

le Lun 18 Avr 2016 - 21:48

sublime merci
avatar
Piratress
FémininAge : 20Messages : 213

le Sam 7 Mai 2016 - 9:26

Merci! <3
avatar
defenrir
MasculinAge : 31Messages : 57

le Mer 11 Mai 2016 - 16:29

merci =)
avatar
Dragonia
FémininAge : 28Messages : 21

le Lun 6 Juin 2016 - 22:19

très sympa ^^
avatar
Nono-Chan
FémininAge : 19Messages : 273

le Mar 7 Juin 2016 - 20:17

Merci !
avatar
Hyuna
FémininAge : 20Messages : 96

le Ven 17 Juin 2016 - 5:48

Merci
avatar
Skyggie
FémininAge : 21Messages : 9

le Mar 21 Juin 2016 - 20:04

Super !
merci du partage (:
avatar
Lust Caution
FémininAge : 23Messages : 79

le Ven 24 Juin 2016 - 14:32

Merci :3
avatar
Marion Navi
FémininAge : 23Messages : 182

le Dim 4 Sep 2016 - 15:50

merci
avatar
Evil Queen 4ever
FémininAge : 25Messages : 54

le Mar 6 Sep 2016 - 1:24

super





avatar
.loumpia
FémininAge : 25Messages : 199

le Sam 10 Sep 2016 - 14:07

:)
avatar
alas
FémininAge : 26Messages : 20

le Ven 16 Sep 2016 - 18:32

Merci du partage !
avatar
Samiro
MasculinAge : 21Messages : 51

le Sam 17 Sep 2016 - 11:32

Merci
avatar
BlueAmethyst
FémininAge : 26Messages : 12

le Sam 29 Oct 2016 - 15:22

Merci, vraiment géniale!
Contenu sponsorisé

  • Poster un nouveau sujet
  • Répondre au sujet

La date/heure actuelle est Jeu 14 Déc 2017 - 5:05