AccueilDernières imagesRechercherS'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.

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

    Afficher le lien de dernière réponse sur une seule ligne

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 29 Aoû 2013 - 23:38

    Rappel du premier message :



    Bonjour, bonsoir !

    Dans ce tutoriel très rapide et très simple je vous propose une variante de ce tutoriel rédigé par Taktiik en l'adaptant à un autre changement de mise en forme sur lequel il n'est pas possible d'agir autrement qu'avec du javascript ou, dans le cas présent, du JQuery.
    Il s'agit de l'affichage du lien de dernière réponse, c'est à dire traditionnellement ceci :

    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 381788screen1

    Pour le changer en cela :

    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 692940screen2

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur , et en cas d'utilisation un crédit à Never-Utopia serait sympa Wink.


    Pour l'explication, la variable qui affiche ces informations de dernier message est unique, et il n'est donc pas possible d'en isoler les éléments de date, titre et auteur. Ils se mettent automatiquement à la ligne.
    Nous allons donc simplement utiliser le JQuery, identique à celui de la mise à la ligne des sous-forum, pour changer le code de retour à la ligne (br) en un "rien du tout" x).

    Voici la fameuse variable qui correspond à votre "dernier message" :

    Code:
    {catrow.forumrow.LAST_POST}
    Généralement, cette mise en forme en une ligne sera judicieuse si vous avez modifié le reste, si vous voulez gagner de la place par exemple, ou bien mettre cet élément juste en dessous d'un autre (icône par exemple, ou le titre lui-même, pourquoi pas). Votre élément est donc déjà posé seul quelque part. Voici comment l'afficher.
    Mettez le code suivant :

    Code:
    <div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
    <script type="text/javascript">
    jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');
      </script>
    Une petite explication s'impose :
    1) Votre "bloc" de dernier message pourra être personnalisé en utilisant la class "last_mess", par exemple de la façon suivante :

    Code:
    .last_mess
    {
    background: white;
    padding: 2px;
    border-top: 1px solid grey;
    color: black;
    text-align: center;
    }
    2) L'id "#last" est utilisée uniquement par le JQuery, car on lui dit en gros "identifie l'élément ayant l'id "#last" puis remplace dans cet élément ... (+ la consigne).

    3) Dans mon cas je ne me suis pas contenté de remplacer le "br" par un vide, sinon la date, le titre et l'auteur étaient collés l'un à côté de l'autre, sans espacement. J'ai donc remplacé le "br" (retour à la ligne) par un "span" à qui j'ai directement donné des propriétés css, et qui contient un tiret "-" qui sert de séparation entre les infos.
    Code:
    <span style="display: inline-block; padding: 0 2px;">-</span>
    Vous pouvez remplacer le tiret par autre chose, un symbole, une image... sachez juste qu'il se répètera, puisque présent deux fois : entre le titre et la date, puis la date et l'auteur. Le css est directement à l'intérieur, par l'attribut "style", et dans mon cas il sert à mettre une petite marge de part à d'autre du tiret.

    Voilà, je pense avoir donné toutes les infos nécessaires pour utiliser ce petit code. Amusez-vous bien Wink

    Si vous avez des problèmes avec ce LS, venez poster ici.



    sign
    Choubakawa
    Choubakawa
    MasculinAge : 31Messages : 87

    Ven 14 Fév 2014 - 15:05

    Merci



    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 Witche13
    Aile
    Aile
    FémininAge : 36Messages : 134

    Ven 14 Fév 2014 - 17:21

    C'est original. Merci.



    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 799284Sanstitre1
    Anonymous
    Invité

    Sam 15 Fév 2014 - 15:50

    Merci pour le tuto, c'est utile quand on veut éviter le "bloc" =)
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Lun 3 Mar 2014 - 11:37

    Excellente idée !
    Lakxi
    Lakxi
    FémininAge : 31Messages : 40

    Mar 11 Mar 2014 - 22:54

    thkkkks  :love: 
    Noob's
    Noob's
    MasculinAge : 30Messages : 129

    Mer 12 Mar 2014 - 0:15

    ENFIN TROUVER !!!
    Noob's
    Noob's
    MasculinAge : 30Messages : 129

    Mer 12 Mar 2014 - 0:16

    Merci :)
    avatar
    laurie chloë
    FémininAge : 32Messages : 8

    Mer 12 Mar 2014 - 21:13

    Merci
    Derek Lafleur
    Derek Lafleur
    MasculinAge : 49Messages : 30

    Ven 14 Mar 2014 - 12:37

    merci
    Kaiji
    Kaiji
    FémininAge : 31Messages : 24

    Lun 17 Mar 2014 - 3:45

    Merciiii ♥
    Alec Sing Toa
    Alec Sing Toa
    FémininAge : 32Messages : 75

    Mar 18 Mar 2014 - 14:48

    Très utile ! Merci ^^
    Linoa
    Linoa
    FémininAge : 34Messages : 42

    Mer 19 Mar 2014 - 21:25

    Merci !



    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 Pdsm
    ~ If you come here... You'll find me. I promise ~
    Maiie
    Maiie
    FémininAge : 34Messages : 55

    Dim 23 Mar 2014 - 5:51

    Super merci ! Je recherchais ce tuto !
    Tity
    Tity
    FémininAge : 32Messages : 114

    Mar 25 Mar 2014 - 2:49

    Exactement ce que je cherchais =D Merci
    Náriël
    Náriël
    FémininAge : 45Messages : 22

    Mar 25 Mar 2014 - 21:59

    Merci pour le tuto  Very Happy 
    Spitfire
    Spitfire
    FémininAge : 30Messages : 55

    Jeu 27 Mar 2014 - 3:08

    Oh merci ! ♥
    Jacoon
    Jacoon
    FémininAge : 28Messages : 147

    Jeu 27 Mar 2014 - 17:17

    Merci.
    Imari
    Imari
    FémininAge : 41Messages : 68

    Sam 29 Mar 2014 - 18:51

    Merci bien  Cool 



    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 2mzbax4
    Kathee
    Kathee
    FémininAge : 31Messages : 680

    Mar 1 Avr 2014 - 13:14

    Merci Sparrow ! :3





    Forum dérivé ouat
    dans un univers steampunk :heart:
    xToshi-Shûx
    xToshi-Shûx
    Autre / Ne pas divulguerAge : 33Messages : 39

    Mar 1 Avr 2014 - 15:16

    Merci du partage x)



    Slown
    Slown
    FémininAge : 29Messages : 62

    Mer 2 Avr 2014 - 15:01

    Merci ♥
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 31Messages : 69

    Ven 4 Avr 2014 - 0:10

    Merci pour ce tuto Very Happy



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 78216279872221
    JustDrago
    JustDrago
    FémininAge : 26Messages : 27

    Sam 5 Avr 2014 - 12:51

    Merci Wink
    skaera22
    skaera22
    MasculinAge : 29Messages : 72

    Dim 6 Avr 2014 - 17:59

    merci beaucoup !
    didoum
    didoum
    MasculinAge : 39Messages : 92

    Lun 7 Avr 2014 - 12:17

    Merci pour cette astuce !



    derniers messages sur une ligne - Afficher le lien de dernière réponse sur une seule ligne - Page 3 882883sign
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 6:22