Page 1 sur 3 1 2 3 DernièreDernière
Affichage des résultats 1 à 15 sur 39

Discussion: images d'un prefix au lieu du texte

  1. #1
    Date d'inscription
    August 2004
    Localisation
    vaucluse
    Âge
    56
    Messages
    283
    Version de vBulletin
    4.2
    Hébergeur
    maven
    Pouvoir de réputation
    73

    images d'un prefix au lieu du texte

    bjr, est il possible d'avoir une image(petite) au lieu de texte si je crée un prefixe de type enrichi? car dans l'aide de vb j'ai ceci:
    Ceci est également le titre du préfixe mais vous pouvez utilisé du HTML pour ajouter une mise en forme supplémentaire au titre. Par exemple, vous pouvez rendre un préfixe rouge et gras en utilisant : <span style="color: red"><b>A vendre</b></span> Ca ressemblera à ceci : A vendre.

    Cette version du préfixe sera affichée dans la liste des sujets et dans le sujet en lui-même.
    si oui a quoi devrait ressembler le code?
    Merci

  2. #2
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Ce que tu mets comme proposition, c'est uniquement pour mettre en forme du texte, et non pas pour ajouter une image.
    Toutefois, on peut ajouter une image avec du html de base :
    Code:
    <img src="images/misc/users_online.png" /> <b>Un</b> -
    avec du texte, ce qui donnera : un.jpg

    ou :
    Code:
    <img src="images/misc/users_online.png" /> -
    sans texte, juste un tiret pour séparer l'image du titre, ce qui donnera : sans.jpg

    Si tu ne mets pas de texte, tu as aussi la solution de rajouter tout simplement des icônes de message au lieu d'utiliser les préfixes.
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  3. #3
    Date d'inscription
    August 2004
    Localisation
    vaucluse
    Âge
    56
    Messages
    283
    Version de vBulletin
    4.2
    Hébergeur
    maven
    Pouvoir de réputation
    73
    thanks eve je vais faire un essai

  4. #4
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Hola,

    Ce qui serait dommage avec l'exemple donné, c'est d'invalider son style pour si peu, il faut ajouter l'attribut ALT dans la balise IMG afin de pallier à cela.

    Exemple:
    Code:
    <img src="images/misc/users_online.png" alt="" />
    Bien que cela ne sois utile que si un membre utilise plusieurs styles sur son forum, et désire avoir une image qui sois en rapport avec ce dernier coté couleur, il faudrait voir si dans ce paramètre d'option la variable de stylevar peut-être utiliser, dans cet exemple nous visons le dossier MISC:

    Code:
    <img src="{vb:stylevar imgdir_misc}/users_online.png" alt="" />

  5. #5
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Oui, c'est vrai, j'ai encore oublié le alt="" (qui n'était pas obligatoire quand j'ai commencé à utiliser le html, mais qui l'est devenu depuis pour la validation).
    Et l'idée du stylevar n'est pas mauvaise. Je vais tester si ça fonctionne (les class ne fonctionnent pas, j'ai essayé).

    - - - Mise à jour - - -

    Non, ça ne fonctionne pas : ce n'est pas du html à proprement parler, mais un appel à une fonction php, ce qui n'est pas le lieu.
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  6. #6
    Date d'inscription
    August 2004
    Localisation
    vaucluse
    Âge
    56
    Messages
    283
    Version de vBulletin
    4.2
    Hébergeur
    maven
    Pouvoir de réputation
    73
    merci à vous deux tout fonctionne bien!

  7. #7
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Citation Envoyé par Eve_Ra Voir le message
    Oui, c'est vrai, j'ai encore oublié le alt="" (qui n'était pas obligatoire quand j'ai commencé à utiliser le html, mais qui l'est devenu depuis pour la validation).
    Et l'idée du stylevar n'est pas mauvaise. Je vais tester si ça fonctionne (les class ne fonctionnent pas, j'ai essayé).

    - - - Mise à jour - - -

    Non, ça ne fonctionne pas : ce n'est pas du html à proprement parler, mais un appel à une fonction php, ce qui n'est pas le lieu.
    Hello,

    En faite les class CSS fonctionnent bien dans le champ du texte enrichi, je viens de tester.

    Et vu que le champ n'accepte pas la lecture de la variable, il suffit de rusé, au lieu de mettre une image en HTMl, il suffit de la mettre en fond d'écran en CSS avec l*attribut background.

    Avec quelques peauffinement, c'est aisément réalisable, la variable fonctionne dans les templates CSS, bien entendu il faut en avoir l*intérêt en utilisent plusieurs styles par exemple.

    Bien que le sujet soit résolu, il est toujours bien de pensé aux futurs lecteurs.

  8. #8
    Date d'inscription
    August 2004
    Localisation
    vaucluse
    Âge
    56
    Messages
    283
    Version de vBulletin
    4.2
    Hébergeur
    maven
    Pouvoir de réputation
    73
    tu peux donner le code? j'aimeri tester, merci

  9. #9
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Citation Envoyé par jolinary Voir le message
    En faite les class CSS fonctionnent bien dans le champ du texte enrichi, je viens de tester.
    J''ai testé moi aussi : j'ai dit les class, pas le css lui-même. span style="..." fonctionne très bien, lui, en effet. Quant à span class="...", même définie dans additionnal.css, il ne sait apparemment pas où aller la chercher.

    - - - Mise à jour - - -

    Citation Envoyé par mitch84 Voir le message
    tu peux donner le code? j'aimeri tester, merci
    Pour le code :
    Code:
    <span style="background-image: url(images/misc/users_online.png) no-repeat; height: 16px"> </span>
    Il est préférable de fixer une hauteur, l'image s'affiche plus rapidement.

    - - - Mise à jour - - -

    Décidément, cette foutue image ne s'affiche pas avec span style="..."
    Dernière modification par Eve_Ra ; 19/05/2013 à 11h12.
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  10. #10
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Que ce soit du style, ou des class les deux méthodes sont fonctionnelles, ça ne peu que marcher, ce champ accepte le HTML, donc il est interprété comme tel, et le template additional.css est fonctionnelle sur toutes les pages de vBulletin, c'est d'ailleurs son rôle.

    Pour ce qui est de l'ajout du style dans la partie HTML bien que possible, selon le rendu désiré, il est préférable de passé directement par une class, pour trois raisons, la première travaillé plus aisément son CSS, la deuxième pour la possibilité d'utiliser les stylevar qui dans ce cas est impossible dans le champ directement, car ce champ n'accepte que le HTML et que ce type de variable n'est pas reconnue, tout du moins par défaut sur cette option, et enfin la troisième raison qui est la plus importante dans certains cas, car certains champs sont limité en nombre de caractère, donc afin d'éviter trop de caractères, on utilise une class simple, les templates n'étant pas limité en caractères, on bénéficie de toute notre imagination pour stylisé ce préfixe.

    On commence par paramétrer le champs du texte enrichi, par la partie HTML, dans mon exemple mon préfixe est le préfixe "Résolu !", afin qu'il soit plus visible, par rapport au reste du texte (titre du sujet), je vais le mettre en vert, en rapport avec l'image que je vais ajoutée juste devant le texte, je vais aussi peaufiner ma class afin d'avoir un rendu convenable visuellement.

    Voici la partie HTML de mon exemple:

    Code:
    <span class="resolu">Résolu !</span>
    Rien de bien sorcier jusqu'à présent, maintenant passons sur la partie CSS, en ajoutent dans le template additional.css la class nommée "resolu", que voici (tout est commenter pour facilité la compréhension des débutant):

    Code:
    .breadcrumb .navbit.lastnavbit span .resolu, .resolu {
    background: transparent url({vb:stylevar imgdir_misc}/ok.png) no-repeat 0 50%; /* image de mon préfixe résolu ! avec son positionnement, ici centré verticalement, et totalement à gauche de la balise SPAN*/
    padding: 0 2px 0 12px; /* positionnement de mon préfixe et de ce qu'il l*entoure par rapport à mon image, ici 2px à droite pour espacé le titre, et 12px à gauche pour le positionnement de mon préfixe en texte par rapport à mon image */
    color: #9BC55A; /* couleur du texte de mon préfixe, dans ce cas en rapport à la couleur de mon image */
    display: inline-block; /* inline-block pour éviter tout saut de ligne du titre, peut-être remplacé par un float:left*/
    }
    La valeur en noir et gras, pointe le dossier MISC du style visé par cette class, on place donc notre image, qui dans mon exemple fait 10x10 (px), si on désire avoir une image à droite au lieu de la gauche, on change la valeur en vert et gras, par un "100% 50%" (sans les guillemets), sans oublier de remplacer la valeur en rouge et gras par cela "0 12px 0 2px", et voila on à ce qu'on désire et le style modifiable rapidement, et adaptable rapidement à tous les style avec leurs propres couleur de texte et image. La valeur en orange est le nom de la class visant ce préfixe "Résolu !".

    Si l'image est plus grosse, ce que je déconseille afin d'avoir un rendu propre, il suffit de modifier les valeurs haute et basse du padding, et voir ajouter par un line-height par exemple, il est possible qu'il faille modifié dans élément par contre, pour un meilleur ajustement.

    Voici deux capture, une avec l'image à gauche, l'autre avec l'image à droite.

    Image à gauche:
    19-05-2013_01.png

    Image à droite:
    19-05-2013_02.png

    Bien entendu, il est possible de stylisé de façon plus poussé le texte, avec le CCS3.

    Bonne installation.

    - - - Mise à jour - - -

    J'ai édité ma réponse précédente, car j'avais pas remarquer que sur certaines pages, le préfixe était déjà inclus dans une balise SPAN, et utilisant une balise P, cela n'était pas correct pour les normes actuelles du W3C, je l'ai donc remplacé par une SPAN, cela m'a aussi permis de voir que dans la page Showthread, la class n'était pas interprété convenablement, car une autre class prenait l*ascendant dessus, j'ai donc ajouté au nom de la class "resolu" un chemin de class pointent précisément sur la class "resolu".
    Dernière modification par jolinary ; 19/05/2013 à 17h13.

  11. #11
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Evidemment, je m'acharnais à mettre background-image et non simplement background...
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  12. #12
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Oui l'attribut background-image n'attend que le chemin de la class, il est détaillé dans certains cas, entre autre pour les sprites, après seule le background-position est utilisé, dans ton cas, il aurait fallut indiquer d'autres attributs, comme le background position, on utilise donc que l'attribut background, pour inclure toutes les valeurs le définissent .

  13. #13
    Date d'inscription
    August 2004
    Localisation
    vaucluse
    Âge
    56
    Messages
    283
    Version de vBulletin
    4.2
    Hébergeur
    maven
    Pouvoir de réputation
    73
    pour l'instant je fais apparaitre mon image de la facon suivante
    <img src="images/statusicon/fermé.png" alt="" /> -
    mais dans mon acp l'image n'apparait pas, car pour l'instant j'en ai 4, un peu difficile a gérer car a part les éditer un après l'autre, impossible de savoir lequel sait.

    8717937_prefix.jpg
    si j'utilise le système de class donné plus haut, les images de prefix apparaitront dans mon acp?
    merci
    Dernière modification par Eve_Ra ; 20/05/2013 à 18h14. Motif: Modification de l'image

  14. #14
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Non, les images ne peuvent pas apparaître dans l'acp, car l'url est relative à la homepage du forum, et n'est plus valide pour l'acp qui est au niveau inférieur (forum/admincp/).

    - - - Mise à jour - - -

    Bouhhh.... tes images, tu pourrais les stocker ailleurs que sur un site de pubs pornos
    Puisque tu as un hébergement, tu pourrais les mettre sur ton propre serveur.
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  15. #15
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Citation Envoyé par mitch84 Voir le message
    pour l'instant je fais apparaitre mon image de la facon suivante
    mais dans mon acp l'image n'apparait pas, car pour l'instant j'en ai 4, un peu difficile a gérer car a part les éditer un après l'autre, impossible de savoir lequel sait.

    si j'utilise le système de class donné plus haut, les images de prefix apparaitront dans mon acp?
    merci
    Salut,

    Non peu importe la méthode que tu utiliseras, tu ne verras pas les modifications apportées en CSS ou en HTML, et cela n'a rien à voir avec le fait que l'url soit en relative ou absolute, c'est car le champ dans le gestionnaire des préfixes est celui du texte simple et non pas celui du texte enrichi, voila pourquoi.

    Par contre à long terme et ou pour de multiples préfixes, il est plus aisé de travaillé via des templates CSS, que de devoir éditer un par un les différents préfixes.
    Dernière modification par Eve_Ra ; 20/05/2013 à 18h07.

Informations de la discussion

Utilisateur(s) sur cette discussion

Il y a actuellement 1 utilisateur(s) naviguant sur cette discussion. (0 utilisateur(s) et 1 invité(s))

Les tags pour cette discussion

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •