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.


    Widget flottant

    Partagez
    avatar
    Coriolis
    FémininAge : 27Messages : 288

    le Ven 4 Juin 2010 - 18:37

    Rappel du premier message :

    Créer un Widget flottant

    Le widget flottant, c'est un petit cadre qui se place sur votre page et qui accompagne le visiteur même s'il descend ou remonte sur cette même page. Sa position est fixe, ainsi, peu importe où vous vous situez sur la page il restera présent.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Avant tout chose, il faut créer le widget en lui-même.
    Pour ma part, j'ai choisi de créer une petite fenêtre avec, par exemple, mon partenaire (Never-utopia). Je crée une division, avec son contenu (le contenu ici est donc le logo de N-U, il est possible d'y mettre ce que l'on veut, une navigation, une liste de logo, des avatars, le copyright du forum).

    Code:
    <div class="widget_flottant"><a href="http://www.never-utopia.com" target="_blank"><img src="http://host.image.files.free.fr/host/49abfc8769e6cbouton-nu.png"></a></div>
    Note : la class de la division se nomme \\"widget_flottant\\", c'est elle qui va nous guider pour la suite.

    Placez ce code à la suite de votre page d'accueil (en-tête).
    Chemin sur Forumactif : Panneau d'administration > affichage > généralités.

    À présent le reste du travail concerne uniquement du code css.
    Dans la feuille de style du forum.
    Chemin sur Forumactif : Panneau d'administration > affichage> couleurs > feuille de style

    Il faut commencer par établir la taille de notre wiget.
    Code:
    .widget_flottant
    {
    width: 150px;
    height: 100px;
    }
    Note : Mon widget fera 150pixels de large et 100 de haut.

    Plaçons-le à présent sur la page.
    Attention : lorsqu'on a placé le premier code dans le cadre de l'en-tête, on a, implicitement, choisi de ne faire apparaitre ce widget que sur l'index du forum. Si vous souhaitez l'afficher sur l'intégralité du forum, il est possible de placer le code dans le template qui concerne la bannière du forum, ou encore, le footer.
    Pour placer le widget sur la page, on utilise la position:fixed. Le widget restera présent à l'écran au même endroit même si le visiteur descend ou remonte sur la page.

    Code:
    .widget_flottant
    {
    width: 150px;
    height: 100px;

    position:fixed;
    top: 50px;
    right: 10px;
    }
    Note : "top" signifie que j'ai placé mon widget à 50 pixels du haut de ma page (entre le widget et le haut de page il y aura 50px de marge). "right" signifie que j'ai placé mon widget à 10pixels du bord droit de ma page.

    Testez, vous verrez le widget existe, le widget flotte, mais le widget est encore un peu moche, là, non ? En ajoutant quelques propriétés css vous pourrez améliorer la présentation de ce petit objet. Quelques exemples.
    un couleur de fond, une image de fond avec la propriété background-color ou background-image. Une bordure (border), on peut l'arrondir (-moz-border-radius & cie) etc.


    (sachez que ce tutoriel est ma création et que je l'ai déjà proposé sur d'autres supports d'entraide.)



    C'est cela l'Entre-Monde, le carrefour de la vie et de toutes les possibilités, voyons au delà de la réalité puisque ce monde est irréel.
    avatar
    Kira nagashi
    MasculinAge : 24Messages : 34

    le Ven 22 Avr 2011 - 15:48

    Merci !!
    avatar
    Slem
    FémininAge : 20Messages : 541

    le Dim 24 Avr 2011 - 0:45

    Merci =)



    Sign & Ava by me, don't touch please. (je signe également Yoshi)
    avatar
    Halloween
    FémininAge : 22Messages : 9734

    le Dim 24 Avr 2011 - 18:36

      Tu sais comment faire pour que le widget s'affiche sur toutes les pages ? =O



    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    Lys Draw
    FémininAge : 23Messages : 1992

    le Mar 26 Avr 2011 - 14:19

    Merci! ^^
    J'ai la même question que Halloween... :)

    Edit! J'ai trouvé un moyen d'appliquer ce widget partout... Il suffit de mettre le code donné par Coriolis dans le template "overall_header" (au tout début des codes). Vu que ce template concerne tout le forum quelques soient les pages, le widget s'affichera de même ^^

    Astuce à ajouter dans le premier post?




    Merci Narja pour cette belle sign'! :)
    avatar
    Amelia sullivan
    FémininAge : 23Messages : 380

    le Mar 26 Avr 2011 - 17:13

    Merci
    HBlack
    MasculinAge : 20Messages : 8

    le Jeu 28 Avr 2011 - 16:55

    Merci du totu
    avatar
    Coriolis
    FémininAge : 27Messages : 288

    le Mar 3 Mai 2011 - 2:07

    Cool et si vous lisiez le tuto du début à la fin ?
    L'information y était !

    Ravie d'avoir pu vous aider !



    C'est cela l'Entre-Monde, le carrefour de la vie et de toutes les possibilités, voyons au delà de la réalité puisque ce monde est irréel.
    avatar
    Tutus
    MasculinAge : 20Messages : 2

    le Mar 3 Mai 2011 - 20:00

    Je peux voir stpl ?
    avatar
    Orange Mécanique
    FémininAge : 32Messages : 102

    le Jeu 5 Mai 2011 - 19:19

    Un merci pour voir ce que cela donne Very Happy

    Edit - Comment peut-on placer le widget sur l'extérieur du forum, pas dans le forumline mais dans le fond..? (j'ai cherché et n'ai pas trouvé) (et d'ailleurs le code ne marche pas chez moi, j'ai du faire une bêtise en le plaçant).
    avatar
    Nell-chan
    FémininAge : 24Messages : 12

    le Ven 6 Mai 2011 - 4:15

    Peut-être utile pour plus tard 8D, merci du partage =)
    avatar
    Zidoo
    MasculinAge : 21Messages : 16

    le Ven 6 Mai 2011 - 11:39

    Merci pour le partage ! =3
    avatar
    Mika-chan
    FémininAge : 24Messages : 76

    le Sam 7 Mai 2011 - 13:21

    Merci pour le tuto Very Happy
    avatar
    K-Surf
    MasculinAge : 19Messages : 398

    le Dim 8 Mai 2011 - 11:46

    Merci



    Esto
    MasculinAge : 23Messages : 53

    le Mar 10 Mai 2011 - 17:07

    Voyons :)
    avatar
    alcantara
    FémininAge : 18Messages : 121

    le Mer 11 Mai 2011 - 14:58

    j'essaye sa;)

    edit : niark , je comprends pas tous.. mais j'ai réussis :] mici
    avatar
    Hebihime
    FémininMessages : 201

    le Jeu 12 Mai 2011 - 23:39

    Merci :)
    avatar
    Hypnos
    MasculinAge : 20Messages : 43

    le Dim 15 Mai 2011 - 16:32

    Merci pour le faire apparaitre ?
    Merci !
    Ahh .. Je pensais être plus doué que ça mais non, l'image apparait mais pas le cadre et apparait seulement dans les templates, pas quand je mets le code dans la partie Généralités, là, rien.



    avatar
    Ice Cream
    FémininAge : 19Messages : 22

    le Jeu 19 Mai 2011 - 20:22

    Merci ^^
    avatar
    Aki'
    FémininAge : 20Messages : 250

    le Dim 22 Mai 2011 - 10:08

    Merci pour le tuto
    avatar
    Eibhleen
    FémininAge : 25Messages : 130

    le Lun 23 Mai 2011 - 16:22

    Merci pour ce tuto que je recherchais =)
    avatar
    Anéa
    FémininAge : 27Messages : 156

    le Mar 24 Mai 2011 - 15:09


      Merci pour ce tuto ~



    avatar
    Crunshiii
    FémininAge : 17Messages : 58

    le Mar 24 Mai 2011 - 18:03

    Marchii
    avatar
    Daddoo
    FémininAge : 26Messages : 23

    le Mer 1 Juin 2011 - 23:15

    Merci :)
    avatar
    ShuiLong
    FémininAge : 23Messages : 17

    le Jeu 2 Juin 2011 - 14:49

    Ça fait longtemps que je cherche ce code. Merci bien *-*


    Dernière édition par ShuiLong le Sam 4 Juin 2011 - 19:44, édité 2 fois
    Douce Heure
    FémininAge : 19Messages : 48

    le Jeu 2 Juin 2011 - 14:55

    Un, deux trois moi je veux voir sa ♪
    (Okey je sors (a) )
    Contenu sponsorisé


      La date/heure actuelle est Jeu 30 Mar 2017 - 8:46