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

    Rappel du premier message :

    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
    Capouccino
    FémininAge : 18Messages : 165

    le Mar 20 Aoû 2013 - 6:41

    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 ^^



    "Espérer l'inespérable c'est croire en l'impossible."
    L'Epineuse
    FémininAge : 21Messages : 32

    le Mar 17 Fév 2015 - 10:43

    thanks! <3
    Ombinou
    FémininAge : 21Messages : 104

    le Mer 28 Oct 2015 - 17:48

    Merci beaucoup.
    Sestren
    FémininAge : 24Messages : 30

    le Dim 18 Sep 2016 - 20:05

    Merci pour les tuyaux ! :)
    En ligne
    Kelalin
    FémininAge : 24Messages : 1405

    le Dim 18 Sep 2016 - 23:13

    Merci pour le partage !
    Contenu sponsorisé

    Aujourd'hui à 23:07


      La date/heure actuelle est Jeu 8 Déc 2016 - 23:07