Page 1 sur 2 1 2 DernièreDernière
Affichage des résultats 1 à 15 sur 21

Discussion: Comment modifier l'arriere plan du forumhead?

  1. #1
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41

    Question Comment modifier l'arriere plan du forumhead?

    Bonjour,
    J'ai changé l'arrière plan du forumhead, mais je suis obligé d'avoir une image longue (en x) pour éviter les problème d'affichage quand la résolution d'un écran est grande.
    est-il possible d'ajouter une DIV pour avoir un fond qui se prolonge, comme on faisais avec les tableaux?


    J'aimerai savoir aussi si possible d'ajouter un arrière plan en haut à droite et en bas comme montrer dans la capture d'écran:

    Merci

    ---------------------- modification ------------------
    J'ai fait un petit test avec les CSS et voile ce que j'aimerai bien avoir:
    Dernière modification par Faouweb ; 20/12/2014 à 16h17.
    Practice makes perfect

  2. #2
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Hello,

    Inutile d'avoir une image longue pour couvrir la totalité de la zone horizontale même avec différentes résolution, un peu de CSS et le tour est jouer, depuis CSS3 on peu utiliser du multi background, il suffit juste d'avoir 3 images dans ton cas pour s'en sortir, sans rien touché au HTML.

    Voici un exemple concret: http://www.css3.info/preview/multiple-backgrounds/.

    En gros il y a l'image centrale qui fera quelque millimètres et qui sera répétée (repeat-x), et une à droite et l'autre à gauche.

    Pour la partie basse, tu as la solution en CSS aussi, même si aucuns conteneur est en place, il faut juste cette fois utiliser les pseudo élément before ou after.

    Si tu as tes trois images je peux regarder ça sur le style par défaut.

  3. #3
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41

    Bon

    Bonsoir jolinary
    Voici les 3 images.
    Merci pour le lien je vais le lire maintenant
    Images attachées Images attachées
    Practice makes perfect

  4. #4
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Il faut aussi celles du bas, donc trois de plus .

    Tes pj sont en attentent de modération, donc je patiente.

  5. #5
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41
    Très intéressante cette nouvelle méthode, j'ai fait un petit essai mais je n'arrive pas à faire répéter l'image du milieu en X.
    http://oi57.tinypic.com/ngzhn6.jpg

    - - - Mise à jour - - -

    Voici encore plus facile j'ai créer un nouveau dossier avec tous dedans
    http://faouweb.net/vb-fr/New%20folder/
    Voici le test:
    http://faouweb.net/vb-fr/New%20folder/page-3.html

    - - - Mise à jour - - -

    ok je ne suis pas loin
    http://faouweb.net/vb-fr/New%20folder/page-3.html
    sauf que l'image bas-droite ne s'affiche pas
    Practice makes perfect

  6. #6
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Dans l'attribut background-repeat, tu dois tout comme pour les images avoir trois valeur, donc exemple:

    background-repeat: no-repeat, no-repeat, repeat-x;

  7. #7
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41
    OK j'ai réussis à le faire
    http://faouweb.net/vb-fr/New%20folder/page-3.html
    Il y a 2 semaines je me suis cassé la tête avec les div et les float ... alors qu'ici c'est tous simple et facile à comprendre

    Maintenant comment je peux faire pour utiliser ces images comme arrière plan pour le forumhead, je croix que ça va être un peu compliquer
    Practice makes perfect

  8. #8
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Voici un exemple, par ocntre vu la conception du style par défaut de vb4, j'ai dû ajouter une DIV sur les templates visants les forum, rien de bien méchant, le reste n'est que des modifications CSS: http://prntscr.com/5j2uq6.

    Sur ton dernier exemple, il faut pas oublié d'ajouter ou comme sur vb4 augmenter les arrondis des conteneur en ajoutent ou modifiant les border-radius.

  9. #9
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41
    Citation Envoyé par Eve_Ra Voir le message
    Vous vous débrouillez bien, vous deux ! Il va falloir que je vois le CSS3 de près, moi, j'en étais encore au CSS2
    J'ai commencé à apprendre CSS il y a quelques semaines, c'est pas mal
    -------------------------
    J'ai essayé sur un forum de teste, j'ai réussis à avoir le top mais pas celui du bas , j'ai vu que ça ne fonctionne avec IE8, je vais le garder pour le moment comme il est, sauf que j'aimerai bien avoir le fond du bas, comment puis-le faire?

    Pour celui d*en haut voila comment j'ai fait, je ne sais pas si c'est la bonne méthode
    Dans FORUMDISPLAY j'ai ajouter ce code:
    Code HTML:
    <div class="[B][COLOR="#FF0000"]test1[/COLOR][/B]">   <!--test nouveau fond-->
                <h2>
                    <span class="forumtitle">{vb:rawphrase subforums}</span>
                    <span class="forumlastpost">{vb:rawphrase last_post}</span>
                                    <span class="forumthreadpost">{vb:rawphrase threads}&nbsp;</span>
                                    <span class="forumthreadpost">{vb:rawphrase posts}&nbsp;</span>
                </h2>
        </div>
    </div> <!--test nouveau fond-->
    Et puis dans forumbits.css
    Code HTML:
    .forumhead {
        /*background: {vb:stylevar forumhead_background};*/
    background: url("images/SeamusLight/gradients/gauche.png") no-repeat scroll left top, url("images/SeamusLight/gradients/droite.png") no-repeat scroll right top, url("images/SeamusLight/gradients/milieu.png") repeat-x scroll center top, url("images/SeamusLight/gradients/bl.png") no-repeat scroll left bottom, url("images/SeamusLight/gradients/br.png") no-repeat scroll right bottom, url("images/SeamusLight/gradients/bm.png") repeat-x scroll center bottom rgba(0, 0, 0, 0);
        _background-image: none;
        padding: 0;
        font:{vb:stylevar forumhead_font};
        color:{vb:stylevar forumhead_color};
        clear:both;
        margin-top: 8px;
        float: {vb:stylevar left};
        /*border: {vb:stylevar forumhead_border};*/
        width: 100%;
            height: 27px;
        -moz-border-radius-top{vb:stylevar right}: {vb:stylevar forumhead_top_corner_radius};
        -moz-border-radius-top{vb:stylevar left}: {vb:stylevar forumhead_top_corner_radius};
        /*-webkit-border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
        -webkit-border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};
        border-top-{vb:stylevar right}-radius: {vb:stylevar forumhead_top_corner_radius};
        border-top-{vb:stylevar left}-radius: {vb:stylevar forumhead_top_corner_radius};*/
    }
    C'est un forum pour test c'est pour ça qu'il y a beaucoup de /**/
    Practice makes perfect

  10. #10
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Vous vous débrouillez bien, vous deux ! Il va falloir que je vois le CSS3 de près, moi, j'en étais encore au CSS2

    - - - Mise à jour - - -

    Si tu ne veux pas avoir de problème de style à refaire en cas de mise à jour de ton forum, il faut placer tes class dans le modèle additional.css. Ce modèle est prioritaire sur tous les autres et n'est jamais touché par une màj, ce qui n'est pas le cas des autres.
    ... et éviter de modifier forumdisplay (pour la même raison).
    Utilise une class déjà existante en la recopiant dans additional.css et en la modifiant à cet endroit. Cette nouvelle définition remplacera celle utilisée en standard.

    - - - Mise à jour - - -

    Grrr.... je vais désactiver le double message, car c'est la pagaille pour suivre une discussion !
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  11. #11
    Date d'inscription
    October 2006
    Messages
    317
    Version de vBulletin
    4.0
    Hébergeur
    Mavenhosting
    Pouvoir de réputation
    65
    Hello,

    Voici la méthode que j'ai utilisé pour mon exemple sur le style par défaut, après si ton style diffère il faudra adapté probablement certaines chose, moi je ne réalise mes modification que sur le style par défaut afin que le plus grand nombre de membre puisse les utiliser.

    Place tes images dans un dossier que tu vas créer nommé "images" dans le dossier misc de ton style, sinon change l'url des images dans les class CSS plus bas.

    Dirige toi dans le template "forumhome_forumbit_level1_nopost" et "forumhome_forumbit_level1_post", à la fin de ces deux templates juste avant le dernier </li>, ajoutes ceci:

    Code:
    <div class="after_catégory"></div>
    Cela va permettre d'ajouter un conteneur sous forum d'une DIV pour placé nos images du bas, pour celle du haut il suffit juste de modifiées les class existantes.

    On se dirige maintenant sur le template additional.css, et on y ajoute cela à la fin si il y a du contenu dedans, pourquoi à la fin, car ça permet si tu as déjà modifié une class que je vais te faire ajouté, quelle soit prioritaire sans devoir utilisé des !important. On ajoute cela donc:

    Code:
    .forumhead {/* images du haut */
    background-image: url({vb:stylevar imgdir_misc}/images/gauche.png), url({vb:stylevar imgdir_misc}/images/droite.png),url({vb:stylevar imgdir_misc}/images/milieu.png);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-color: transparent;
    background-position: left top, right top, left top ;
    -webkit-border-radius: 23px 23px 0 0;
    border-radius: 23px 23px 0 0;
    } 
    .after_catégory {/* images du bas */
    height: 14px;
    width: 100%;
    clear: both;
    background-image: url({vb:stylevar imgdir_misc}/images/bl.png), url({vb:stylevar imgdir_misc}/images/br.png),url({vb:stylevar imgdir_misc}/images/bm.png);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left bottom, right bottom, left bottom ;
    -webkit-border-radius: 0 0 23px 23px;
    border-radius: 0 0 23px 23px;
    } 
    .forumbit_nopost .forumhead .forumtitle a {/* décalage du titre de forum */
    margin-left: 100px;
    color: #2f4456;
    }
    .forumthreadpost, .forumlastpost {/* changement de couleur de Discussions / Messages  et Dernier message */
    color: #2f4456 !important;
    }
    .forumbit_nopost .forumhead a.collapse img {/* déplacement du bouton de collapse */
    right: 24px;
    }
    .forumbit_post .forumrow, .forumbit_nopost .forumhead, .forumbit_nopost .forumrow, .forumbit_post .forumhead, .forumbits .forumhead {/* retrait de l'ombre du bas des forums */
    -moz-box-shadow: -2px 0px 2px {vb:stylevar forumbits_shadow_color};
    -webkit-box-shadow: -2px 0px 2px {vb:stylevar forumbits_shadow_color};
    box-shadow: -2px 0px 2px {vb:stylevar forumbits_shadow_color};
    }
    J'ai commenter toutes les class CSS, tu devrais pouvoir adapté cela à ton style, si tu suis comme il faut cela, tu devrais avoir cela:

    Screenshot_2.png

  12. #12
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Superbe !
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  13. #13
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41

    Content

    En fin j'ai réussis j'ai souffert avec l'url des images
    Voila ce que ça donne avec FireFox et Google Chrome (fonctionne pas avec IE8):
    http://www.faouweb.net/forum/forum.php
    Pour le coin en haut-droit je vais créer une autre image.

    Merci beaucoup jolinary pour ton aide, ta patience, et le cours de CSS3 que tu as partagé
    Practice makes perfect

  14. #14
    Date d'inscription
    March 2003
    Localisation
    Sur mon coussin
    Messages
    5 556
    Version de vBulletin
    4.2
    Hébergeur
    localhost
    Pouvoir de réputation
    106
    Normal que ça ne fonctionne pas avec IE8 : le CSS3 n'est reconnu par IE qu'à partir de la version 9.

    Edit: le haut n'est pas correct sur les petits écrans tels que les tablettes, et l'image de gauche a un problème d'arrondi ; par contre le bas est correct.
    Correction : ça ne vient pas de l'image puisque le test de jolinary est correct, lui, même sur tablette.

    Edit2: en fait sur PC aussi on a le même problème pour le haut : pas d'image à droite, à gauche défaut de l'arrondi (on dirait que l'on voit autre chose par transparence).
    Ca doit venir de ton style (et je parierais qu'il s'agit d'un vieux style adapté (mal) pour 4.2) : le nombre de colonnes n'est pas le même sur le style par défaut.
    Dernière modification par Eve_Ra ; 21/12/2014 à 21h08.
    Miaouuu... ne me caressez pas à rebrousse-poils, ça fait de l'électricité !
    Aucune demande d'aide par mp ne sera prise en compte !

  15. #15
    Date d'inscription
    February 2013
    Localisation
    Bruxelles
    Messages
    104
    Version de vBulletin
    4.2
    Hébergeur
    PlanetHoster
    Pouvoir de réputation
    41
    Merci Eve_Ra pour les remarques je vais voir le weekend prochain
    Practice makes perfect

Informations de la discussion

Utilisateur(s) sur cette discussion

Il y a actuellement 1 utilisateur(s) naviguant sur cette discussion. (0 utilisateur(s) et 1 invité(s))

Les tags pour cette discussion

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •