Tutorial Icone FA devant les Prefix de discussions

Discussion dans 'Modifications de templates' créé par Sι∂яα∂ι, 19 Octobre 2016.

  1. Sι∂яα∂ι

    Sι∂яα∂ι Administrateur

    Inscrit:
    25 Juin 2014
    Messages:
    25 417
    J'aime reçus:
    112 896
    Points:
    13 043
    Salut communauté iHaxForum

    Ce tutoriel vous permet d'ajouter une icone FontAwesome aux préfixe de discussion.
    Ce tutoriel vient comme une alternative à la solution précédente qui est pas suffisamment optimisée : https://ihaxforum.com/threads/ajouter-des-icones-fontawesome-aux-prefixes-de-discussions.5360/

    Le résultat est identique :

    upload_2016-10-2_18-32-4.png

    Voici les instructions :

    Etape 1 :

    Tout d'abord il faut s'assurer d'avoir ajouter le CSS FontAwesome :
    Dans le template page_container_js_head, Chercher ceci :
    Code:
    <!--XenForo_Require:JS-->
    Ajoutez en dessous de ceci, Cela:
    Code:
    <link rel="stylesheet" href="
    https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    Etape 2:

    Dans le template EXTRA.CSS ajouter :

    Contenu caché:
    Vous devez d'abord répondre au sujet pour pouvoir consulter les données cachées contenues ici.

    Etape 3 :

    Sur l'adminCP, cliquer sur l'onglet : Applications
    Sur la barre latérale gauche cliquez sur "Préfixes de discussions"
    Puis cliquez sur : + Créer un nouveau préfixe de discussion
    Titre : vous définissez le titre, exemple : Tutorial
    Afficher l'effet de style : cocher :
    • Autre, utilisation personnalisé du nom de la class CSS:
    Puis dans le champs de saisi, vous allez définir la classe CSS du préfixe qu'on vient de créer.
    Exemple :
    Contenu caché:
    Vous devez d'abord répondre au sujet pour pouvoir consulter les données cachées contenues ici.
    La liste des class CSS pour les prefix est presente dans le template : thread_prefixes.css Soit :
    Contenu caché:
    Vous devez d'abord répondre au sujet pour pouvoir consulter les données cachées contenues ici.
    Voici la liste complète des icônes FA : http://fontawesome.io/icons/

    Résultat :

    upload_2016-10-19_23-42-41.png
    upload_2016-10-19_23-41-59.png

    Ce tutoriel touche à sa fin ;)
     
    Dernière édition: 20 Février 2021
  2. SyTry

    SyTry Ancien Staff Membre

    Inscrit:
    13 Octobre 2015
    Messages:
    789
    J'aime reçus:
    3 576
    Points:
    3 793
    Ah cool merci je l'attendais!
     
  3. ℓ๏я€ɲƶ๏

    ℓ๏я€ɲƶ๏ Membre

    Inscrit:
    17 Avril 2016
    Messages:
    308
    J'aime reçus:
    155
    Points:
    1 693
    Merci, Pas besoin de cocher la css, on peut mettre directement les codes
    dans extra.css.
    Moi j'ai toujours fait comme sa ;)
     
    Dernière édition par un modérateur: 20 Octobre 2016
  4. Benjilol

    Benjilol Membre

    Inscrit:
    14 Juillet 2016
    Messages:
    29
    J'aime reçus:
    1
    Points:
    1 293
    Merci pour le Tuto
     
  5. ER280652

    ER280652 Membre

    Inscrit:
    6 Octobre 2016
    Messages:
    56
    J'aime reçus:
    29
    Points:
    603
    merci pour le tutoriel :) man !)
     
  6. TirOFlanK

    TirOFlanK Membre

    Inscrit:
    6 Octobre 2016
    Messages:
    37
    J'aime reçus:
    0
    Points:
    531
    merci pour le tutoriel :) man !)
     
  7. lutilisateurlibre

    lutilisateurlibre Membre

    Inscrit:
    17 Août 2016
    Messages:
    65
    J'aime reçus:
    3
    Points:
    2 318
    merci pour le tutoriel
     
  8. EliteModz

    EliteModz Membre

    Inscrit:
    21 Octobre 2016
    Messages:
    103
    J'aime reçus:
    2
    Points:
    588
    thank you bro:::::::::
     
  9. EliteModz

    EliteModz Membre

    Inscrit:
    21 Octobre 2016
    Messages:
    103
    J'aime reçus:
    2
    Points:
    588
  10. Maweyy

    Maweyy Membre

    Inscrit:
    15 Juillet 2015
    Messages:
    41
    J'aime reçus:
    1
    Points:
    1 281
    Ah merci sa amène tu styles :)
     
  11. slownls

    slownls Membre

    Inscrit:
    11 Mars 2016
    Messages:
    28
    J'aime reçus:
    2
    Points:
    1 291
    merci pour le tuto
     
  12. Laiorm

    Laiorm Membre

    Inscrit:
    4 Novembre 2016
    Messages:
    13
    J'aime reçus:
    0
    Points:
    521
    Sympa ;) Je cherchai la soluce depuis un bout de temps

    EDIT : Je ne voit pas la couleur de fond ( prefixOrange ) comment je peut résoudre cela ?
     
    Dernière édition par un modérateur: 4 Novembre 2016
  13. wil972

    wil972 Membre

    Inscrit:
    12 Novembre 2016
    Messages:
    3
    J'aime reçus:
    0
    Points:
    521
    Je vais de ce pâs ajouter les CSS. Mais quand j'ai mit le green, sa reste transparent
     
    Dernière édition par un modérateur: 12 Novembre 2016
  14. kalashnikov

    kalashnikov Membre

    Inscrit:
    11 Novembre 2016
    Messages:
    27
    J'aime reçus:
    0
    Points:
    1 383
    Merci beaucoup ! :DDD
     
  15. Viisp

    Viisp Membre

    Inscrit:
    13 Novembre 2016
    Messages:
    51
    J'aime reçus:
    0
    Points:
    2 306
    Oui je cherchais ça merci
     
  16. armaan ali

    armaan ali Membre

    Inscrit:
    15 Septembre 2016
    Messages:
    64
    J'aime reçus:
    0
    Points:
    2 306
    Thanxxxxxxxxxxxxx broooo
     
  17. lapinduperou

    lapinduperou Membre

    Inscrit:
    5 Novembre 2016
    Messages:
    43
    J'aime reçus:
    0
    Points:
    531
    merci bcp mec !!!
     
  18. Walabise

    Walabise Membre

    Inscrit:
    19 Novembre 2016
    Messages:
    2
    J'aime reçus:
    0
    Points:
    521
    Merci c'est gentil :)
     
  19. Stevie76

    Stevie76 Membre

    Inscrit:
    17 Novembre 2016
    Messages:
    44
    J'aime reçus:
    0
    Points:
    531
    Merci pour le tuto =)
     
  20. Darkside21

    Darkside21 Membre

    Inscrit:
    22 Novembre 2016
    Messages:
    16
    J'aime reçus:
    0
    Points:
    531
    merci tres clair tres simple
     

Partager cette page

  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice