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.

Le deal à ne pas rater :
Pokémon EV8.5 : coffret Collection Classeur Évolutions Prismatiques
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



    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 :

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

    Pour le changer en cela :

    Afficher le lien de dernière réponse sur une seule ligne 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
    SNMitsuki
    SNMitsuki
    FémininAge : 27Messages : 63

    Ven 30 Aoû 2013 - 0:35

    Merci ! >//<



    Afficher le lien de dernière réponse sur une seule ligne 250032Sanstitre1
    Pochi
    Pochi
    FémininAge : 31Messages : 121

    Ven 30 Aoû 2013 - 14:01

    Kioul Very Happy
    Asmareth
    Asmareth
    FémininAge : 37Messages : 123

    Ven 30 Aoû 2013 - 14:27

    Je viens aussi voir comment tu l'as rédigé en Jquery du coup Very Happy:

    Merci :)
    Enko
    Enko
    Age : 35Messages : 56

    Mar 3 Sep 2013 - 4:20

    Merci pour l'astuce Very Happy
    avatar
    PetitFermier
    MasculinAge : 24Messages : 445

    Dim 15 Sep 2013 - 14:31

    Merci Razz
    Tchi
    Tchi
    FémininAge : 32Messages : 40

    Sam 21 Sep 2013 - 15:14

    Mercii !
    Saindsie
    Saindsie
    FémininAge : 28Messages : 12

    Dim 22 Sep 2013 - 14:11

    Merci :3
    Sacagawea
    Sacagawea
    FémininAge : 29Messages : 236

    Ven 27 Sep 2013 - 2:16

    Tres utile en effet ^^ Merci Capt'ain :3
    Irys
    Irys
    FémininAge : 35Messages : 147

    Ven 27 Sep 2013 - 18:36

    Han yeah, c'est un code trop bien ça ! *o* Merci Sparrow ! :3




    Waht is your name?
    pierre31250
    pierre31250
    MasculinAge : 28Messages : 38

    Dim 6 Oct 2013 - 20:55

    Cela est très pratique quand on veut un forum avec un bel esthétique, merci
    Angie1186
    Angie1186
    FémininAge : 38Messages : 5

    Mar 8 Oct 2013 - 17:02

    Merci beaucoup :)
    Mayiie
    Mayiie
    FémininAge : 34Messages : 39

    Lun 14 Oct 2013 - 16:23

    Merci ! Very Happy
    Zatih
    Zatih
    MasculinAge : 34Messages : 19

    Ven 18 Oct 2013 - 2:32

    Ah tiens Oo ça c'est vachement intéressant à avoir sous la main !
    Merci !
    Piinkyuu
    Piinkyuu
    FémininAge : 29Messages : 27

    Ven 18 Oct 2013 - 17:16

    Merci beaucoup !
    neochrome_ltd
    neochrome_ltd
    MasculinAge : 42Messages : 63

    Ven 25 Oct 2013 - 10:26

    Merci
    Ailee
    Ailee
    FémininAge : 28Messages : 32

    Ven 25 Oct 2013 - 15:44

    Merci :)



    Afficher le lien de dernière réponse sur une seule ligne Aileebybolt-3c9cfb1
    Jak SZ
    Jak SZ
    FémininAge : 34Messages : 217

    Dim 27 Oct 2013 - 2:58

    merci <3
    Anonymous
    Invité

    Lun 28 Oct 2013 - 15:26

    Han trop bien ! *o*
    Merci de ton partage Captain' <3
    Chadot
    Chadot
    FémininAge : 36Messages : 248

    Mer 30 Oct 2013 - 9:52

    Thanks joli rendu
    Lilice
    Lilice
    FémininAge : 32Messages : 115

    Mar 5 Nov 2013 - 18:08

    Merci :p
    Solitude
    Solitude
    FémininAge : 49Messages : 294

    Lun 11 Nov 2013 - 18:11

    merci du partage



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Afficher le lien de dernière réponse sur une seule ligne Sign510
    Saraï Smith
    Saraï Smith
    FémininAge : 27Messages : 10

    Jeu 14 Nov 2013 - 20:24

    merci
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Ven 15 Nov 2013 - 18:02

    merci cap'tain o/
    aFlametGirl
    aFlametGirl
    FémininAge : 33Messages : 39

    Sam 16 Nov 2013 - 18:51

    Mercii *-*



    최민호
    Afficher le lien de dernière réponse sur une seule ligne 452404tumblrln2t64RPtJ1qdn2tro15001
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 22:11