AccueilFAQRechercherMembresGroupesS'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.


    Astuces CSS des forums FA

    Partagez
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Sam 23 Aoû 2008 - 15:50

    Coucou.
    Je posterais ici plusieurs astuces concernant la modification de la feuille de style CSS des forums de chez Forum-Actif.
    Je vais vous dire d'ores et déjà comment y accèder, je n'y reviendrais pas à chaque fois ^^

    Dans votre Panneau d'Administration > Onglet Affichage > Couleurs (sur l'index de gauche) > Onglet Feuille de Style CSS.





    Positionnement du cadre principal du forum


    Pour aujourd'hui je vous propose une astuce qui vous sera certainement utile si vous optez pour un design de type site internet avec une bannière qui s'affiche dès le haut de page de votre forum.
    Il faut donc supprimer l'espace qui se trouve tout en haut, entre le cadre principal de votre forum et le haut de page :
    Spoiler:

    Pour cela il vous suffit de coller le morceau de code suivant dans votre feuille de style CSS
    Code:
    table.bodylinewidth
    {
    position: relative;
    top: -9px;
    }

    Explication du code :
    Ligne 1 : le nom de la classe que l'on va modifier. Elle se trouve dans les templates, elle désigne le cadre principal contenant tout le forum.
    Ligne 2 : initialise les modifications apportée à la classe
    Ligne 3 : positionnement de la classe, relativement à la position naturelle de celle-ci (un peu pompeux je l'avoue). Si vous remplacez relative par absolute, le positionnement se fera depuis le coin supérieur gauche de votre écran... je vous le déconseille Razz
    Ligne 4 : positionnement depuis le haut de la page. Soit un recule de 9 px ici. On aurait pu écrire aussi bottom: 9px;
    Ligne 5 : fin des modifications apportées à la classe.

    Vous pouvais régler le nombre de pixels en fonction de vos besoins.
    Au plaisir Wink

    Retirer le soulignement d'un lien / Retirer la ligne sous la navig (phpbb3)

    proposé par Okhmhaka

    Les Lettres se détachent au passage de la souris :

    Code:
    a:hover{
    letter-spacing : 2px; }


    Pour les forums en version 3, si vous souhaitez retirer la bordure sous le menu (le trait passant sous la navig'), rajoutez ces lignes dans le CSS:

    Code:
    ul.navlinks { border: none; }

    Rectifier le positionnement du cadre principal de forum

    proposé par Shinomix

    Vous pouvez supprimer la marge en bas à place de celle du haut à l'aide de ce code :


    Code:
    table.bodylinewidth
    {
    position: relative;
    bottom: -9px;
    }


    Ou bien déplacer le cadre principal du nombre de pixel de votre choix sur la gauche ou la droite !


    Code:
    table.bodylinewidth
    {
    position: relative;
    left ou right: -[le nombre de pixel de votre choix]px;
    }


    Je sais que c'est pas grand chose, c'est juste pour compléter Razz
    Cordialement,
    S.


    Décorer vos liens


    Voici les décorations que vous pouvez attribuer par exemple au survole d'un lien sur votre forum :

    Code:
    a:hover {text-decoration: underline overline;}
    Lien survolé

    Code:
    a:hover {text-decoration: blink;}
    Lien survolé

    Code:
    a:hover {background-color: white;}
    Lien survolé

    Code:
    a:hover {background-image: url('http://illiweb.com/fa/subsilver/icon_gender_male.gif');}
    (j'ai mis l'image du genre Mâle pour forum actif, mais c'est juste pour l'exemple)
    Lien survolé

    Voilà pour les quelques exemples ^^

    Décorer vos liens II


    Je continue avec l'ajout d'une seule astuce... mais on va dire que j'ai découvert cela il n'y a pas longtemps...
    Ben ouais j'en apprends encore XD non mais oh !

    Code:
    a:hover:before { content: ">>"; }
    Lien normal
    >>Lien survolé

    Code:
    a:hover:after { content: ">>"; }
    Lien normal
    Lien survolé>>


    Alors celui qui veut faire le malin peut faire ça :
    Code:
    a:before { content: "<<"; }
    a:after { content: ">>"; }

    a:hover:before { content: ">>"; }
    a:hover:after { content: "<<"; }

    << Lien normal >>
    >> Lien survolé <<

    Vous allez me dire que ça ne set à rien !
    Ben moi je trouve ça très puissant au contraire. Vous pouvez même placer une image avec ce système en utilisant url('image.jpg')

    Enfin bref... amusez-vous bien Wink

    Pointillés autour d'un lien ou lien/image


    Quand vous cliquez sur un lien, que ce soit une image ou un lien textuel, il vous arrive souvent d'avoir un encadré en pointillés que certains veulent supprimer...

    Il vous suffit d'utiliser ce bout de code dans votre CSS :
    Code:
    a
    {outline: none;}

    Ceux qui veulent uniquement enlever ça pour les liens/images :
    Code:
    a img
    {outline: none;}

    Voiloù Wink

    Retirer le sous-lignement des liens

    proposé par MoiSadike

    Je sais pas si c'est déjà mis mais voilà un code pour ne plus avoir de soulignement sous les liens:

    Code:
    a
    {
    text-decoration: none !important;
    }
    a:hover{
        text-decoration: none !important;
    }
    Le !important est important, faut pas l'enlever ça donne la consigne que le code passe avant celui du CSS de base du forum ^^


    Dernière édition par Riku Asakura le Jeu 18 Juin 2009 - 2:15, édité 9 fois




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Kano
    Age : 21Messages : 1288

    le Sam 23 Aoû 2008 - 15:56

    Merci Riku ^^



    The World

    Zayl
    MasculinAge : 28Messages : 5311

    le Mar 26 Aoû 2008 - 10:33

    Pas mal, thanks Riku =D
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Mer 27 Aoû 2008 - 22:58

    Je vous en prie les loups Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Dim 31 Aoû 2008 - 10:48

    J'ajoute des codes :

    Les Lettres se détachent au passage de la souris :

    Code:
    a:hover{
    letter-spacing : 2px; }


    Pour les forums en version 3, si vous souhaitez retirer la bordure sous le menu (le trait passant sous la navig'), rajoutez ces lignes dans le CSS:

    Code:
    ul.navlinks { border: none; }



    Shinomix
    MasculinAge : 23Messages : 3445

    le Dim 31 Aoû 2008 - 15:07

    Plop !
    De la même façon que Riku, vous pouvez supprimer la marge en bas à place de celle du haut à l'aide de ce code :

    Code:
    table.bodylinewidth
    {
    position: relative;
    bottom: -9px;
    }

    Ou bien déplacer le cadre principal du nombre de pixel de votre choix sur la gauche ou la droite !

    Code:
    table.bodylinewidth
    {
    position: relative;
    left ou right: -[le nombre de pixel de votre choix]px;
    }

    Je sais que c'est pas grand chose, c'est juste pour compléter Razz
    Cordialement,
    S.



    Shinomix
    MasculinAge : 23Messages : 3445

    le Dim 31 Aoû 2008 - 15:20

    Désolé du double poste, j'ai trouvé un code pour les suicidaires ^^

    A poster toujours dans la feuille de style css !

    Code:
    Kikouland.

    Ne le postez qu'à vous risques et périls (il vaut mieux toujours avoir son panneau d'administration d'ouvert à côté ^^)
    Je le met ici en attendant que quelqu'un d'autre que moi trouve à quoi il sert ! (n'est-ce pas Py' et Riku ^^)
    Cordialement,
    S.


    Edit Zayl : T'as pas des trucs plus idiots à poster ? & Le newbie qui ferme son panneau et qui ne connait rien à Forumactif, il fait comment après grand malin?
    >.<

    Edit Shin
    : C'est pas faute d'avoir prévenu de garder un onglet avec le panneau d'ouvert xD


    Dernière édition par shinomix le Lun 1 Sep 2008 - 9:48, édité 3 fois (Raison : Contenu du code.)



    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Mer 17 Sep 2008 - 22:59

    Voici les décorations que vous pouvez attribuer par exemple au survole d'un lien sur votre forum :

    Code:
    a:hover {text-decoration: underline overline;}
    Lien survolé

    Code:
    a:hover {text-decoration: blink;}
    Lien survolé

    Code:
    a:hover {background-color: white;}
    Lien survolé

    Code:
    a:hover {background-image: url('http://illiweb.com/fa/subsilver/icon_gender_male.gif');}
    (j'ai mis l'image du genre Mâle pour forum actif, mais c'est juste pour l'exemple)
    Lien survolé

    Voilà pour les quelques exemples ^^




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Lun 29 Sep 2008 - 1:56

    Je continue avec l'ajout d'une seule astuce... mais on va dire que j'ai découvert cela il n'y a pas longtemps...
    Ben ouais j'en apprends encore XD non mais oh !

    Code:
    a:hover:before { content: ">>"; }
    Lien normal
    >>Lien survolé

    Code:
    a:hover:after { content: ">>"; }
    Lien normal
    Lien survolé>>


    Alors celui qui veut faire le malin peut faire ça :
    Code:
    a:before { content: "<<"; }
    a:after { content: ">>"; }

    a:hover:before { content: ">>"; }
    a:hover:after { content: "<<"; }

    << Lien normal >>
    >> Lien survolé <<

    Vous allez me dire que ça ne set à rien !
    Ben moi je trouve ça très puissant au contraire. Vous pouvez même placer une image avec ce système en utilisant url('image.jpg')

    Enfin bref... amusez-vous bien Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 29 Sep 2008 - 17:55

    Merci ! Les possibilités sont diverses en effet et peuvent avoir de bon rendus^^
    Absolut-13
    MasculinAge : 23Messages : 1202

    le Sam 4 Oct 2008 - 17:30

    @shinomix a écrit:Désolé du double poste, j'ai trouvé un code pour les suicidaires ^^

    A poster toujours dans la feuille de style css !

    Code:
    Kikouland.

    Ne le postez qu'à vous risques et périls (il vaut mieux toujours avoir son panneau d'administration d'ouvert à côté ^^)
    Je le met ici en attendant que quelqu'un d'autre que moi trouve à quoi il sert ! (n'est-ce pas Py' et Riku ^^)
    Cordialement,
    S.


    Edit Zayl : T'as pas des trucs plus idiots à poster ? & Le newbie qui ferme son panneau et qui ne connait rien à Forumactif, il fait comment après grand malin?
    >.<

    Edit Shin
    : C'est pas faute d'avoir prévenu de garder un onglet avec le panneau d'ouvert xD
    Sa fait quoi exactement ?






    Tout désert à ses mystères...

    La fleur des fleurs est le bourgeon de la fleur du cerisier, je ne suis qu'un homme parmi tant d'autres...

    Shinomix
    MasculinAge : 23Messages : 3445

    le Sam 4 Oct 2008 - 17:51

    Abso >>c'était un code... spécial dirons-nous xD
    Mais Zayl a pas aimé le second degré et à remplacé le code par son fameux Kikouland ^^



    Absolut-13
    MasculinAge : 23Messages : 1202

    le Sam 11 Oct 2008 - 18:24

    @shinomix a écrit:Abso >>c'était un code... spécial dirons-nous xD
    Mais Zayl a pas aimé le second degré et à remplacé le code par son fameux Kikouland ^^
    Et ce code faisait quoi de spécial ? ^^






    Tout désert à ses mystères...

    La fleur des fleurs est le bourgeon de la fleur du cerisier, je ne suis qu'un homme parmi tant d'autres...

    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Dim 12 Oct 2008 - 22:43

    Certainement un visibility hidden ou un truc dans ce genre...
    Cela devait briquer le forum pour que Zayl l'enlève XD




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Jeu 16 Oct 2008 - 16:37

    Quand vous cliquez sur un lien, que ce soit une image ou un lien textuel, il vous arrive souvent d'avoir un encadré en pointillés que certains veulent supprimer...

    Il vous suffit d'utiliser ce bout de code dans votre CSS :
    Code:
    a
    {outline: none;}

    Ceux qui veulent uniquement enlever ça pour les liens/images :
    Code:
    a img
    {outline: none;}

    Voiloù Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Shigeru
    MasculinAge : 22Messages : 1497

    le Sam 24 Oct 2009 - 21:39

    Code:
    a:hover {text-decoration: underline overline;}

    J'arrive pas à installer ce code =S



    Angel Kusanagi
    FémininAge : 25Messages : 30

    le Sam 9 Jan 2010 - 21:57

    @Shinomix a écrit:Plop !
    De la même façon que Riku, vous pouvez supprimer la marge en bas à place de celle du haut à l'aide de ce code :

    Code:
    table.bodylinewidth
    {
    position: relative;
    bottom: -9px;
    }

    Ou bien déplacer le cadre principal du nombre de pixel de votre choix sur la gauche ou la droite !

    Code:
    table.bodylinewidth
    {
    position: relative;
    left ou right: -[le nombre de pixel de votre choix]px;
    }

    Je sais que c'est pas grand chose, c'est juste pour compléter Razz
    Cordialement,
    S.

    Je souhaitais positionner mon forum plus
    vers la droite : j'ai longtemps cherché et
    j'ai enfin ma solution!

    Merci x99999999999999999... lol ^^



    Sandra2912
    FémininAge : 37Messages : 23

    le Sam 21 Jan 2012 - 0:59

    Merci
    Malizia.
    FémininAge : 20Messages : 78

    le Mer 1 Fév 2012 - 3:04

    Merci Very Happy

    mainy
    FémininAge : 28Messages : 30

    le Lun 20 Fév 2012 - 13:40

    Merci pour toutes ces astuces extra !

    Par contre le code de Riku pour enlever la marge du haut ne marche pas chez moi, je suis sous phbb3, ça vient peut-être de là ?
    kawaiitropic.
    FémininAge : 21Messages : 28

    le Lun 27 Fév 2012 - 10:07

    Merci pour ces codes !
    Gangea971
    MasculinAge : 23Messages : 87

    le Mer 25 Avr 2012 - 17:14

    Merci beaucoup pour les codes
    Enelos
    FémininAge : 24Messages : 34

    le Dim 5 Aoû 2012 - 13:25

    Pas mal, pas mal. Very Happy
    darkhero246
    MasculinAge : 24Messages : 177

    le Jeu 9 Aoû 2012 - 23:17

    Merci beaucoup j'étais trop en galère pour comprendre certains codes CSS Very Happy
    Cyllan
    FémininAge : 26Messages : 166

    le Dim 17 Fév 2013 - 10:17

    Merci infiniment pour ces astuces <3



    Contenu sponsorisé

    Aujourd'hui à 21:24


      La date/heure actuelle est Sam 10 Déc 2016 - 21:24