AccueilCalendrierGalerieFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 Faire une belle infobulle rapidement !

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Nathan Slender



Messages : 336
Date d'inscription : 23/03/2012
Age : 19
Localisation : Lyon

Votre perso :
Age des personnages: 22 ans
Dieu: Volonté
Relations:

MessageSujet: Faire une belle infobulle rapidement !   Sam 8 Sep 2012 - 1:24

Créer une infobulle stylée en quelques clics !


Pour les débutants

Pour créer une infobulle sur UBTF, rien de compliqué ! Grâce à Nathan-Slender-le-codeur-fou, les créer sera désormais un jeu d'enfant même si vous n'y connaissez (presque) rien en codage.
Pour exemple, le rendu final devrait ressembler à ça :

Survolez-moi ! (infobulle 1)Ceci est une infobulle très simple à créer et qui a l'avantage d'être assez jolie (comparée aux très laids "abbr" par défaut de HTML).
Survolez-moi ! (infobulle 2)Cette infobulle-ci est légèrement transparente, ce qui lui donne une intégration différente de la précédente.
Survolez-moi ! (infobulle 3)Petite infobulle !

Trois types d'infobulles sont disponibles pour le moment - ce sont les trois types proposés ci-dessus. Pour créer ces trois infobulles, le code est extrêmement simple.
Pour l'infobulle 1 :
Code:
<span class="lieninfobulle">[TEXTE À SÉLECTIONNER]<span class="infobulle1">[TEXTE DE L'INFOBULLE]</span></span>
Pour l'infobulle 2 :
Code:
<span class="lieninfobulle">[TEXTE À SÉLECTIONNER]<span class="infobulle2">[TEXTE DE L'INFOBULLE]</span></span>
Pour l'infobulle 3 :
Code:
<span class="lieninfobulle">[TEXTE À SÉLECTIONNER]<span class="infobulle3">[TEXTE DE L'INFOBULLE]</span></span>
Comme vous pouvez le voir, le code est très simple à retenir et facile d'utilisation ; il suffit de remplacer les parties entre crochets.




Pour les débrouillards

Les débrouillards peuvent modifier les codes des infobulles à l'aide de la propriété style="<code css>".
Il faut savoir utiliser un minimum le langage CSS pour effectuer ce genre de modifications.
Voilà un exemple de ce que cela peut donner :

Survolez-moi !Le texte de l'infobulle et son style graphique sont personnalisés. La largeur est modifiée, car ce n'est pas la largeur standard d'une infobulle transparente.

(bien entendu, le style graphique est plutôt laid, surtout dans le contexte, mais il s'agissait d'un exemple)


Vous pouvez modifier rapidement le code en copiant-collant le suivant :
Code:
<span class="lieninfobulle"><span style="[STYLE DU TEXTE]">[TEXTE À SÉLECTIONNER]</span><span class="infobulle[1|2]" style="[STYLE DE L'INFOBULLE]">[TEXTE DE L'INFOBULLE]</span></span>
Vous pouvez modifier le style du texte à sélectionner (comme par exemple sa couleur avec la propriété color), ainsi que le style de l'infobulle (sa largeur avec l'attribut width, la couleur du texte avec l'attribut color, la couleur de fond avec background-color voire même l'image de fond avec background-image)... En bref, utilisez tout le CSS dont vous auriez besoin, en laissant le code de base s'occuper de l'affichage de l'infobulle !




Une dernière chose

Si vous avez des idées de nouvelles infobulles "par défaut", proposez-les sur ce sujet !

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Faire une belle infobulle rapidement !
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Tuto : peindre son ork à coup de lavis
» La couverture d'un livre peut être jolie mais l'interieur peut souvent cacher une surprise....
» Se faire vite des amis... [PV]
» La belle au bois dormant...
» Une gentille personne pour me faire un bel avatar

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
United by Fate :: Welcome on this forum ! :: • Flood et autre • :: Guide du Débutant-
Sauter vers:  
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit